I know creating hotspots in an image map using a tool like dreamweaver is not a big deal but if you ever come across a situation where such image maps are not allowed then you have to re-think about it. If you have ever developed a facebook application then you know image maps are not allowed in a FBML application. I was working on a facebook application named Affinity where on a page i needed the image map. I googled a bit but did not find any suitable solution, so I went on to creating my own solution for it using CSS absolute positioning.
Basically, the idea is that main picture goes in background into a main or parent DIV and we place some DIVs with z-index greater than main picture and also set their Top and Left properties. Further, in order to make sure that hotspots are located correctly across all modern browsers, we use a CSS trick which is to make the parent DIV relatively positioned and rest of the DIVs absolute positioned. You need to customize the Top & Left properties of child DIVs (hotspots) to set the correct hot spot positions and also the Height and Width properties to set the size of the hot spots.
<div style="position: relative;"> <!-- Our Four Hot Spots - Top & Left properties adjusted --> <div id="ihint1" style="background: none repeat scroll 0% 0% transparent; cursor: pointer; outline: medium none; text-align: center; vertical-align: middle; position: absolute; top: 72px; left: 460px; z-index: 99; padding: 10px;"></div> <div id="ihint2" style="background: none repeat scroll 0% 0% transparent; cursor: pointer; outline: medium none; text-align: center; vertical-align: middle; position: absolute; top: 11px; left: 635px; z-index: 99; padding: 10px;"></div> <div id="ihint3" style="background: none repeat scroll 0% 0% transparent; cursor: pointer; outline: medium none; text-align: center; vertical-align: middle; position: absolute; top: 170px; left: 632px; z-index: 99; padding: 10px;"></div> <div id="ihint4" style="background: none repeat scroll 0% 0% transparent; cursor: pointer; outline: medium none; text-align: center; vertical-align: middle; position: absolute; top: 78px; left: 887px; z-index: 99; padding: 10px;"></div> <!-- Main Background Image --> <img src="img/first.png" border="0" alt="" align="absbottom" /></div>
You can download it here.
