I've found a lot of references to using <div> and absolute position but I've run into problems in the past with users that switch resolution or are running a higher DPI on thier system. what I have is a map of the solar system. i have placed it within an imagemap. what I would like to do is when i hover over the hotspot I can make the image change based on the hot spot. this will give the illusion that there is a Circle around the planet you are hovering over. I've tried this many different ways but have yet to succeed.

	<map id="Sol_System" name="Sol_System">
					<area coords="261, 157, 10" href="Nav_Mars.php" shape="circle" alt="Mars" Class="mars"/>
					<area coords="345, 114, 10" href="Nav_Uranus.php" shape="circle" title="Uranus" />
					<area coords="385, 191, 13" href="Nav_Neptune.php" shape="circle" title="Neptune" />
					<area coords="238, 205, 5" href="Nav_Mercury.php" shape="circle" title="Mercury" />
					<area coords="213, 225, 7" href="Nav_Venus.php" shape="circle" title="Venus" />
					<area coords="171, 195, 10" href="Nav_Earth.php" shape="circle" title="Earth" />
					<area coords="150, 135, 19" href="Nav_Jupiter" shape="circle" title="Jupiter" />
					<area coords="133, 281, 19" href="Nav_Saturn.php" shape="circle" title="Saturn" />
					<area coords="215, 188, 19" href="NavMap.php" shape="circle" title="Sun" />	
				</map>
				<img src="Images/sol/Locations/L3.gif" usemap="#Sol_System" class="style37"/>

I thought that I could use the class to reference the img but it is referencing its own class. any suggestion?

    Well, this is not a php question, you may get more mileage in a javascript forum. But here's some basic steps:

    1. Use a splitted image instead

    2. You need javascript to perform a rollover

    3. OR..You could use the css hover psuedo-class for links to change background images on each portion of the composite image.

    Photoshop, Image Ready, Fireworks, GIMP, etc are all programs that can split up an image for you.

    There are millions of examples on javascript rollovers.

    Or, as I mentioned your composite image can be a absolute positions grid of background-ed layers. The hover pseudo-class can be used to change the background url for the image version with the circle around the planet.

      7 days later

      If the areas containing the changing area can be contained within a rectangle, then you can use the clip attribute to mimic a hover affect within the map.

      You create two images, one with all of the items un-hovered, and another with them all hovered.

      Then you can use something like this:

      <html>
<head>
<title>A</title>
<style type="text/css">
img
{
position:absolute;
}
</style>
<script type="text/javascript">
function clipImage(a){
	b = a.split(',');
	document.getElementById("img2").style.display='block';
	document.getElementById("img2").style.clip = "rect("+parseInt(b[1])+"px,"+parseInt(b[2])+"px,"+parseInt(b[3])+"px,"+parseInt(b[0])+"px)";
}
function unclip() {
	document.getElementById("img2").style.display='none';
}
</script>
</head>
<body>
<map id="b" name="b">
	<area coords="43,34,136,105" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
	<area coords="100,163,220,258" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
	<area coords="296,194,409,271" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
	<area coords="370,52,486,155" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
	<area coords="248,398,379,481" href="#a1" shape="rect" onmouseover="clipImage(this.coords)" />
</map>
<img id="img1" border="0" src="a2.png" width="800" height="600" usemap="#b" style="top: 10px; left: 10px;" onmouseover="unclip()"/>
<img id="img2" border="0" src="a1.png" width="800" height="600" style=" top: 10px; left: 10px; display:none;" />
</body>
</html>

      Which should perform the desired effect.

      I have attached a working example to show you what can be achieved.

      Notice how you never see the background of the hover image, so you can actually create that image with just the hover bits and save some space.

        madwormer2: That is extremely cool. Thanks!

          I learnt it from NeoPets navigation bar when I first started out, however then I had absolutely no idea how it worked, and made a note to go back and look at it when I had more knowledge on the subject.

          Actually, now that I come to think about it, I think that they just used one image with both the hover and the non-hover on it, a clipped image map showing just the non-hover, and a div with the background set so that it showed the hover, and the same technique as before.

          Possibly the most long winded way that I have ever seen to produce a rollover effect.

            Possibly the most long winded way that I have ever seen to produce a rollover effect.

            Perhaps, but it's a lot less code then, say, a cut-up image laid out with html or css with all the silly image references. If I ever do anything like this again (which I may never do) I will definitely do it this way.

              I hadn't thought of it that way.

              I suppose the fact that I could create that in just over 5 minutes from scratch without having to mess around nearly at all in my image editing program of choice, chopping up images makes it a lot easier for the designer.

                Some other ideas may be found here, particularly the demos page - see the Image Map section in particular. Generally speaking, no JavaScript is involved.

                  8 days later

                  Hello everyone,
                  I have a question about this script:

                  Adding
                  onclick="location.href='http://google.com'"
                  inside the line
                  <area coords="43,34,136,105" href="http://google.com" shape="rect" onmouseover="clipImage(this.coords)" />

                  does not make the area hyperlinked. So what needs to be changed in order for it to support links?

                    24 days later

                    Ok, I see, I had to apply the imagemap to both images, then the areas become hyperlinked.
                    But why won't this script work in IE6, 7 or 8?
                    Could the same thing be done with CSS maybe?

                      Write a Reply...