Jquery Image Rollover Simple as Pie

While working on a new site, I was looking for a way to swap images but without all the “Dreamweaver” mmRollover that seems to be just about as big as the Jquery Framework. Again as for my reference mostly but for those who are looking for a very easy way to make a simple image rollover, this is what I have for you.

$('#learnMore').hover(function() {
$(this).attr("src","images/learnMoreOver.jpg");
}, function() {
$(this).attr("src","images/learnMoreNormal.jpg");
});

So what’s going here? First, “#learnMore” is the id I’ve given to the image attribute in my page. Second, we are using the .hover function to address the image id “#learnMore.” And so, while hovering we simply are changing the “src” attribute within the image thus creating a rollover. Simple as Pie!

I’m becoming a huge fan of the Jquery! It’s making life more and more simple with so much less coding and frustrating debugging. Thanks a ton Jquery…

This entry was posted on Friday, September 11th, 2009 at 8:04 am and is filed under Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.