on hover background image - i am using the following code to show a background image when the mouse moves on a div <div class="logobg">

sudhakararaog

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

<div class="logobg">
</div><!-- logobg ends -->

.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">
<!--[if IE 6 ]>
<div id="logo">
<img src="assets/img/logo.jpg" id="logoie" onmouseover="over()" onmouseout="out()">
</div>
<![endif]-->
</div><!-- logobg ends -->

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

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

also tried using

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

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

the image is not changing in ie6

please advice thanks

Frinkky

ie6 only acknowledges the :hover pseudo class on <a> tags. You could replace the div with an a tag, and style in css to behave like a div (display: block, margin, padding, width, height etc etc).

__________________
Jon Warner
Web Pro Cafe :: The PixelForge :: Follow my Twits (or something) :: LinkedIn

sudhakararaog

thanks for replying i have tried the following

<div class="logobg">
<!--[if IE 6 ]>
<a class="logoie6">
<div id="logo">
<img src="assets/img/logo.jpg">
</div>
</a>
<![endif]-->

</div><!-- logobg ends -->


#logo{
float: left;
width: 736px;
height: 384px;
background: url(../assets/img/logo.jpg) no-repeat 0px 0px;
}
a.logoie6{
display:block;
width: 736px;
height: 384px;
}
a.logoie6:hover div {
background: url(../assets/img/logorollover.jpg) no-repeat 0px 0px;
}

the image does not appear on hover

can this be done using javascript on mouseover and onmouseout as i mentioned in the earlier post

thanks

Frinkky

There's a bunch of stuff regarding whatever:hover here: Whatever:hover

I'd read it myself, but I have a headache after trying to ;) you'll see what I mean.

__________________
Jon Warner
Web Pro Cafe :: The PixelForge :: Follow my Twits (or something) :: LinkedIn

kozata-xakep

I would advice you to use 'h1' for your logo and 'a'. SEO friendly and no problems.

Since your logo isn't PNG you can even do it with a sprite to reduce the HTTP Requests.