I have a few images and their rollover images. Using jQuery, I want to show/hide the rollover image when the onmousemove/onmouseout event happen. All my image names follow t
I've made something like the following code :)
It works only, when you have a second file named with _hover, for example, facebook.png
and facebook_hover.png
$('#social').find('a').hover(function() {
var target = $(this).find('img').attr('src');
//console.log(target);
var newTarg = target.replace('.png', '_hover.png');
$(this).find('img').attr("src", newTarg);
}, function() {
var target = $(this).find('img').attr('src');
var newTarg = target.replace('_hover.png', '.png');
$(this).find('img').attr("src", newTarg);
});
A generic solution that doesn't limit you to "this image" and "that image" only may be to add the 'onmouseover' and 'onmouseout' tags to the HTML code itself.
HTML
<img src="img1.jpg" onmouseover="swap('img2.jpg')" onmouseout="swap('img1.jpg')" />
JavaScript
function swap(newImg){
this.src = newImg;
}
Depending on your setup, maybe something like this would work better (and requires less HTML modification).
HTML
<img src="img1.jpg" id="ref1" />
<img src="img3.jpg" id="ref2" />
<img src="img5.jpg" id="ref3" />
JavaScript / jQuery
// Declare Arrays
imgList = new Array();
imgList["ref1"] = new Array();
imgList["ref2"] = new Array();
imgList["ref3"] = new Array();
//Set values for each mouse state
imgList["ref1"]["out"] = "img1.jpg";
imgList["ref1"]["over"] = "img2.jpg";
imgList["ref2"]["out"] = "img3.jpg";
imgList["ref2"]["over"] = "img4.jpg";
imgList["ref3"]["out"] = "img5.jpg";
imgList["ref3"]["over"] = "img6.jpg";
//Add the swapping functions
$("img").mouseover(function(){
$(this).attr("src", imgList[ $(this).attr("id") ]["over"]);
}
$("img").mouseout(function(){
$(this).attr("src", imgList[ $(this).attr("id") ]["out"]);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery</title>
<script src="jquery.js" type="text/javascript"> </script>
<style type="text/css">
#box{
width: 68px;
height: 27px;
background: url(images/home1.gif);
cursor: pointer;
}
</style>
<script type="text/javascript">
$(function(){
$('#box').hover( function(){
$('#box').css('background', 'url(images/home2.gif)');
});
$('#box').mouseout( function(){
$('#box').css('background', 'url(images/home1.gif)');
});
});
</script>
</head>
<body>
<div id="box" onclick="location.href='index.php';"></div>
</body>
</html>
I know you're asking about using jQuery, but you can achieve the same effect in browsers that have JavaScript turned off using CSS:
#element {
width: 100px; /* width of image */
height: 200px; /* height of image */
background-image: url(/path/to/image.jpg);
}
#element:hover {
background-image: url(/path/to/other_image.jpg);
}
There's a longer description here
Even better, however, is to use sprites: simple-css-image-rollover
To set up on ready:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src").replace("over.gif", ".gif");
$(this).attr("src", src);
});
});
For those that use url image sources:
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src");
var regex = /_normal.svg/gi;
src = this.src.replace(regex,'_rollover.svg');
$(this).attr("src", src);
})
.mouseout(function() {
var src = $(this).attr("src");
var regex = /_rollover.svg/gi;
src = this.src.replace(regex,'_normal.svg');
$(this).attr("src", src);
});
});
Adapted from Richard Ayotte's code - To target an img in a ul/li list (found via wrapper div class here), something like this:
$('div.navlist li').bind('mouseenter mouseleave', function() {
$(this).find('img').attr({ src: $(this).find('img').attr('data-alt-src'),
'data-alt-src':$(this).find('img').attr('src') }
);