Skip navigation

Dreamweaver

WilcovanderMersch Calculating status...

Currently Being Moderated

Combining Swap Image and Image mapping (aka Hotspots)

Nov 25, 2012 10:06 AM

Hello,

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:

http://www.vandermersch.net/pm30/test3.html

437 Views 3 Replies Latest reply: MurraySummers, Nov 28, 2012 5:33 AM

Replies

Currently Being Moderated

1. Nancy O.,

Nov 25, 2012 11:28 AM in reply to WilcovanderMersch

Report

Look at DW's Show/Hide Layer Behaviors.
http://alt-web.com/DEMOS/Show-Hide-Layers.html

Put image maps into your respective Layers.

Use jQuery to add map highlights to hot spots.
http://alt-web.com/DEMOS/jQuery-maphighlight.shtml

Good luck,
Nancy O.

|
Mark as:
Currently Being Moderated

2. WilcovanderMersch,

Nov 27, 2012 8:23 AM in reply to Nancy O.

Report

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?

By the way, I don't want to use the properties you suggest in the second link. Highlighting isn't necessary, I only need to map images.

|
Mark as:
Currently Being Moderated

3. MurraySummers,

Nov 28, 2012 5:33 AM in reply to WilcovanderMersch

Report

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:

Forum guidelines

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