100x100 Avatars Trans. PNGS Wallpapers Layout Index Div Layouts Table Layouts Photoshop Articles Misc
Memory P H O N Y U Divine Designs Cinematic Parade Tenshi-Ai Designs The Forgottten Lair Towairaito Graphics Apply? (eh) Stats/Info. Link Exchange
Do Not Copy Who Links Fight Spam!
Image Mapping
An image map is a single image that links to different URLs. It's real easy; you just need two sets of cordinates for each link. =)The image
First thing to do is design your image map. Remember to keep it simple, not a whole list of text as your entire navigation. We want it clean, don't we? :)
The image I will be using is this simple site image map:
The coding
Next step is the image map tag. Replace the bold text with yours:<img usemap="#mymap" src="imagemap.jpg" height="#" width="#" border="0" valign="top">
Next is putting in the information of the 'hotspot'. Each hotshot needs four numbers, that will make the area a link on your image:
1st Coordinate: The upper left right of your hotspot.
2nd Coordinate: The upper left column of your hotspot.
3rd Coordinate: The lower right row of your hotspot.
4th Coordinate: The lower right column of your hotspot.
Place this code after the tag. Replace the bold text and the link URL with yours:
<map name="mymap">
<area shape="rect" coords="174,19,240,40" href="index.html" alt="Main">
<area shape="rect" coords="29,22,95,45" href="site.html" alt="Site">
<area shape="rect" coords="37,61,168,82" href="graphics.html" alt="graphics">
<area shape="rect" coords="151,92,250,120" href="media.html" alt="media">
<area shape="rect" coords="24,123,150,147" href="tutorials.html" alt="tutorials">
</map>
*Sorry if it's too hard to comprehend. o.O;;
Numbers with the colour pink are the second number.
Numbers with the colour brown are the third number.
Numbers with the colour red are the fourth number.
- Green dots represent the cordinate spots.
- White border lines show the area of the hotspot.
So in the end, it should be like this:
*links will not take you anywhere. >.>
The result