Coding Fun Html HTML Image Map

HTML Image Map

Check out my new site at

In this screencast, we are going to talk about setting up multiple links within one piece of image, called image map. Image mapping allows you to setup different link hotspots within a single image.

Tags: , , , , , , , , , , ,

44 thoughts on “HTML Image Map”

  1. KS Tishko says:

    Спустя 10 лет…

  2. KS Tishko says:

    Лойс кто русский!

  3. how can I find cordinates

  4. very useful info. i fully got now about image mapping. thanks a lot man.

  5. Thank you so much. Very helpful.

  6. Yes sir that's the perfect term and we been using it since way back in android developement that people have forgotten already "hotspots".. When using SVG's we can simply term it "hotpoint"….

  7. Kou says:

    Thanks a lot for the tutorial.
    It was really very helpful.

  8. Syed Abbas says:

    Great tool n great tutorial. Thanks. I hope using GIMP for business purpose won't cause any license issue. If there is any restrictions please let me know. I could see the auto generated text in .txt generated file by gimp which mentioned not to be removed.

  9. very useful video for image map…Thank You!!!!!!!

  10. rama ken says:


  11. thanks a lot   great awesome work dude keep it upp!!!!!!!!!!!!!!!!!!!!!1

    u rocks

    😀 🙂

  12. Karlankare says:

    Thanks alot, this tutorial helped me in many ways.
    BTW I think you sound like a young Tom Cruse 😛

  13. Lukas Carter says:

    Gonna implement this on my site, thank you.

  14. no entiendo el ingles, pero te entendí, que es lo mas importante, gracias.

  15. Quality Video.. No fluff.. and Very Informative! You should be praised! Thanks for taking the time to make this video!

  16. Shurui Liu says:

    that tool he mentioned is really helping!

  17. gimp does it automatically for you, if you did it correctly. no need for swearing.

  18. yeah, i have it on windows 7, it freezes everytime, i just wait it out it loads up eventually…

  19. Is there a way to have the map out side the html file and just define the image to use that map?

  20. lindeberg says:

    How the fuck do i find out the coords?

  21. hey mate, is it possible to make the button change color or get another style if you make your mouse of over it :X ?

  22. Jerbot says:

    @Foaman Wait… Is it just relative to the image itself? How clever!

  23. Jerbot says:

    Is it possible to make the coords relative to a div?

  24. Criipier says:

    Dude you just saved my life! THANKS!

  25. What software do you use?

  26. can this also be done over a flash file?

  27. Heidi Cruz says:

    I mean less stressful haha

  28. Heidi Cruz says:

    that GIMP is really helpful and stressful in creating coordinates haha tanx alot! 😀

  29. Thnx a lot!!This helped me to make my comp. project more attractive!!
    Though i used MSPaint to find the coords.

  30. The GIMP image map tool is great! Nice find.

  31. @MattJTV Glad I can help

  32. V Tzankov says:

    Nice tutorial. But GIMP doesn't work on my PC. I'm using Windows Vista Business.
    I tried all GIMP versions. It freezes on Looking for Fonts. Anyway Thank you

  33. kyoko91335 says:

    please tell me what is the 6 possible attributes for an HTML image tag.ASAP..thanks

  34. FrapondaBMB says:

    you really explained it well!

    and i use gimp now.

  35. thank you for your comment

  36. Vik N says:

    very awesome video.

  37. sorry for the late reply. Hmm… this is an interesting issue. One alternative I can think of is not to set image at 100%. Instead, set width and height to the images. Hope this helps.

  38. thanks but, i'd like to have a full screen image mapped. and i'd like to set the image at 100% of the browser, but the mapping is in pixel not in absolout value: when i resize the browser window, the image size change, but the mapped link still remain in the original position…

  39. it doesn't matter what height your html page is using. You can still set your image with pixels. Hope this helps

Leave a Reply

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