Posted By

bcalloway on 08/28/08

Tagged

Versions (?)

Last Edited at 08/28/08 12:05pm

Statistics

Viewed 789 times

Favorited by 6 user(s)

Related snippets

jQuery rollovers

/ Published in: JavaScript

jQuery script for navigation image rollovers

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

$(document).ready(function() {
		// Preload all rollovers
		$("#tabs img").each(function() {
			// Set the original src
			rollsrc = $(this).attr("src");
			rollON = rollsrc.replace(/.jpg$/ig,"2.jpg");
			$("<img>").attr("src", rollON);
		});
 
		// Navigation rollovers
		$("#tabs a").mouseover(function(){
			imgsrc = $(this).children("img").attr("src");
			matches = imgsrc.match(/2/);
 
			// don't do the rollover if state is already ON
			if (!matches) {
			imgsrcON = imgsrc.replace(/.jpg$/ig,"2.jpg"); // strip off extension
			$(this).children("img").attr("src", imgsrcON);
			}
 
		});
		$("#tabs a").mouseout(function(){
			$(this).children("img").attr("src", imgsrc);
		});
});