Need some help with image rollover change

backa · 12-04-2012, 10:27 AM

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.

backa · 12-04-2012, 01:39 PM

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.

Rowsdower! · 12-04-2012, 02:43 PM

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.

backa · 12-05-2012, 06:08 AM

Quote:

Originally Posted by Rowsdower!

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.

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.