I am trying to use a jquery slider plugin, but every time I add the script to the html, the preloading effects in my navigation get disabled. Specifically, I have a swap image on load and a mouseover on load. Both do not work when I add the jquery code. It doesn't even seem to matter what jquery plugin I use. I have tried several and all create the same problem with my onload/mouseover effects. Does anyone have any idea why this is happening? Below is my html code. THANKS!
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="lib/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript">
/**
* We use the initCallback callback
* to assign functionality to the controls
*/
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function() {
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
jQuery('#mycarousel-next').bind('click', function() {
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function() {
carousel.prev();
return false;
});
};
// Ride the carousel...
jQuery(document).ready(function() {
jQuery("#mycarousel").jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
<style type="text/css">
<!--
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
color: #DC5A2D;
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>
<body onload="MM_preloadImages('workOver.jpg','contactOver.jpg','aboutOver.jpg')">
<script type="text/javascript" src="wz_tooltip.js"></script>
<script type="text/javascript" src="tip_balloon.js"></script>
<div class="box">
<div class="sidebar">
<div class="logo"><a href="index.html"><img src="logo.jpg" width="163" height="117" border="0" /></a></div>
<div class="nav"><a href="personal-type-work.html"><img src="work.jpg" width="71" height="34" border="0" id="Image1" onload="MM_swapImage('Image1','','workOver.jpg',1)" /></a><a href="about.html"><img src="about.jpg" width="60" height="34" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','aboutOver.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="contact.html"><img src="contact.jpg" width="69" height="34" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','contactOver.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
<div class="list">
<ul>
<li>
<a href="personal-type-work.html">Personal Type Work</a><br />
<a href="dream-fly.html">Dream / Fly, book cover</a><br />
<a href="silent-dance.html">Silent Dance, book cover</a><br />
</li>
<li>
<a href="multicultural-affairs.html">Multicultural Affairs</a><br />
<a href="student-activities.html">Student Activities</a><br />
<a href="luda.html">LUDA</a><br />
</li>
</ul>
</div>
<div class="line"><img src="line.png"/></div>
<div class="divider"><img src="divider.png" width="39" height="472" border="0" /></div>
<p> </p>
</div>
<div class="images">
<a onmouseover="Tip('Project information.')" onmouseout="UnTip()">
<p><img src="holidaycards/holiday1.jpg" width="700" height="467" vspace="6" border="0" /><img src="holidaycards/holiday2.jpg" width="700" height="467" vspace="6" border="0" /><img src="holidaycards/holiday3.jpg" width="700" height="467" vspace="6" border="0" /></p>
</div>
<p> </p>
<p> </p>
</div>
</body>
</html>