cbeamanHi,
I'm trying to get jQuery working on my blog, and I am having GREAT difficulty :(
I am just trying to do a simple rollover effect, but I'm not sure if I am even calling jQuery correctly.
This is my site http://www.robotspacebrain.com
This is my header, where i call the jQuery functions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<!--[if IE]><link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" media="screen" /><![endif]-->
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript"
src="<?php bloginfo("template_url"); ?>/rollover.js"></script>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicondarkness2.ico" />
</head>
<body <?php body_class(); ?>>
<div id="wrapper">
<div id="header">
<div id="logo"><a href="<?php echo get_option('home'); ?>"><img src="/mascot7.png"></a>
<h2><?php bloginfo('description'); ?></h2>
</div>
<div id="nav">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('Top Navigation') ) : ?>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<?php endif; ?>
</div>
</div>
<div id="blurb">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('Blurb') ) : ?>
Use your widget sidebars in the admin Design tab to change this little blurb here. Add the text widget to the Blurb Sidebar!
<?php endif; ?>
</div>And this is my rollover.js code:
var $j = jQuery.noConflict();
$j(document).ready(function() {
// Preload all rollovers
$j("#nav img").each(function() {
// Set the original src
rollsrc = $j(this).attr("src");
rollON = rollsrc.replace(/.png$j/ig,"_over.png");
$j("<img>").attr("src", rollON);
});
// Navigation rollovers
$j("#nav a").mouseover(function(){
imgsrc = $j(this).children("img").attr("src");
matches = imgsrc.match(/_over/);
// don't do the rollover if state is already ON
if (!matches) {
imgsrcON = imgsrc.replace(/.png$j/ig,"_over.png"); // strip off extension
$j(this).children("img").attr("src", imgsrcON);
}
});
$j("#nav a").mouseout(function(){
$j(this).children("img").attr("src", imgsrc);
});
});Now, as you can see on my site, when I rollover the images, they just disappear and never come back... not quite what I had in mind. I know my images are named correctly and they are in the same folder as the rollover.js
They are
ricon160.png
ricon160_over.png
sicon160.png
sicon160_over.png
bicon160.png
bicon160_over.png
ANY help would be greatly appreciated. I've spent about a week trying to get something to happen with NO luck...
Cheers,
Charles
