Multiple image rollover

Expand Post »

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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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>

Similar Threads

help with image rollover in JavaScript / DHTML / AJAX
display multiple image in php in PHP
multiple image uploding into sqlserver db sigle time like flickr or new orkut in ASP.NET
image rollover script explanation help in JavaScript / DHTML / AJAX
How to store multiple image paths in MySQL in MySQL

george61

Reputation Points: 10

Solved Threads: 6

Junior Poster in Training

Offline

59 posts
since Jul 2010

Permalink

Aug 28th, 2010

Re: Multiple image rollover

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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>

hielo

Reputation Points: 116

Solved Threads: 243

Veteran Poster

Offline

1,123 posts
since Dec 2007

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: javascript cursor placement

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: how to write this kind of xpath exprssion?

DaniWeb Message

Cancel Changes

User Name
Password