How To Create Multiple Links On A Single Image With Image Map
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. Enjoy!
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