Image Map Resource
- An image map is a picture with 'hot spots'.
The hot spots function like hyperlinks: when the user clicks on a hot spot,
they are taken to a new page. See how image maps work by clicking on
Fluffly's face in the image below.
- Unless you are including indicators to the
user that tell them where the hot spots are, you should use them sparingly.
In our next course (n341), you'll learn how to couple image maps with tool
tips and other visual cues -- image maps can create very powerful visual presentations. But for
now, we'll learn how to set simple hot spots up tor use in the Final
Projects.
- There are a several parts to making an image
map.
- Locate an image that you want to turn into an image map.
- Locate a editor of some kind that will let you "draw" hot spots.
FrontPage 2003 (an oldie but goodie) is part of the IUware free download
software if you don't have access to any other editing tool. The editors
support a similar interface to creating image maps. In Front Page, you would
right click on your selected image, click on the icon of your choice
(circle, rectangle, polygon). Your mouse becomes a drawing device. Trace out
the area you want to be a hot spot, and hit enter. The editor magic fairies
will produce coordinate code for you. In the case of the above Fluffy Map,
here's the coordinate code produced.. Note the new tag name, "area".
Furthermore, note that the href link points to where the user will be taken
if they click on the hotspot
- <area href="imageMapClicked.html" shape="circle" coords="231, 109, 69"
alt="image for fluffy cat"/>
- The area tag line above goes inside a <map></map> tagset. The map tag
associates the image you are going to use with the pixel coordinates above.
The association is made with an ID label.
- Putting the area tag inside the map tag set where it belongs, we get:
- <map id ="someMeaningfulLabel">
<area href="imageMapClicked.html" shape="circle" coords="231, 109, 69"
alt="image for fluffy cat"/>
</map>
- One final thing, and you're there. Add an img src tag that includes a
usemap value-attribute pair to connect to the map id label:
- <img src="fluffyCat.jpg" width="300" height="316" alt = "image map for
fluffy cat" usemap="#someMeaningfulLabel"/></p>
- Here's ALL the code you need in it's entirety. Of course, your code will
have different filenames, coordinates and map label
- <map id ="someMeaningfulLabel">
<area href="imageMapClicked.html" shape="circle" coords="231, 109, 69"
alt="image for fluffy cat"/>
</map>
<img src="fluffyCat.jpg" width="300" height="316" alt = "image map for
fluffy cat" usemap="#someMeaningfulLabel"/>
- There! that's all there is to it. Upload your image, the page with the
image map code, and the page you want the user to be taken to, and poof!
you're done.
- A box of chocolates for this one.
- You can test your understanding of list
syntax at this interactive link:
Image Map Tutorial