Image maps are pretty cool. You can turn any image into a link on a web page, but an image map allows you to have different links depending on what part of the picture someone clicks on. On the covered bridge web page, I had an image map of the United States with links to each state that had a covered bridge web page. I found the picture and code on another site and then modified it for my use. That way I didn’t have to program in the shape of each state since they were there already.
Lately I have been writing some wikis at wikia.com for some pinball apps for the iPod. On the first page I have an image of the pinball table, which is an image map. You can click on different parts of the image of the pinball table and go to a page about that part. By using ALT tags, some text will pop up telling you what the part is when you hold the cursor over it.
The problem is they are a lot of work. To get that functionality, you have to write in the coordinates of different shapes which can be rectangles, circles, or irregular polygons. Then each shape has to have a link and an ALT tag to go with it. The map I did today has 30 different regions that you can click on.
I found a Hungarian site that helps out a lot, but it generates HTML and I really need wiki markup language which is different, though it has all of the same elements. So I can take the HTML and paste it into a Microsoft Word document. From there I can do find and replace on different elements to get it into the correct format, deleting commas and quotation marks, etc. Then I had to get some of the information in a different order so I inserted tabs in certain spots, copied and pasted in to Excel, then copied and pasted columns of text, then back into Word.
HTML rectangle:
<area shape="rect" coords="227,870,414,936" alt="Flippers" href="Other_Parts.html">
Wiki rectangle:
rect 227 870 414 936 [[Other Parts|Flippers]]
So it’s a pain. But the result is pretty neat. Plus, with wiki software you do all the coding for the full-size image, but you can show any size smaller image you want on your page. And the wiki software automatically takes care of the different size as if someone was using the full-size image. That’s something HTML doesn’t do.
Here is the result on the homepage of the Da Vinci Pinball Wiki.