Trying to get jQuery working…

  • Hi,

    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 https://www.robotspacebrain.com

    This is my header, where i call the jQuery functions:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="https://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() ) { ?> &raquo; 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

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Trying to get jQuery working…’ is closed to new replies.