bg image swap on mousover

[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

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

I know you can do rollover imagmes but how would i make the bg image change that is inside a div???

Thanks for any advice

Ben

 

[BillyRayPreachersSon]

Change your DIV to be:

<div id="login" onmouseover="this.style.backgroundImage='url(../images_new/rolledOver.gif)'" onmouseout="this.style.backgroundImage='url(../images_new/login.gif)'">

You can remove the onmouseout if you do not want the image to change back when the mouse is removed.

Hope this helps,
Dan

 

[benluke4]

Hi Billy ray i just tried your code, but its not working.

This is what i have

<div id="login" onmouseover="this.style.backgroundImage='url(../images_new/loginb.gif)'" onmouseout="this.style.backgroundImage='url(../images_new/login.gif)'">
          <p class="login">W&P Assessor Login</p>
        </div>

Here's the style for the login div

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

}

Thanks again

Ben

 

[BillyRayPreachersSon]

It worked fine for me in both IE6 and FF1. What browser are you using? Can you post a URL to the page?

Dan

 

[benluke4]

IE6 and Firefox,

heres the url

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

Thanks

Ben

 

[benluke4]

its working in FF, just not in IE

 

[BillyRayPreachersSon]

It works fine in IE for me, too... But only after a short delay (hold the mouse over the image for a few seconds).

I suggest pre-loading the image to avoid this.

Hope this helps,
Dan

 

[benluke4]

OK thanks

Ben