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.
It doesn’t work!
@Carlo, thanks for letting me know about that. I did the minor fixing in the code, now it works fine 🙂
Thank you. It has worked perfectly on a project I was working on.
It is great news then 🙂
Hi,
Great to use idea and code here!
But am i the only one who get’s an _window undefined error when placing this in an FBML tab/application on Facebook?
Message: ‘a23744633048_window’ is undefined
Line: 3
Char: 154
Code: 0
Hope that anyone can give me a hand on this browser error.
very good…..
Thanks! We just implemented this on Facebook.com/HP.Photo.Creations. We used a standard link and a transparent GIF inside the hotspot DIV instead of your CSS padding and onclick handler. We also set the master div to the Facebook width, 520 pixels.
Without the GIF, IE8 made only the border of the DIV a hotspot.
The hotspot DIV CSS then shrinks to