Image map in css
In this tutorial, we will see how to add clickable area to a background image to create in css the effect of image mapping without using the html element <map>.
This method is used to render part of an image interactive with the mouse on click and is valid for rectangular area.
First, I created a background image representing a top picture (type header) and a bottom menu with 4 buttons:
To this image, I will ad 5 clickable area, the first being the picture of the frog, the other 4 being the 4 buttons of the bottom menu.
To understand better what we will create, I duplicated the above picture and added a white border to each clickable area, their width and height and their position (top and left):
The html structure
The html structure consists of a simple block element div with an unique id which contains 5 elements <a> (the links), each one having their own id (to give each one their unique style) and a class name to the links of the bottom menu which share the same css style (and avoid to repeat the same css rules).
<div id="image_map">
<a href="#nogo" id="link1"></a>
<a href="#nogo" id="link2" class="menu"></a>
<a href="#nogo" id="link3" class="menu"></a>
<a href="#nogo" id="link4" class="menu"></a>
<a href="#nogo" id="link5" class="menu"></a>
</div>
The css rules to create the image mapping
We will start with the css style of the main div (id=”image_map”), we specify:
- the width: the same width as the background image
- the height: the same height as the background image
- the background image using the css property background
- the position relative needed next to position its sub elements in an absolute way
#image_map{
width:450px;
height:400px;
background:url(css_image_map.jpg) no-repeat;
position:relative;
}
The css style of the links inside ‘image_map’:
- display:block; the elements are converted from inline element to block element so that we can specify the width and height
- position:absolute; all the links are positioned in an absolute way in rapport to the main div.
#image_map a{
display:block;
position:absolute;
}
All the links of the bottom menu share the same css property, for this reason I chosed to use a commune class to avoid to repeat the same css rule: the width of 100px, the height of 50px and their position at 340px form the top border of the main div.
#image_map a.menu{
width:100px;
height:50px;
top:340px;
}
Other then that, each has a unique id (link1, link2, link3…) used to impost their specific style.
For the first link which will cover the area of the picture of the frog: the width of 430px, the height of 320px, the vertical position at 10px from the top border and horizontal of 10px from the left border of the main div.
#image_map a#link1{
width:430px;
height:320px;
top:10px;
left:10px;
}
As we have already specify the css rules for the class ‘menu’ of the 4 bottom links, it will remain to specify for each one of them their horizontal position from the left border of the main div.
#image_map a#link2{
left:10px;
}
#image_map a#link3{
left:120px;
}
#image_map a#link4{
left:230px;
}
#image_map a#link5{
left:340px;
}
The result of the image map
About The Author
Lara
Thank you SO much for this guide! I got the image map done on my FIRST TRY, I didn’t even need to adjust it! This was a great guide and it really made it easy for me to get the job done. Thanks again!
Onsitus
Nice, I am happy to see that my tutorials are appreciated!
Jim
Thanks for this great tutorial, exactly what I’ve been looking for.
I’ve mapped 9-hotspots on a common background, each to be linked to a separate photo album. The only problem is I can’t get it to run with IE 7. However, it runs well on 3-other browsers. Any suggestions?
Onsitus
Ciao Jim, do you have a link to your testing page?
Jim
Onsitus,
Sure here it is:
http://halicho.com/home/gallery/#nogo
Jim
Onsitus
Ciao,
In the html structure, remove the element img (not necessary as the background image is loaded via css) and remove the p and br (simply put the link in the div ‘image_map’). That should system the problem.
Jim
Yes, that was the problem, it now works well on the five browsers I’ve tested.
Thank you very much for your help with this, and for your quick response.
-jim
rakesh
good one. helps alot..thanks
Jesica
OMG. I read a ton of tutorials and was starting to put together the code. Then I found yours, and POOF! I was able to make yours work with very little effort. Oh, thank you, thank you, thank you!!!!
egorbrandt
thank you for a well-written and concise tutorial!
is there any way of putting an extra dropdown menu on top of the background image-mapping one? i can’t seem to figure it out… either i’m left with working links on the background image and a non-functioning dropdown menu bar or the other way round.
your help is much appreciated!
Ravi
Thanks for the tutorial…. very useful one!
squareart
Thanks a million mate! I was searching for a fix to put a div with text on an image map – but this method solves the problem!
Great tut! THANK YOU: )
Asjad
So Nice, Thank you so much, very very use full
Andy
Thank you so much! This was very helpful!
Brandon
very helpful. This came just at the right time.
Scott
Your tutorial saved me a lot of work! Thanks!!
Helen
I’ve read possibly ALL tutorials and this is the only one that finally worked!! Thanks so much, clear and concise. You saved my day! However, I notice a grey border around the link when I click, how do I get rid of that? Also, when testing through the pages, they seem to ‘flicker’ on IE. – any suggestions. Unfortunately, site for client and not live yet, so can’t give example.
Helen
OK, sorted the ‘grey dotted outline’ around images by placing outline:none; under #menuone a (your ref #image_map a.menu){display:block;position:absolute;outline:none;}, but I still keep getting this ‘flickering’ between pages when using the link in testing. Using dreamweaver and ie8. Thanks
Onsitus
Hello Helen, there is a bug with IE8 and the use of large (don’t know where is the limit) background image. It could be your problem? It happened once to me and I resolved it with:
<!–[if IE]>
<meta http-equiv=”Page-Exit” content=”Alpha(opacity=100)” />
<![endif]–>
Helen
Hi Onsitus,
Thanks, but that didn’t help, I’ve done the menu as you’ve tutoralised. It works like a charm, but maybe you have an idea, if I can explain.
I’ve done your menu, let’s say I have link1, link2, link3, link4, link5,
and this menu is placed on all pages. All the links make the whole page ‘flash/jump’ very quickly just as it goes to the link page, except for link 1. When that link is clicked on any menu on any page to go back to that page (link 1), it is a smooth transition? Also tried;
<meta http-equiv=”Page-Enter” etc and but that doesn’t do anything. Thanks for the prompt reply.
thomas
.. VERY Usefull tutorial… Aced it in first try – even daring to change things to my own dimensions ( menu bar of 790px x 25px), due to your excellent naming of elements/links etc..
Now im eager to get a hover thing to work, so my menu tabs change colors when mouse-overed.. I get the sense, thats a whole new tutorial with a different setup(?)… but can we get to the hover from here?
Lets say you got 4 blue button-jpgs matching the button-areas that are green now. ..
up for that challenge?
Otherwise ship me link to a usefull tutorial
/thanks again
tom
Onsitus
Ciao Thomas,
nothing complicated. Simply add a background image to your link on the hover state.
PiP
That was probably the best (and only good) reference to making a CSS image map, it work first time for me too, thankyou!
Julie
Thanks for this! I am not a whiz at programming, but where do we put the HTML? I am using Thesis Theme….and I want this to go in my header. I already have the header in place, but I have a RSS image within the header that I’s like people to be able to clicj and go to my RSS feed.
Thanks!!
David
Awesome tutorial, tried another one which almost made me give up. Simple and easy. Nice!
Oren
Hello.
i want to add a navigation menu above my header and i want it to act as an image-map.
i’m using Thesis theme for wordpress.
what should i do ?
thanks
Oren
Rony
Your Amazing! very good i got it on my first attempt!!!
THANKS SO MUCH!! KEEP UP THE GOOD WORK
Linda
Thank you so much for a wonderfully instructed tutorial. You are a lifesaver!
Nithya
Hi,
Is it possible to map specific coordinates in entire image.
Thanks & Regards,
Nithya
Josh
Awesome work man, was easy to implement and looks gorgeous!
Rodrigo
Very well explained. Thanks.
Can
What an awesome tutorial. Is it possible to create a hover effect, i.e, darken or lighten the image?
Thanks again for the amazing tutorial.
Can
Got it to work, thanks.
nancy
Still working ! Thanks so much for this.
Mario
You are awesome! thanks for this tutorial, works like a charm!
Mandeep
Here is another tutorial on how to achieve an image map in css. html crazy – how to create an image map in css
Alex
Worked great – thanks!
Sudeep
That’s a nice article. One question though. If I want to have a circle as a hot spot then what should I do? I can see that you are handling only the rectangle part of an image map.
david
Thankyou, This worked a treat!
zhanggang
Very grateful to this content, I also designed my wife site style
Rakesh
Thanks, this is helpfull for me.
DanP
Hi there
Thanks for the tutorial: really useful.
One thing though, it wont work for me in Internet Explorer. Do you know what the reason for this may be?
Thanks in advance.
Dan
uuuuuuu
i couldn’t put that piece of code in the style css of my webpage..
i already have a div main, where can the div image_map be put?
Jeremy
yipeee!!!! thanks!