![]() |
![]() ![]() |
![]() |
|
IMAGE MAPS Image maps are graphic images in html pages that contain multiple hypertext reference links. The images themselves are normal .gif or .jpg files; the HTML tags in the page define the image map. HTML codes in the page associate coordinates on the image with URLs. |
|
CREATING AN IMAGE MAP First, insert your image into your HTML document using the normal IMG SRC tag (i.e. <img src="image.gif">. Save your HTML document, then close it. Second, use Mapedit to define your HOT SPOTS. |
|
MAPEDIT Mapedit is an executable program that helps you to identify where you want your HOT SPOTS to be. Click here to download Mapedit |
|
USING MAP EDIT: Start Mapedit. Once you are in Mapedit, Select File | Open/Create. In the Open/Create Map window, click Browse... next to Map or HTML file input line. In the Open window, find the html document containing your image and click OK. Choose the image that you wish to create into an Image Map, Click OK. This should bring you back to the Open/Create Map window. Click OK. In the Mapedit main window, you should see your image. Select Tools. Choose the shape that you wish your first Hot Spot to be (i.e., rectangle, circle or polygon). The polygon allows multiple points and random shapes. Click your image where you want this hot spot to be and drag (this will take practice). When the hot spot is in the right place and is the right size, "right click". This will open the Object URL window. Specify a URL, such as http://www.microsoft.com, and click OK. Continue defining all of your Hot Spots. When done, you can test your image map by selecting Tools | Test + Edit in the mapedit main window. You can also define a default URL (or not) to be used if the user clicks an area outside of your defined Hot Spots. To do this select File | Edit Default URL and specify a default URL. If you are comfortable with your Image Map, select File | Save. Your HTML document will be updated with the image map coordinates. Open your HTML Document and test your Image Map! NICE JOB! |
| Back to Top |