cbeamanHi, I am trying to have category icons that have a rollover effect , ideally a fade-in, but if I can get any sort of rollover effect, I'll be happy...
I am trying to use this How-to: http://www.category-icons.com/2008/05/how-to-make-rollovers-with-jquery/, but it doesn't seem to work for me.
My website is http://www.robotspacebrain.com
I don't know how to edit this to make it work for me:
jQuery(function($) {
$(document).ready(function(){
// Posts
$("#content h2>img").each(function () {
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.png$/gi, "_over.png");
$("<img>").attr("src", rollON);
});
$("#content h2>a").mouseover(function () {
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/_over/);
if (!matches) {
imgsrcON = imgsrc.replace(/.png$/gi, "_over.png");
$(this).children("img").attr("src", imgsrcON);
}
});
$("#content h2>a").mouseout(function () {
$(this).children("img").attr("src", imgsrc);
});
// Sidebar
$("li.cat-item>a").mouseover(function () {
imgsrc = $(this).children("img").attr("src");
matches = imgsrc.match(/_over/);
if (!matches) {
imgsrcON = imgsrc.replace(/.png$/gi, "_over.png");
$(this).children("img").attr("src", imgsrcON);
}
});
$("li.cat-item>a").mouseout(function () {
$(this).children("img").attr("src", imgsrc);
});
});
});I also put this in the functions.php:
wp_enqueue_script('jquery');
wp_enqueue_script('caticons-rollover', get_bloginfo('template_directory').
'/rollover.js');I have been trying to use firebug to see how I can do it, but with no luck, whenever I rollover, the images just disappear and never come back... I have the images in the same folder as the _over.png files as well
Any help would be greatly appreciated! I'm not too great with css/html...
