HTML Image Map has been around all this while, and yet not many web pages are using it when it comes to single image with multiple links. It's really handy and fast for web designers or developers to create multiple "Hot Spots" linking within a single image, without slicing any image for linking.
For instance, your client has given you a list of sponsors and he wants each of the logo to be linked to the sponsor's web page on his website. You may want to try out Image Map, it will make your job much easier.
So What Is Image Map?
Basically, Image Map is a way that allow you to define certain area to be linked within a single image on a web page. This means that, rather than having to link the whole image as one link, you can have lots of different links within that one image.
Still not sure what is Image Map? Check out the demo.
Before we start here are the general attributes for the map tag.
<map name="map-name">
<area shape="area shape"
coords="area coordinates"
href="area hyperlink" or nohref="nohref"
target="hyperlink target"
title="area title"
alt="alternate text"/>
</map>
Most of the attributes are used quite often, let's talk about the shape and the coords attributes. For shape attribute it have rect | circle | poly | default.
For coords attribute, below is a simple overview diagram for the coordinates.
In this tutorial, you will see how you can link several logos to their web pages within a single image. First is to have your image ready, here I mashed up some of the popular web logos into one image.
First create your normal image HTML markup, notice usemap="#logos" attribute, this is to associate the image map with the image.
<body>
<img src="images/weblogo.jpg" alt="Web Logos" usemap="#logos" />
</body>
Next you will need to find out the coordinates for each of the logo using Photoshop. Let start with a circular logo, first load the image into Photoshop, press F8 for the Info Panel to appear, move your cursor to centre of the circular logo and note down the coordinates.
We will also need to find the radius of the circle. By finding out the difference between the edge of the circle's coordinates and centre coordinates of the circle, or by using the rule tools in Photoshop. Either way will help you find out the radius of the circle.
Now let's find the coordinates for a rectangular logo. You just have to find out the top left and bottom right coordinates of the rectangular logo. Using the same method above you will be able to find the coordinates easily.
Once you have find out all the coordinates for each logo, now everything is easy. Just follow the attributes for the Map Tag listed above and enter all the coordinates for each of the shapes you have found.
<map name="logos">
<area shape="circle" coords="68,56,33" href="http://www.stumbleupon.com/" title="StumbleUpon" alt="StumbleUpon" />
<area shape="rect" coords="220,19,306,54" href="http://www.youtube.com/" title="Youtube" alt="Youtube" />
<area shape="rect" coords="367,32,516,84" href="http://www.google.com/" title="Google" alt="Google" />
<area shape="rect" coords="556,12,639,115" href="http://www.wikipedia.com/" title="Wikipedia" alt="Wikipedia" />
<area shape="rect" coords="128,62,244,114" href="http://www.skype.com/" title="Skype" alt="Skype" />
<area shape="rect" coords="301,103,444,136" href="http://www.yahoo.com/" title="Yahoo" alt="Yahoo" />
<area shape="rect" coords="25,158,135,207" href="http://www.ebay.com/" title="eBay" alt="eBay" />
<area shape="rect" coords="180,147,271,175" href="http://www.flickr.com/" title="Flickr" alt="Flickr" />
<area shape="rect" coords="299,166,379,208" href="http://www.digg.com/" title="Digg" alt="Digg" />
<area shape="circle" coords="500,184,32" href="http://wordpress.org/" title="Wordpress.org" alt="Wordpress.org" />
<area shape="rect" coords="599,142,667,209" href="http://www.blogger.com/" title="Blogger" alt="Blogger" />
<area shape="default" nohref="nohref" title="Default" alt="Default"/>
</map>
For custom shape link, you can try poly shape attribute. Just defining those important coordinates and it will form up a more precise Hot Spot area for the link.
Do give this Image Map a try when you need to create multiple links on a single image.
I just bring the image to ImageReady which does all those calculations for me. Just draw the shapes you want and view the html, remove the crap ImageReady puts in... and you're ready!
Thats interesting, I should try it thanks for the tip. :)
I am trying to revamp the church's that I attend website, I have copied the code down, found the coordinates... BUT the problem that I am having is that it when I click on Home button, it will go to the home page.. which is fine, but when I hit the "about us button" it goes to the home page-- yes the coordinates are correct, and I had entered the code correctly...
any thoughts of why this is happening?
I copied the code from notepad, and pasted into my file for the website...
Any help would greatly be appreciated...
(the expermental pages is the "treasure chest page"
Hi Roger,
You missed out the "usemap" for your image.
Something like this:
img src="images/weblogo.jpg" alt=Web Logos" usemap="#logos"
Where #logos is referring to the name coord. You might want to read the tutorial again.
Hope this help!
How to Create an Image Map Using CSS
Your tutorial is great; I was able to create an image map using what you taught. I want to create an image map when my visitors go over it with their mousses, it will display some information on key hotspots. I have one almost complete, but I cannot get it to work right.
I just want to know if you know how to use CSS to create an image map and if so, can I send you the link of the page that I am working on to help me correct it.
Thanks
Robert
This is the way to do things. Who needs to pay $300 for Dreamweaver?!?!?!? From what I have found Dreamweaver is only good for simplifying image maps and hotspots but learning how to manually do things is always better in my opinion. It tends to give you a better understanding of how things work and is much cheaper! Thanks for the post its nice to see something educational on the web...not that the smut isn't still hot :)
this is so awesome. thanks!
thank u its really works it out
thank u!!!
it relly helped me out
was very useful,.. thank you
I recently implemented an interactive map using JQuery and a HTML Image Map rather than Flash. It was the first time I had used an Image Map in years. The end result is cross-browser compatible, elegant, flexible and accessible. Maybe this would be useful for anybody looking to take a HTML Image Map to the next level.
http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/
Hey there, thanks alot for the tutorial. It helped me alot, and now I can do this without looking at a sample (:
by the way, I think you should add something in this tutorial.
In Photoshop, you need to change the unit into "points", cause cm, mm, inches and pixels will not work.
That's it, other steps are perfect. Thanks again!
I am trying to have multiple images connected to one hot spot, is that possible?
I have one image per hot spot at he moment but some of the hot spots need more than one image.
I am using lightbox2.04 for the pop images but can't seem to grasp grouping images together for an image map.
can you help please?
here's an example of the code i'm using for each hot spot…
Many thanks
seems that the code didn't appear in the last post sorry…
seems that the code didn't appear in the last post again, sorry…
area shape="circle" coords="186,54,7" a href="images/school-pix/security-fence.jpg" rel="lightbox" title="Security fence around playground."
if there is no code above then it looks like I can't post code! If you know of a possible solution please email me at siderbyshire@blueyonder.co.uk
Thanks
Hi,
I am using image maps for a few pages on my website, and i used the code from the above tutorial and it works great in IE but doesn't work in FF at all. I am using a lightbox javescript for the pop up images, so that may be a problem too. If anyone knows how to fix this so it works in both browsers that would be great.
Thanks
Hi Alicia,
This is a sample of code I used for each of my hot spots in my map. Obviously you would have to change image names for your own and your co-ordinates will be for yout hot spots not mine.
Basically the important bit is the rev="" at the end.
area shape="circle" coords="186,54,7" href="images/school-pix/upper-playground.jpg" rel="lightbox" alt="Main playground hot spot " title="Table area on main playground. To view more images please click here." rev=/gallery.html"
I was using Lightbox 2.04.
Hope this helps,
Si
What does the rev=/gallery.html relate to?
Do you have an online example??
So I'm trying to write this code for an ebay store.
I'm getting the image up, having photobucket host the image, but I can't seem to make anything on it clickable.
Maybe I just need to learn a bit more about html...
Just started making this site for my boss at work. Trying the image map for the second navigation bar that I have underneath the header image. I carefully followed the code, but what happens is that it puts a blue box around the entire image, like the entire image is a link, but its not clickable and none of the hotspots are being recognizable either.
Is it because I am making it in weebly? I thought weebly should recognize any custom html. I'm using Firefox, but when I previewed it in IE - same thing.
Also I thought maybe its because the coords are not whole numbers? but I tried making them integers and that didnt work either.
Someone please help =(
this is the code i used
code....
[center] [ img src="/files/theme/nav_bar_nuevac2.png" usemap="#nmap"/] [/center]
[map name="nmap"]
[area shape="rect" coords="0.750,0.056,2.639,0.500" href="hospital-tour.html" alt="HospitalTour"]
[area shape="rect" coords="3.208,0.056,5.110,0.500" href="photo-gallery.html" alt="PhotoGallery"]
[area shape="rect" coords="5.694,0.056,8.874,0.500" href="emergency.html" alt="WhatisanEmergency"]
[area shape="rect" coords="9.471,0.056,11.610,0.500" href="payment.html" alt="PaymentPolicy"]
[/map]
NEVERMIND --------- i figured it out! I realized I was using the wrong coordinates... this is what photoshop gave me though... so now I am confused. Anyways, using the correct coordinates it works now.
Awesome revisit of the html map. This very simple to use & implement while cutting down on http requests. But is there a way to achieve simple hover effects with css?
Thanks a lot for sharing all this stuff, man you Rock!!!!
Hello.
i want to add this image-map to my top navigation menu.
i'm using THESIS Theme in wordpress..
how do i do that ?
thanks :)
Oren
Nice Article man..can u tell how to highlight the links on image map.
I've tried doing what you said up top. When I copied the image and inputted your code - It worked fine. But when I tried it with my jpeg. It did not work. I'm fairly new to this, so maybe it is just a character here or there. I have included the html code for you to view. Please help.
Jeffrey Melendez
I've tried doing what you said up top. When I copied the image and inputted your code - It worked fine. But when I tried it with my jpeg. It did not work. I'm fairly new to this, so maybe it is just a character here or there. I've copied the source from photobucket. Can someone send me the code for an image in photobucket. I did everything you told me, but it still does not work. I get the image, but not the link to work.
THIS IS WHAT I HAVE. It does not work. Please help
[IMG src="http://s1194.photobucket.com/albums/aa361/battlefieldford/?action=view¤t=WeeklyAd28Jan2011.jpg" target="_blank"> </MAP]
I figured it out. I had a period instead of a comma in my "coords"
Hi,
One query , sorry i am new to image maps, i would like to understand, does this works only on yourdomain.com with Maps used in HTML tags on some filename.html, how about if i want use this image to be posted on some other public forums or blogs which i don't own and still use the image maps, is it possible, I guess not but still asking to confirm, thanks for the help in advance
Regards,
Merlin
Thanks a lot for the tip, looks great!!!
What's with the blue border on my image? It's not in the code as far as I can tell, and it's not in my image? I'm confused. Any hot tips?
I did it!
Brilliant !! I never knew it could be so easy :-)
-Abhi
any idea on how to remove blue border???
make the border = 0. this will remove the blue border...
Thanks so much, your tutorial was easy at best.. spent over 3 hrs on the net before coming here... thanks so much i really appropriate.. I am working on a new site, and will definitely show my appreciation by linking you...
i had done everything ok . but the link is not working . i'm working on netbeans and the link image is loaded but the link is not working.
You my my blogging life some how easy :)
I was struggling for copy paste in most of images, and thought, let me try wheter there is any change to give multiple links in single image. The result I landed on your website and learnt how to do this. Thank you!
My First webpage with your code, live demo :)
http://www.easyblogging.in/2011/07/ebayin-deals-of-week-ends-26th-july.html
I'm an amateur and have a page working thanks to your tutorial. I didn't see the comment from Kian about using points in Photoshop (vs cm , etc) until I got a good approximation via trial & error. I still notice a problem however. When the page is full size, both links work but at less than full size, only the left link works.
Hi,
Great.
But wondering in some browsers you can see, for a second, an outline in BLUE where the image mao is.
Is there anyway to make it transparent so it doesn't show.
Thank you.
Hello,
In my side don't work', i don't know what is wrong. :(
Here's the solution for removing the blue border:
http://www.boutell.com/newfaq/creating/border.html
i mostly learned my mistakes by practicing and practicing if some body posts like this then many people move fast and they will learn much more in less time
thanks a lot keep on posting
Hi guys
I am so nooooob that I don´t know where to paste this code!?! I have found the coordinates an the code seems ok.
Am I supposed to change the "logos" name you used with the name of my image? And does it have to have the .jpg on the end?
And this last line in your example: "" does thet have to be in mine too?
Thanks a lot for your support!!!
Oh sorry, forgot to say that I´m using wordpress.org and in the editor there I cant find any HTML to change, it´s all .php and .css.
Sorry for my ignorance btw:/
Great Site, your plugins are very useful and save me a tonne of time.tyest
My problem is having 2 map name:
then link map1 to mouseover jquery, and aslo link map2 to mouseover jquery....
now html seems to be confused !!!
Any ideas guys?
thanks
Would be nice to say how instead of "I DID IT"
how? i cant seem to shake the blue border!!