is it possible to do this using css - bg image swap

[benluke4]

I have this div

#login {
	background-image: url(../images_new/login.gif);
	background-repeat: no-repeat;
	background-position: right top;
	height: 31px;
	width: 127px;
	float: right;
	text-align: right;
	margin-top: 0px;
	margin-right: 0px;

}

Is it possible to make the bg image change on mousover??

The reason the image is set as a background is because i have wring over it - in the div

[code
<div id="login">
<p class="login">W&P Assessor Login</p>
</div>
[/code]

If its not possible no worries - just a thought i had?

Thanks again

Ben

 

[BillyRayPreachersSon]

You'd need to use JavaScript for this... I'd ask in the JavaScript forum.

Hope this helps,
Dan

 

[Vragabond]

In cool browsers (like FF, Mozilla, Opera, Safari), you could do it with CSS. To accomodate for silly IE, you might be able to do it like this:

<style type="text/css">
#login {
    background-image: url(../images_new/login.gif);
    background-repeat: no-repeat;
    background-position: right top;
    height: 31px;
    width: 127px;
    float: right;
    text-align: right;
    margin-top: 0px;
    margin-right: 0px;
    display: block;
    cursor: default;
}

#login:hover {
   background-image: url(../images_new/loginhover.gif);
}
</style>

<a href="#" onclick="return false;" id="login">W&P Assessor Login</a>

This works for me in IE6, Mozilla and Opera7. Just add padding and styling for the font and you're set.

 

[benluke4]

Hi Vragabond,

works for me to in IE6 aswell but does this

http://www.wandptraining.co.uk/index_new.php

in FF.

When you first rollover it it dissapears then reappears. Then works fine.

And for some reason it messed with the layout and i cant work out how/why?

Cheers Ben

 

[Vragabond]

The first reappearing/disappearing is probably due to loading the new background. You could avoid that by preloading the picture in javascript or the old css method (have the first image contain both states and rather than changing the image on hover move it so that the other state is visible:

1. make picture twice as high, top is first state, bottom is hovered state
2. on regular link, top of the picture is shown, because it is set as background, the bottom is cropped
3. on hover, push the background image up showing the bottom part and cropping the top.

Messing with layout seems really strange. Are you sure it is not something else messing it up (I have my eye set on the ticker).

 

[benluke4]

"have the first image contain both states and rather than changing the image on hover move it so that the other state is visible"

Let me get this clear in my head.
Make the image twice as high by putting the hover state above the link state.

ok get that.

"on hover, push the background image up showing the bottom part and cropping the top."
Dont know how to do this?

Will i still need to preload the image?

Thanks again

Ben

re: layout - looking into it

 

[Vragabond]

See the technique explained here. Make sure you go to the part two as well which contains the core code for it:

http://www.tanfa.co.uk/css/examples/rollover-images-no-preload.asp

 

[benluke4]

Just to let you know from your suggested tutorial got it working perfectly

Thanks again

BEN