CodingForums.com - Need some help with image rollover change

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Need some help with image rollover change (http://www.codingforums.com/showthread.php?t=283520)

Need some help with image rollover change

So I'm trying to do a map, and selected regions should highlight (new image to show) on mouse rollover. Not using any js.
In the html I've got:

Code:

<a id="test1" href="#"><img id="area1" src="styling/pin.png" alt="regions"></a>

(at the moment just in <body>, no divs)

Code:

a#test1:hover{

        position: relative;

        top: 10px;

        left: 10px;

           background-image: url('styling/maptest.png');

}

on rollover, it just moves the pin.png image 10px left and up, but I want it to set the background image to maptest, and set that 10px left and up. Am I going about this all wrong?

Edit: can't use sprites I don't think - the main image will be one of Europe, and hovering on each country should highlight it.

Okay I got it showing the maptest image, but now it re-positions pin and maptest, how can I make pin disappear on hover? I tried visibility: hidden but that doesn't work.

I've put a test version up as I don't think I'm being clear. http://goo.gl/mgU9J - hovering on the pin icon should show the other image.

Try this CSS:

Code:

html{padding:0px;margin:0px;}

body{position:absolute;background-color:white;margin:0 0 0 140px;width:960px;height:auto;color:black;padding:0px;}

h1{margin:20px 0px 15px 70px;text-align:center;font:28px 'arial';color:#db0b0b;padding:0;}

p{font:16px 'arial';margin:10px 0px 10px 0px;}

#area1{position:absolute;top:30%;left:50%;margin-top:-30px;margin-left:-20px;}

#area2{position:relative;top:-120px;left:-210px;}

#map{border:solid 1px black;}

#test1{position:absolute;top:487px;left:241px;width:198px;height:198px;}

#test1:hover{background-image:url("maptest.png");}

#test1:hover #area1{display:none;}

#container{position:relative;}

I'm not sure if that's what you're going for or not, but it sounds like it to me.

Now, if you're going for a full map of Europe and you want to have the countries highlight as your mouse enters their borders I have to warn you: this really can't be done without either 1) an enormous amount of HTML/CSS or 2) some javascript.

I tried doing something similar with an aerial map of a farm/B&B and wasted quite a lot of time with image maps trying to get a working solution to highlight certain buildings or fields when their exact feature boundaries were hovered over. In the end, it was a lot of time wasted. Then again, this was pre-HTML5 and CSS3, so maybe there is a viable method these days...but I haven't seen it executed so far. I guess I'm just saying you might want to prepare yourself for the idea of resorting to at least a little javascript for this.

Quote:

Originally Posted by Rowsdower! (Post 1297131)

Try this CSS:

Code:

html{padding:0px;margin:0px;}

body{position:absolute;background-color:white;margin:0 0 0 140px;width:960px;height:auto;color:black;padding:0px;}

h1{margin:20px 0px 15px 70px;text-align:center;font:28px 'arial';color:#db0b0b;padding:0;}

p{font:16px 'arial';margin:10px 0px 10px 0px;}

#area1{position:absolute;top:30%;left:50%;margin-top:-30px;margin-left:-20px;}

#area2{position:relative;top:-120px;left:-210px;}

#map{border:solid 1px black;}

#test1{position:absolute;top:487px;left:241px;width:198px;height:198px;}

#test1:hover{background-image:url("maptest.png");}

#test1:hover #area1{display:none;}

#container{position:relative;}

That works great! Unfortunately I've since been informed there shouldn't be a rollover image, rather text. Thanks for the advice too, I was wondering if this idea sounded simple but was really quite ambitious.