Creating Image Maps Using CSS

image_mapI 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.

7 thoughts on “Creating Image Maps Using CSS

  1. 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.

  2. 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

    
    style="position:absolute; top:264px; left:369px; z-index:99; width:126px; height:20px;"
    

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s