wysiwyg logo Easy Mouseover Effect on image with jQuery

This example is simple to implement on one image 
<script type='text/javascript' src='js/jquery.js'> </script>
<script  type='text/javascript'>
$(document).ready(function(){
	$("#theimage").hover(function() {
		$(this).attr("src","poster2.jpg");
			}, function() {
		$(this).attr("src","poster1.jpg");
	});
});
</script'>


This one can bee easy to implement over set of images. the change of the img src will be on the file name "-over" will be replaced by ""
poster.jpg and poster-over.jpg 
<script  type='text/javascript'>
$(function() {
    $("#theimage1")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-over.jpg";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-over", "");
            $(this).attr("src", src);
        });
});
</script'>




xnet 1998 - 2011