sany101
asked on
CSS & Jquery script to fade in images and rollover fades Not working in IE
Hi,
Having real problems trying to display this test page properly in IE 8,7,&6 and can't figure out why?
Really could use some help tracking this down as it works perfectly in all other browsers I've tested (Safari Opera Chrome Firefox)
thanks
Having real problems trying to display this test page properly in IE 8,7,&6 and can't figure out why?
Really could use some help tracking this down as it works perfectly in all other browsers I've tested (Safari Opera Chrome Firefox)
thanks
ASKER
Well I guess I'm missing something because this example which is which is what I was using in my test works perfectly all the way back to I.E 6?
Your right:
this works though in ie8:(have taken the heights out of the image definitions)
this works though in ie8:(have taken the heights out of the image definitions)
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
html,body {
position:absolute;
}
#galleryHolder {
width:354px;
}
/* Hover Fade Styling */
div.fadeHoverGallery {
margin:10px;
position: relative;
width: 334px;
height: 176px;
}
img.a {
display:block;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
display:block;
position: absolute;
left: 0;
top: 0;
}
</style>
<!-- scripts -->
<!-- On Load Fade -->
<!-- Roll Over Fade -->
<script type='text/javascript'>
$(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
</head>
<body>
<div id="galleryHolder">
<div class="gallery"><div class="fadeHoverGallery"> <a href="#"><img src="http://sany.co.uk/images/image_a.jpg" class="a" alt=""/><img src="http://sany.co.uk/images/image_b.jpg" class="b" alt=""/></a><!-- end fadeHoverGallery --></div>
<div class="fadeHoverGallery"> <a href="#"><img src="http://sany.co.uk/images/image_a.jpg" class="a" alt=""/><img src="http://sany.co.uk/images/image_b.jpg" class="b" alt=""/></a><!-- end fadeHoverGallery --></div>
<!-- end gallery --></div>
<!-- end galleryHolder --></div>
</body>
</html>
Works fine in ie6 too
Darren
Darren
ASKER
Thanks Darren, however I still need the images to fade on load which you've removed:
<script type="text/javascript">
$(function(){
$(".gallery").preloader();
});
I've used this preloader instead, it works with ie:
http://flesler.blogspot.com/2008/01/jquerypreload.html
http://flesler.blogspot.com/2008/01/jquerypreload.html
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
html,body {
position:absolute;
}
#galleryHolder {
width:354px;
}
/* Hover Fade Styling */
div.fadeHoverGallery {
margin:10px;
position: relative;
width: 334px;
height: 176px;
}
img.a {
display:block;
position: absolute;
left: 0;
top: 0;
z-index: 10;
}
img.b {
display:block;
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript" src="preload.js"></script>
<script type='text/javascript'>
$(function(){
$.preload(".gallery");
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});
</script>
</head>
<body>
<div id="galleryHolder">
<div class="gallery"><div class="fadeHoverGallery"> <a href="#"><img src="http://sany.co.uk/images/image_a.jpg" class="a" alt=""/><img src="http://sany.co.uk/images/image_b.jpg" class="b" alt=""/></a><!-- end fadeHoverGallery --></div>
<div class="fadeHoverGallery"> <a href="#"><img src="http://sany.co.uk/images/image_a.jpg" class="a" alt=""/><img src="http://sany.co.uk/images/image_b.jpg" class="b" alt=""/></a><!-- end fadeHoverGallery --></div>
<!-- end gallery --></div>
<!-- end galleryHolder --></div>
</body>
</html>
ASKER
Again thanks Darren but I think you've miss understood what I was using the original pre-load script for. It was to fade the images.
check out the original test page in firefox to see what I mean.
Thanks
check out the original test page in firefox to see what I mean.
Thanks
Hi,
Where have you got the preloader method from? Its obviously conflicting with the animate effect, perhaps you could look at others that don't conflict?
Busy now but will take a look later.
D
Where have you got the preloader method from? Its obviously conflicting with the animate effect, perhaps you could look at others that don't conflict?
Busy now but will take a look later.
D
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Perfect thanks
http://www.w3schools.com/css/css_image_transparency.asp
ie: filter:alpha(opacity=x).