Skip navigation
Currently Being Moderated

Help with Images Maps,

Jun 14, 2013 5:20 PM



I have an HTML page where an IMG is loaded:


<img src="images/renders/Main_Image.jpeg" alt="Main Image" name="Main_IMG" width="800" height="600" border="0" usemap="#Main_MAP" id="Main_IMG" />



Then I have 4 images maps laid on top of the image:


<map name="Main_MAP" id="Main_MAP">

  <area shape="poly" coords="--some numbers--" href="Area1.html" target="_parent" alt="Area1 Button" />

  <area shape="poly" coords="--some numbers--" href="Area2.html" target="_parent" alt="Area2 Button"  />

  <area shape="poly" coords="--some numbers--" href="Area3.html" target="_parent" alt="Area3 Button" />

  <area shape="poly" coords="--some numbers" href="Area4.html" target="_parent" alt="Area4 Button"/>



See Example:

Image Map Help.jpg



Each area is essentially an invisible button. I want to make it so when the mouse hovers over the areas, I want the background image to display something different. On mouse out of the area, I want the image to go back. When the user clicks the Area, the user is moved to another part of the site.


Area 1 should change Main_Image.jpeg to Main_Image1.jpeg

Area 2 should change Main_Image.jpeg to Main_Image2.jpeg



I thought I could do this with Images Maps, but I can't figure out how. Is there an easier way? I have Dreamweaver CS4.


Thank you in advance!

  • Currently Being Moderated
    Jun 14, 2013 7:31 PM   in reply to sclouston

    Not possible with a single image and mapping.

    If you "slice" the image and place the slices in individual DIVs, then you can either add a javascript mouseover or use the slices as background images and add a CSS "hover" effect to change the background image on mouseover.

    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