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

    Help with Images Maps,

    sclouston

      Hi,

       

      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"/>

      </map>

       

      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

      etc.

       

      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 Community Member

          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

            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.

             

            S