How To Make A Rollover Image Map?

Hi,

I've created a simple imagemap (code below) but I would also like to make this imagemap a rollover image. Anyone got any ideas how to do this?

Thanks for any help

 

First: You need to make your overlay image with the text that you want to be hovered. .
Second: You need to make rollover image.
Third: Host all of your images either in Photobucket or ImageShack.
Fourth:Open your overlay image in Miscrosoft Paint. Use the Select Tool to make a rectangle around the text on the image that you want to be hovered. . The first two numbers are your positioning numbers, the second two numbers are your size numbers (The numbers in the image are just an example). You will need both of them when you code your rollovers.
Fifth:You now need to add CSS to make your overlay image appear. Get the overlay image url that you hosted earlier and replace the URLHERE in the header style codes. You will also need to adjust the NUMBER property to fit the image's size. Leave all other CSS as is to prevent the code from not fuctioning properly.

.header{
background:url(URLHERE) top left no-repeat;
display:block;width:NUMBERpx;height:NUMBERpx;
position:absolute;left:0px;top:0px;
z-index:0;
}

Sixth:After you have your overlay image up, you now need to create the rollover images. You will need however many rollover images to correspond with your links. Look back at the working preview to understand. Each rollover class will have it's own positioning and background image. Get the rollover image url that you hosted earlier and replace the URLHERE in the rollover style codes. You will also need to adjust the NUMBER property to fit the image's size. Leave all other CSS as is to prevent the code from not fuctioning properly. You also do not need to copy and paste the script that ImageReady gives for image mapping if you are using this tutorial. You will however have to make multiple CSS names for each rollover you create. This involves a lot image hosting and positioning (Just as a warning). If you are an impatient individual, you will more than likely not want to use this tutorial. Read further if you are using this tutorial.
a.NAMEHERE{
position:absolute;top:NUMBERpx;left:NUMBERpx;
display:block;overflow:hidden;
width:NUMBERpx;height:NUMBERpx;
background-color:transparent;
z-index:4;
visibility:visible;display:inline;
}
a.NAMEHERE:hover{
background:url(URLHERE) top left no-repeat;
z-index:4;
visibility:visible;display:inline;
}

Seventh:After the CSS is installed, you now need to imput the actual HTML tags. (You can either place this in your I'd Like To Meet or About Me section in your editing page.)


^You will need to add and change the CSS rollover HTML tags by how many you create.
The tutorial is over.
^It is mainly just a link with a background image that is placed over the overlay image when you hover over a desired place.

 

Thanks for the help, but I'm just wondering isn't there another simpler way to do it using the code I already have?

I was reading about using the onMouseOver command, is it not possible to add this to my code somehow?


Thanks again, would appreciate any more help.

 

see here, mouseover image....

dynamicdrive.com/dynamicindex15/index.html

 

Thanks there is rollover stuff there but nothing about rollover imagemaps

Anyone else know how to do it?

 

try web page maker, coffee cup html editors that will generate codes for you.

 

Something like this? Inline Javascript example here just throws up an alert box. Replace it with whatever JavaScript you need.

<map name="gemmaatkinson" id="gemmaatkinson">
  <area shape="rect" coords="76,479,120,515"  alt="Vote Yes" href="url"
        onmouseover="alert('I will vote YES')" />
  <area shape="rect" coords="229,480,275,516"  alt="Vote No" href="url"
        onmouseover="alert('I will vote NO')" />
</map>
<div>
  <img border="0" usemap="#gemmaatkinson" alt="gemma atkinson vote"
       width="300" src="gemma-atkinson.jpg" height="700" />
</div>

Code (markup):

 

Thanks FilmFiddler, thats excellent, but any idea how I display a new image instead of the alert box?


Thanks again

 

Sorry to bump this up again, but does anyone know how to do the above but instead of showing an alert box it changes the image instead?

Thanks for any help