How To Create Multiple Links On A Single Image With Image Map

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.

Web Logos

[tut demo=”http://www.onextrapixel.com/examples/image-map/” download=”http://www.onextrapixel.com/examples/image-map/image-map.zip”]

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.

Image Map Coordinates Overviews

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.

Web Logos

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.

Centre of Circle

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.

Circle Radius

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.

Rectangular Coordinates

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.

[tut demo=”http://www.onextrapixel.com/examples/image-map/” download=”http://www.onextrapixel.com/examples/image-map/image-map.zip”]

Conclusion

Do give this Image Map a try when you need to create multiple links on a single image.

Comments

    • 008,
    • May 12, 2009
    / Reply

    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!

      • Terrance,
      • May 12, 2009
      / Reply

      That’s interesting, I should try it thanks for the tip. :)

    • Roger,
    • September 18, 2009
    / Reply

    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”

      • Terrance,
      • September 19, 2009
      / Reply

      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!

  1. / Reply

    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

    • Jason,
    • October 13, 2009
    / Reply

    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 :)

    • D,
    • October 16, 2009
    / Reply

    this is so awesome. thanks!

    • kabi sapkota,
    • November 10, 2009
    / Reply

    thank u its really works it out

    • kabin sapkota,
    • November 10, 2009
    / Reply

    thank u!!!
    it relly helped me out

    • Arunkumar,
    • December 26, 2009
    / Reply

    was very useful,.. thank you

  2. / Reply

    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/

      • Floand,
      • March 23, 2013
      / Reply

      Hey, that’s what I’m trying to do too. I can’t access your link, would like to see yours.

  3. / Reply

    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!

      • Kyle,
      • September 14, 2012
      / Reply

      Thank you for this comment! I was very confused until I turned the units into points.

    • Si,
    • February 3, 2010
    / Reply

    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

    • Si,
    • February 3, 2010
    / Reply

    seems that the code didn’t appear in the last post sorry…

    • Si,
    • February 3, 2010
    / Reply

    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

  4. / Reply

    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

      • Si,
      • February 10, 2010
      / Reply

      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

        • Dave,
        • May 3, 2011
        / Reply

        What does the rev=/gallery.html relate to?
        Do you have an online example??

    • jj,
    • February 13, 2010
    / Reply

    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…

    • Sara,
    • June 23, 2010
    / Reply

    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

      • Sara,
      • June 23, 2010
      / Reply

      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]

        • Sara,
        • June 23, 2010
        / Reply

        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.

    • Alex,
    • July 7, 2010
    / Reply

    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?

  5. / Reply

    Thanks a lot for sharing all this stuff, man you Rock!!!!

    • Oren,
    • December 25, 2010
    / Reply

    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

    • rahul,
    • December 30, 2010
    / Reply

    Nice Article man..can u tell how to highlight the links on image map.

  6. / Reply

    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

  7. / Reply

    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.

  8. / Reply

    THIS IS WHAT I HAVE. It does not work. Please help

    [IMG src=”http://s1194.photobucket.com/albums/aa361/battlefieldford/?action=view&current=WeeklyAd28Jan2011.jpg” target=”_blank”> </MAP]

  9. / Reply

    I figured it out. I had a period instead of a comma in my “coords”

  10. / Reply

    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

  11. / Reply

    Thanks a lot for the tip, looks great!!!

    • Lisa,
    • March 17, 2011
    / Reply

    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?

      • Lisa,
      • March 20, 2011
      / Reply

      I did it!

    • Abhi,
    • March 23, 2011
    / Reply

    Brilliant !! I never knew it could be so easy :-)

    -Abhi

    • Rob,
    • April 20, 2011
    / Reply

    any idea on how to remove blue border???

    • Capa,
    • June 30, 2011
    / Reply

    make the border = 0. this will remove the blue border…

    • Mark,
    • July 10, 2011
    / Reply

    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…

    • tushki,
    • July 20, 2011
    / Reply

    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.

  12. / Reply

    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

    • Jim,
    • September 7, 2011
    / Reply

    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.

    • Ange,
    • September 10, 2011
    / Reply

    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.

    • Sorin,
    • September 28, 2011
    / Reply

    Hello,

    In my side don’t work’, i don’t know what is wrong. :(

    • Steve,
    • October 20, 2011
    / Reply

    Here’s the solution for removing the blue border:

    http://www.boutell.com/newfaq/creating/border.html

  13. / Reply

    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

  14. / Reply

    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!!!

  15. / Reply

    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:/

  16. / Reply

    Great Site, your plugins are very useful and save me a tonne of time.tyest

    • htmlsite,
    • January 3, 2012
    / Reply

    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

    • Ben,
    • February 21, 2012
    / Reply

    Wow. Lifesaver!! Cheers!

  17. / Reply

    thnx your post is really great

  18. / Reply

    Thanks for the awesome tutorial.I will surely implement in my blog now :)

    • Cherry,
    • June 14, 2012
    / Reply

    I followed the instructions as accurately as I could, and I even had other image map tutorials opened, but I could not seem to make it clickable :( I am not sure what I did wrong.

    1. / Reply

      Hi Cherry,

      Do you have a working copy online, so that I can take a look? Thanks

      • james,
      • February 13, 2013
      / Reply

      hey there Cherry did you manage last year to work the image map out?

      if you did not and want to revisit the issue I can help ya?

      Jai

    • sarika,
    • August 30, 2012
    / Reply

    really great … thank you so much … it’s working ..

  19. / Reply

    this code is working properly…..BUT i am trying to add this code into

    {dynamically coming image }

    {above code}

    then is not working.. (i am using SMARTY frame work) any one can help me please…!!!

    • Joey,
    • November 13, 2012
    / Reply

    Hi,

    When I have all of my coords and made it into the HTML format, how do it put it on the image? I’m using blogger. Help appreciated thanks :)

    • Henk,
    • January 22, 2013
    / Reply

    This solution works great on desktops, but in the default browser on Galaxy S2 phone browser it fails.
    It seems the hyperlink areas are on the wrong place.
    Don’t know if this is is a problem on other phones too.

    • M.Hosein,
    • February 13, 2013
    / Reply

    thanks a lot, very good tutorial !!!!!!!!!!

    • Floand,
    • March 23, 2013
    / Reply

    Yeah thank you, it seems to be exactly what I need. Except, I’m very new at this and I have no idea where to start. I’m trying to make a map with links behind continents for one of the pages on my WP website. Where would I start and how do I incorporate it in the page?

    Any help will be greatly appreciated! Thanks!

    • garrett,
    • July 16, 2013
    / Reply

    Hi! I am looking to make a single image that once clicked anywhere will open up multiple hyperlinks. Can I use this method and essentially make the entire photo the space for each hyperlink? Can I “trick” the HTML to do this?

    • Nick,
    • September 6, 2013
    / Reply

    You have opened a whole new way of working for me here, thank you for your lucid and precise explanation.

    In Photoshop/Info I had to click the “+” alongside XY and set the coordinates to Pixels

    • Chance,
    • September 8, 2013
    / Reply

    hi thanks so much for this simple tut. it works perfectly fine and is exactly what i need.

    However, i would like to ask, is it possible to track the posistion on the image as my image is resizing accordingly to windows size. Once my window is minimized the posistion of the button is lost

  20. / Reply

    This is awesome, thanks! I was wondering how to do this.
    Don’t suppose there’s anyway I could do this without Photoshop?… because that’s a lot of of money I don’t have?… ;)

    • Pat,
    • May 16, 2015
    / Reply

    Here’s a great free online tool that will map (circle, square/rectangle, or polygon) elements within your image and give you the HTML.

    https://developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/365ccfd644f2b008c33f0046d2ba1a8f/summer-html-image-ma_1355318513_demo_package/index.html

    1. / Reply

      Thank you for sharing this Pat.

  21. / Reply

    Really thank you team! I am such emotional with it.

    • Naresh,
    • December 19, 2015
    / Reply

    you guys are simply the best, the tutorial is explained in very simple way.
    Thanks

    • adrie jason,
    • March 16, 2017
    / Reply

    I have already done this tutorial, and it’s works on desktop, but nothing works on mobile, can you help me to solve mobile friendly problem with this image map?

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals