Skip navigation
Currently Being Moderated

How to get Hotspots to stay in the same place in Responsive Design?

Apr 12, 2013 8:35 AM

Tags: #design #html #links #css #layout #html5 #cs6 #dw #fluid #responsive

Hello Adobe Community,

                                      This is my first post on the forum and it's a question. I have a nav bar image with seperate buttons inside, which i want to be linked to the corrosponding pages. However whenever i create a hotspot, the page resizes and the hotspots are moved! I understand why this is happening (Due to the page size changing and the hotspots staying where they are), however i was just wondering if there was a way around this problem. I will attatch the site below however note that this site is not complete and is just for test purposes.


Thank you for reading and i hope you can help, this is driving me crazy!


My Dreamweaver Version is CS6


I have the full CS6 suite if that helps.


The Navigation bar on the site above is what i am refering to.


Thank you in advance for any help.

  • Currently Being Moderated
    Apr 12, 2013 10:02 AM   in reply to Predatorhackz

    Owing to the fixed nature of hotspot coordinates, they do not resize with the image map.  As such, scalable image maps must be avoided in responsive or % based layouts. 


    For  a lot of semantic reasons, it's better to use CSS styled lists for menus.




    Nancy O.

    Mark as:
  • Currently Being Moderated
    Apr 19, 2013 4:19 PM   in reply to Nancy O.

    Hi, I am actually posting my version of the question, rather than any answer...

    I understand by Nancy's comments that there is an alternative and better way to manage "traditional" menus.


    What if, instead, my menu is displayed "in circle" around an area, and I want to display different information (mainly text) inside the circle, and sometimes aside it, depending on what menu element I hover on?


    I did it in flash (see and I am basically trying to replicate it in a fluid layout fashion (js, css, etc..) , to make it available to tablets/smartphones as well.


    Thanks a lot!


    Mark as:
  • Currently Being Moderated
    Apr 20, 2013 10:36 AM   in reply to cSegno

    Hi cSegno,


    Unfortunately the easy method of using css exclusions to do this, is only supported semi-completely in some browsers behind a preference setting.


    The other method would be to use the html5 canvas element and javascript. The canvas element is supported by all modern mobile devices.



    Mark as:
  • Currently Being Moderated
    Apr 20, 2013 4:14 PM   in reply to cSegno
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points