on hover background image

sudhakararaog · Joined: 19 Sep 2007 Posts: 119

i am using the following code to show a background image when the mouse moves on a div

<div class="logobg">
</div>

.logobg{
float: left;
width: 736px;
height: 384px;
background: url(logo.jpg) no-repeat 0px 0px;
}

.logobg:hover{
float: left;
width: 736px;
height: 384px;
background: url(logorollover.jpg) no-repeat 0px 0px;
}

this is working fine in all browsers except for ie6 in ie 6 when i move the mouse over the logogb div the logorollover.jpg does not appear

i have tried the following

<div class="logobg">

</div>

function over(){
document.getElementById("logoie").src="logorollover.jpg";
}

function out(){
document.getElementById("logoie").src="logo.jpg";
}

also tried using

function over(){
var imgsrc=document.getElementById("logoie").getAttribute("src");
document.getElementById("logoie").setAttribute("src",
"logorollover.jpg");
}

function out(){
var imgsrc=document.getElementById("logoie").getAttribute("src");
document.getElementById("logoie").setAttribute("src", "logo.jpg");
}

the image is not changing in ie6

please advice thanks

leahmarie · Joined: 31 Jul 2009 Posts: 60

IE 6 is one pain in my butt, when I develop a website, I usually have to check in IE 6 if it looks good on it. I suggest you create a simpler type of your website fitted on IE 6. Where is your visitor's the highest? Focus on those visitors because they are the one's you want to look good with.