image mapping

multiple actions on a mouseover a map

Page 1 of 1

2 Replies - 852 Views - Last Post: 10 February 2009 - 04:05 PM

#1 yvesbodson  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 07-February 09

image mapping

Posted 10 February 2009 - 09:17 AM

I am working on a photography web site and the project involves a photo that is used as an image map with around 50 areas.
What the design require is that when the mouse over an area, a preview pop up below and if the user select that collection of photos then he can click on the area and another page opens with a flash gallery.
Where I have a problem is to have a frame overlaying the image map in a free area, no hiding of the sensitives areas, and onmouseover having a preview of the collection showing in that space. The preview is one single photo. But it has to trigger at the time of the mouseover. When moving over the areas, the user can see a preview of what is in the collections.
I tried to use the div tags but I don't seem to be able to identify the space where I want the preview to show up and then how to manage the click to get the collection coming? I did browse the W3 for directives of the div and style but I must be missing everything here.
Some direction would be great
BTW I use DreamWeaver CS3

Is This A Good Question/Topic? 0
  • +

Replies To: image mapping

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: image mapping

Posted 10 February 2009 - 10:21 AM

If you could post the code you have so far it would make helping you a lot easier :)

So basically, when the user rolls over a hotspot, a preview appears in an area underneath the image? There are two ways to do this.

Option 1
Create a div underneath your image, and set its CSS positioning value to relative. Inside that div create a div for each required preview, and set each one to position:absolute and display:none. What you now have is a load of invisible preview areas sat on top of each other. Now you use javascript to first loop through every element in the holding div setting the display to none, then you set the display of the preview area you want to block, which will make it visible.

Option 2
Again, you create a div underneath your image. This time though you store the html code for each preview area in a javascript array, and when the user rolls over an area you update the contents of your empty div with an array index. For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
 var previews = new Array("This is preview 1","This is preview 2");
 function updatePreview(k) {
	document.getElementById("previewArea").innerHTML = previews[k]; 
 function clearPreview() {
	 document.getElementById("previewArea").innerHTML = "";

<a href="" onmouseover="updatePreview(0);" onmouseout="clearPreview()">1</a> <a href="" onmouseover="updatePreview(1);" onmouseout="clearPreview()">2</a>
<div id="previewArea">&nbsp;</div>

As you may have guessed, I favour the second technique. ;)
Was This Post Helpful? 0
  • +
  • -

#3 Glorfindal  Icon User is offline

  • Java Enthusiast
  • member icon

Reputation: 35
  • View blog
  • Posts: 589
  • Joined: 31-December 08

Re: image mapping

Posted 10 February 2009 - 04:05 PM

Here's a link to a site that should explain it I recommend adding some Javascript to make it better.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1