|slicing + absolute positioning|
I'm not saying its a bad solution, I just don't like dealing with multiple images and other penalties (ie. maintenance) associated with it. I would rather go with a single large image and define regions in it that's clickable. That's where image maps come in.
You start off by declaring the image:
<img scr="bigbanner.jpg" alt="frontpage banner" border=0 usemap="#hotspots"/>
The new thing here is the usemap attribute. The value of the usemap attribute must be the same with the map id. The map element acts as a container for specifications regarding the map's active areas (ie. hotspots), where are define as area elements within the map.
The matching map markup would be:
<map name="hotspots"> <area shape="rect" coords="20,20,170,170" href="somepage2.html"/> <area shape="circle" coords="250,175,50" href="somepage3.html"/> <area shape="poly" coords="117,241,277,312,84,370" href="somepage4.html"/> </map>
The shape of the area element is influenced by the *duh* shape attribute. Rectangles and circles are fairly easy to use but watch out for with poly. Its the most flexible and most tricky to use. In the example, I'm creating a "triangle"; the first 2 values in the coords form the first point, the second 2, form the second point and the third pair gives use the third (end) point. Given enough coords information, I can make the "poly" area follow the outline of any item on any image.
As for the coordinate values, I just have to remember that the top left corner of the image is 0,0. Also, map is a non-visual element so I can put it anywhere on the page markup.