Hide Sidenotes
Is it possible for one image to contain several links, all of which are dependent on which part of the image was clicked?
Yes, it is possible.
This process or technique is what they call imagemapping.
In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to various destinations (as opposed to a normal image link, in which the entire area of the image links to a single destination). Wikipedia
Examples are the SUBSCRIBE portion found in my sidebar; the RESOURCES, CONTACT, and TAG box located at my footer.
click image for a closer look.
hover the mouse on the image to see the links
Understanding the Code
Here is the HTML code of the above image:
<img src="http://www.geocities.com/techniquealtechie/imagemap.jpg" width="265" height="293" border="0" usemap="#imap_33" >
<map id="imap_33" name="imap_33" >
<area shape="rect" coords="37,32,226,130" alt="Create customized 'for dummies book cover'" title="Create customized 'for dummies book cover'" href="http://www.pageplugins.com/generators/fordummies/">
<area shape="rect" coords="158,137,229,183" alt="Check out my site: The Technical Thought Of You" title="Check out my site: The Technical Thought Of You" href="http://technicaldotcom.blogspot.com">
<area shape="rect" coords="34,226,141,244" alt="About The Author" title="About The Author" href="http://technicaldotcom.blogspot.com/2007/12/about.html#author">
<area shape="rect" coords="0,262,265,294" alt="Create your own barcode" title="Create your own barcode" href="http://www.signgenerator.org/barcode/">
</map>
Based on Extropia's Introduction to Web Design,
Client-side image maps introduce:
a. <MAP> and <AREA> tags
b. USEMAP attribute for the IMG tag
Usemap Attribute
an attribute in an img tag;a name or id to associate an image map with an image
<img src="http://www.geocities.com/techniquealtechie/imagemap.jpg" width="265" height="293" border="0" usemap="#imap_33" >
Map Tag
the map definition where:area shape="area shape"
a. rect - a rectangle or four sided figure
example: <area shape="rect">
b. poly - a polygon or multi sided figure
example: <area shape="poly">
c. circle - a circle
example: <area shape="circle">
coords="area coordinates"
a. for rectangle - coordinates needed are top left and bottom right corners
example: <area shape="rect" coords="37,32,226,130">
b. for polygon - coordinates are mapped individually
example: <area shape="poly" coords="10,0,14,3,7,10">
c. for circle - coordinates needed are center and radius
example: <area shape="circle" coords="20,10,5">
alt="alternate text"
title="area title"
href="area hyperlink" or nohref="nohref"
<map id="imap_33" name="imap_33" >
<area shape="rect" coords="37,32,226,130" alt="Create customized 'for dummies book cover'" title="Create customized 'for dummies book cover'" href="http://www.pageplugins.com/generators/fordummies/">
</map>
Popular HTML Editors like Adobe Dreamweaver and Microsoft FrontPage have this as built in functions.
Online Image Map Editors
Below are two of my favorite online image map editors.
(1) Image Mapper from ISDN*tek
- creates rectangular hotspots
(2) Open Bracket LLC's Online Image Map Editor
- creates polygonal hotspots
For more online Image Map tools, please see:
Maschek.hu's Online Image Map Editor
Online Image Map Tool
To understand more about Image Maps, check out these links:
Creating Image Maps
HTML Map Tag
How to Build Image Maps Without an Image Map Editor
Resources:
http://en.wikipedia.org/wiki/Image_map
http://www.metacentric.net/FAQ?glossary=HTML%20attribute
http://www.techweb.com/encyclopedia/defineterm.jhtml?term=html+tag
http://www.elated.com/articles/creating-image-maps/
http://www.w3schools.com/TAGS/tag_map.asp
http://www.echoecho.com/htmllinks07.htm
http://webdesign.about.com/od/imagemaps/a/aabg051899a.htm
http://kb.iu.edu/data/abyt.html
http://www.extropia.com/tutorials/web_design/defining_image_maps.html
http://www.webopedia.com/TERM/C/CGI.html
http://htmlescape.compender.com/2008/01/raymonds-html-escaper.html
Digg this! | Save to del.ico.us | Save to technorati | Stumble it! | Print
