I’m trying out some jQuery for the first time. My first goal is for one image on the page to fade into a different image. I’ve figured out how to do this with a couple of divs that have background-image set to the different image files (see code below). However, this would work better for my situation if I was somehow doing this to an existing img tag instead of using some divs. Is there any way to do what this code does, but with the img tag?
<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(function() {
$("#imgblock2").delay(3000).fadeIn(3000);
});
</script>
<style type="text/css">
#imgblock {
background-image:url("frame.jpg");
width:240;
height:320;
position:absolute;
top:0;
left:0;
}
#imgblock2 {
background-image:url("average.jpg");
width:240;
height:320;
position:absolute;
top:0;
left:0;
display:none;
}
</style>
</head>
<body>
<div id="imgblock"></div>
<div id="imgblock2"></div>
</body>
</html>
Yes, Use actual images instead of divs. you an give the images id’s as well.