2 Replies Latest reply on Jun 15, 2013 6:31 AM by sclouston

    Help with Images Maps,




      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!

        • 1. Re: Help with Images Maps,
          Mike M Level 6

          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.

          • 2. Re: Help with Images Maps,
            sclouston Level 1

            Hey CF. Thank you very much for the reply! I thought I was losing my mind trying to figure out a way.


            I'll try out the slice and dice approach... where's a turtle when you need one.


            Cheers Dude.