Skip navigation
Currently Being Moderated

Combining Swap Image and Image mapping (aka Hotspots)

Nov 25, 2012 10:06 AM



I want to make a page on my website where users can toggle between three images by clicking on one of three buttons/links. In each of those three images I want to make several different [!] map-areas so people can click on certain parts of the image and go to a specific part of my website. The three images I want to use are floor plans of a house, and for each room I have pictures and text.


Until so far, I've managed to make three clickable texts (camera, text, normal) and for each tekst a separate image (the images are the same size and have similar colors, but the symbols used in the images are different). Can anyone help me with the code for creating hotspots for each of the images?


The web-page I'm talking about can be found at:

  • Currently Being Moderated
    Nov 25, 2012 11:28 AM   in reply to WilcovanderMersch

    Look at DW's Show/Hide Layer Behaviors.


    Put image maps into your respective Layers.


    Use jQuery to add map highlights to hot spots.



    Good luck,

    Nancy O.

    Mark as:
  • Currently Being Moderated
    Nov 28, 2012 5:33 AM   in reply to WilcovanderMersch

    Yes, thank you. It indeed helps but the CSS visibility property only makes sure the images aren´t visible. When the images are hidden, they still take up space. So it only creates another problem.


    In fact, this problem doesn´t occur when applying it on an empy html-page, but when inserting it on a page on my website (e.g. with lots of other scripts) the space the hidden images are taking up is very annoying. Is there any way to evade this property of the visibility-property?


    Yes indeed.  When you use display:none | block to make things invisible/visible instead of visibility:hidden | visible, your page elements will only take up space when they are visible and not when they are invisible.


    To use this approach on your page, you would need to either manually code the display behaviors, or use the DW behavior called "Change Property".  It will require that each of your target elements have a unique ID value assigned. If that is the case, you can apply the behavior to a link, select the appropriate target element and toggle its display style between 'none' and 'block' as needed.  Make sense?

    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