<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("img.rollover").mouseover(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2")); }) .mouseout(function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2")); }) .each(function(){ $("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); }); }); </script> <style type="text/css"> li{ display:inline; list-style-type:none; } img{ border:none; } </style> </head> <body> <ul> <li><a href="#"><img src="image_rollover/jquery.jpg" alt="jQuery" class="rollover" /></a></li><!-- --><li><a href="#"><img src="image_rollover/javascript.jpg" alt="javascript" class="rollover" /></a></li><!-- --><li><a href="#"><img src="image_rollover/css.jpg" alt="CSS" class="rollover" /></a></li><!-- --><li><a href="#"><img src="image_rollover/html.jpg" alt="HTML" class="rollover" /></a></li> </ul> </body> </html>