Member Avatar for george61

Hi all. I've tried to make a simple hover effect about small images but it won't work.
I also tried to make the following script: 2 seconds after page loading image1 changes 2 seconds after that image1 returns to back state and image2 changes and etc. Can someone help? Best regards.

<html>
<head>
<style type="text/css">
#as:hover{
background-image: url(images/numr.png);
}
#ad:hover{
background-image: url(images/numr.png);
}
#af:hover{
background-image: url(images/numr.png);
}
</style>
</head>
<body>
<input type="image" src="images/num1.png" id="as">
<input type="image" src="images/num2.png" id="ad">
<input type="image" src="images/num3.png" id="af">
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 175 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by hielo
Member Avatar for hielo

That ":hover" will likely not be recognized by IE 6. There are a lot of users still using that browser. Try the following instead:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script>
//cache the images first 
var imgs=[];
imgs[imgs.length]=new Image();
imgs[imgs.length-1].src='images/numr.png';

imgs[imgs.length]=new Image();
imgs[imgs.length-1].src='images/num1.png';

imgs[imgs.length]=new Image();
imgs[imgs.length-1].src='images/num2.png';

imgs[imgs.length]=new Image();
imgs[imgs.length-1].src='images/num3.png';

$(document).ready(function(){
 		$('.imageButton').hover( hoverIn, hoverOut);
});

function hoverIn(){ 
	$(this).attr('prevImage',$(this).attr('src')).attr('src','images/numr.png');
}
function hoverOut(){ 
	$(this).attr('src', $(this).attr('prevImage') ).attr('prevImage','');
}
</script>
</head>
<body>
<input type="image" class="imageButton" src="images/num1.png" id="as">
<input type="image" class="imageButton" src="images/num2.png" id="ad">
<input type="image" class="imageButton" src="images/num3.png" id="af">
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.