Jquery simple rollover

DescriptionjQuery snippet by - 02/10/10

In a nutshell, this script executes rollover image swaps for your hyperlinks or images.

1) The Load jQuery block goes in the head of the document
2) The jQuery Rollover block basically changes the image using a replace function. For example, the link in the example displays the image 'go_btn_off.png' until you hover the mouse then jQuery replaces the '_off' part with '_on' subsequently creating the rollover effect. So just create your 2 link images and end the names with '_off' and '_on' for the out and over states.
3) This will work for any image that has a class of "rollover"

More InformationGoto Reference Page

Tags

<!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>Untitled Document</title>

<!-- Load jQuery -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery","1.3.2");
</script>

</head>
<body>

<!-- jQuery Rollover -->
<script type="text/javascript">
jQuery(document).ready(function() {

$("img.rollover").hover(
function()
{
this.src = this.src.replace("_off","_on");
},
function()
{
this.src = this.src.replace("_on","_off");
}
);

});
</script>

<a href="http://hyperspatial.com"><img class="rollover" src="graphics/go_btn_off.png" width="60" height="21" alt="Button1" /></a>

<a href="http://hyperspatial.com"><img class="rollover" src="graphics/go_btn_off.png" width="60" height="21" alt="Button2" /></a>

</body>
</html>
  • Share
Submitted by: Adam J Nowak
http://hyperspatial.com

3 Responses to “Jquery simple rollover”

  1. Excellent works perfectly.

  2. Tanks a lot, very simple as usual with JQuery !

  3. wow, that was easy! thanks for posting this.

    tecalleja says:

Comments and Feedback