A Simple Mouseover Hover Effect with jQuery
Javascript is pretty useful but it does demand a lot of coding. Luckily for all of us, there are libraries out there that make it extremely easy to use the power of Javascript with a lot less code. I have been having a lot of fun with jQuery latetly and wanted to share a quick and easy tutorial on how to create a mouseover hover effect.
First you need to download jQuery. Grab the Production minified version off of their site. You will also need two images. I used the two below. I named them button.png and button-hover.png.
Now we can start to create the effect.
To make it all work, we first need to add the jQuery library script between the <head> tags.
<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>
Now lets create the function that will make it all work.
<script>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","button-hover.png");
}, function() {
$(this).attr("src","button.png");
});
});
</script>
Last but not least, we need to add our image to the page.
<img src="button.png" alt="My button" class="button" />
The one thing you need to make sure is that the classname in the jQuery function (.button) matches the classname of the image tag (button).
With everything in place you should have a file that looks like this.
<!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=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='http://yoursite.com/jquery.js'></script>
<script>
$(document).ready(function(){
$(".button").hover(function() {
$(this).attr("src","button-hover.png");
}, function() {
$(this).attr("src","button.png");
});
});
</script>
</head>
<body>
<img src="button.png" alt="My button" class="button" />
</body>
</html>
Try out the effect below.
NOTE: If you are using jQuery with WordPress, you need to replace all the dollar signs ($) with the word jQuery due to other Javascript libraries that use the dollar sign.
Do you think that Java script is the right choice..? even though thank you for tip
The only reason I like using Javscript is that it is cross browser compatible, as opposed to some CSS.
Thanks for sharing this – it works great
I’m curious though, when hovering over the initial grey button image would it be possible to replace it with some plain text (no image) rather than the red button image? Any help or pointers would be greatly appreciated. Many thanks 
Hmm. I don’t know right off hand as I am still getting use to working with jQuery. But I am sure it is possible.
many many thanks ! It’s working perfectly !
This is just what I’ve been looking for. I’m code-phobic though, any idea on how to make the image into a link? Just <a href….?
Is that possible to make this work in IE6…?
Thanks!
Hmm, javascript isn’t the best way to induce a hover effect, w3schools’ latest survey revealed 5% of people still browse the web with javascript turned off!
Also, only ridiculously ancient browsers can’t render a basic css hover effect and if they are that old, they certainly won’t be able to render a jQuery
.hoverfunction!The best way to achieve the effect you want is definitely with a bit of CSS, like so:
.button a, .button a:visited {width:89px;height:97px;background:(img/button.png);display:block}.button a:visited:hover, .button a:hover, .button a:active {background:(img/button_hover.png)}
Then the (X)HTML;
<div class="button"><a href="#"></a></div>Mat.
http://www.matthewhill.name
We’ve found that using CSS is preferable, but there are cases when the client wants the page to print just like it shows on-screen without extra steps by the user. In those cases, the CSS method won’t work because the buttons are using the background property and the majority of browsers default to “not print background images”.
Maybe there is a CSS trick that I’m missing that addresses the printing issue, but I haven’t run across it.
@Jeff,
ever heard of @print css?
Very interesting post. I used CSS for hover effects. My result was compatible with all major browsers including IE6, but the loading time of the second picture was really big. I will try with this javascript. Thanks for your great post!
I wanted to use this post as an intro to show something simple. Next up is using jQuery to create a fade in and out effect.
Hey, very interesting.
what if we want to publish more than one button or image with thata effect, do we have to write a script function for every image?
Thanks.
Hey Carl,
This code wouldn’t really work with multiple images. Let me see if I can put together a tutorial for that.
Thank you sooooo much for this! I needed something that wasn’t going to give me the ugly black background issue because of the filters issue – this is perfect! You rock
I like the code, very simple. But, how can I add a setting to slow down the hover effect…it is instant right now and I’d like to see a bit more animation by slowing the transition between the 2 images?
Louise
You should use the animate code I provide in my other article Creating a Mouseover Fade Effect with jQuery
I am sorry but I can’t understand why you would use jQuery to perform a simple image replacement hover effect. You need to reference jquery and an external js file calling the effect. It makes no sense. Just do it with CSS. If a browser is not CSS compatible, do you really expect it be able to perform this effect with jQuery?
This is a basic tutorial on how to use jQuery to do something as simple as a hover effect. If you check out the next jQuery tutorial I have, Creating a Mouseover Fade Effect with jQuery, it shows how to take this to the next level and make it an animated fade effect.
Wow, wonderful effect, thank you very much!
It´s working perfectly! Thx in advance. Long time searching for this effect – easy to handle
This can be done with css but using javascript is good method too