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.