Skip navigation
Predatorhackz
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.

 

http://www.julialange.co.nf

 

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.

 
Replies
  • 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.

    Example:

    http://alt-web.com/FluidGrid/Fluid2.html

     

     

    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 http://www.csegno.com.ar/fla/cSegno%20flash%20page.html) 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!

    Cristiano

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

     

    PZ

     
    |
    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