Image change on mouseover with jQuery..
- by playahabana
Hi, I am a comlete beginner to pretty much all things web design and am trying to construct my first website. I am attempting to hand code it without the ue of a CMS in order to learn as much as possible as quickly as possible.
I am trying to make an imge change on mouseover for my top nav menu, and have the following jQuery functions:
$(document).ready(function(){
$(".navlist img").each(function) {
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.jpg$/ig,"_link.png");
$("<img>").attr("src",rollON);
$(".navlist a").mouseover(function(){
});
imgsrc= $(this).children("img").attr("src");
matches = imgsrc.match(/_link.png);
if (!matches) {
imgsrcON = imgsrc.replace(/.jpg$/ig,"_link.png");
$(this).children("img").attr("src", imagesrcON);
}
$(".navlist a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);
});
});
my html is as follows:
<div id="nav">
<ul class="navmenu">
<li><a href="index.html"><img class="swap" src="images/links/home.jpg" alt="Home" border="none"></a></li>
<li><a href="#"><img class="swap" src="images/links/ourbar.jpg" alt="Our Bar" border="none"></a>
<ul class="navdrop">
<li ><a href="#"><img class="swap" src="images/links/cockteles.jpg" alt="Our Cocktails" border="none"></a></li>
<li ><a href="#"><img class="swap" src="images/links/celebrate.jpg" alt="Celebrate in Style" border="none"></a></li>
</ul>
</li>
<li><a href="#"><img class="swap" src="images/links/ourcigars.jpg" alt="Our Cigars" border="none"></a>
<ul class="navdrop">
<li><a href="#"><img class="swap" src="images/links/edicionlimitadas.jpg" alt="Edition Limitadas" border="none"></a></li>
<li><a href="our_cigars.html"><img class="swap" src="images/links/cigartasting.jpg" alt="Cigar Tastings" border="none"></a></li>
</ul>
</li>
<li><a href="#"><img class="swap" src="images/links/personalcigar.jpg" alt="Personal Cigar Roller" border="none"></a></li>
<li><a href="our_cigars.html"><img class="swap" src="images/links/photogallery.jpg" alt="Photo Gallery" border="none"></a></li>
<li><a href="#"><img class="swap" src="images/links/contactus.jpg" alt="Contact Us" border="none"></a></li>
</ul></div></div><!--end banner-->
the image src for the alt image is in the form eg."images/links/home_link.png" and is the same for every image. I have checked this and checked this, could some body please give me a pointer as to where I am going wrong? Or a pointer to a tutorial for this effect? I have looked at a few and this seems to be the best for what I am attempting, but as I said I don't really know what I'm doing so any advice gratefully received.....
