Cool.. works nicely. The only downside is that I had 9 "panels" or categories that each had their own set of links and rollover images. And now the code would not be resusable.
Weird how functions will not recognize a variable set in another function, is there really no way around it? Oh I bet I would have to set up functions that past arguments? Could I somehow pass the orgSrc value to the 2nd function? //method $(".swapImages").hover(function(){ var orgSRC = $("#imgLinkAct").attr("src"); var newSRC = $(this).attr("rel"); $("#imgLinkAct").attr("src",newSRC); },function(orgSrc){ $("#imgLinkAct").attr("src",orgSRC); }) On Sep 26, 12:10 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote: > Hi, > > You're getting close. I think it'll work if you put the "var orgSRC" > line above the .hover() method. That way, on mouseout you're always > returning the src attribute to the same value: > > var orgSRC = $("#imgLinkAct").attr("src"); > //method > $(".swapImages").hover(function(){ > var newSRC = $(this).attr("rel"); > $("#imgLinkAct").attr("src",newSRC); > },function(){ > $("#imgLinkAct").attr("src",orgSRC); > }); > > -- Karl > > On Sep 26, 2007, at 11:28 AM, Danjojo wrote: > > > > > > > Sorry.. I can't go back and edit my own messages on google groups... > > > I understand now. > > > If only want mouseover behaviour then use it. > > > If I want more mouseover and mouseout use hover. > > > Although in trying to proserve the #id's original source value I > > cannot get it to work > > > //method > > $(".swapImages").hover(function(){ > > var orgSRC = $("#imgLinkAct").attr("src"); > > var newSRC = $(this).attr("rel"); > > $("#imgLinkAct").attr("src",newSRC); > > },function(){ > > $("#imgLinkAct").attr("src",orgSRC); > > }) > > > but if I hard code it which I dont want to do, I have a working demo. > > //method > > $(".swapImages").hover(function(){ > > //var orgSRC = $("#imgLinkAct").attr("src"); > > var newSRC = $(this).attr("rel"); > > $("#imgLinkAct").attr("src",newSRC); > > },function(){ > > $("#imgLinkAct").attr("src","images/NCQ8_swap.jpg"); > > }) > > > On Sep 26, 11:15 am, Danjojo <[EMAIL PROTECTED]> wrote: > >> So I should be using onMouseOver instead of onHover? > > >> Thank you. > > >> On Sep 26, 11:06 am, Danjojo <[EMAIL PROTECTED]> wrote: > > >>> What I am trying now should work shouldn't it? > > >>> $(".swapImages").hover(function(){ > >>> var newSRC = $(this).attr("rel"); > >>> $("#imgLinkAct").attr("src",newSRC); > >>> } > > >>> <p class="centered" style="height: 80px;"> > >>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" > >>> width="97" > >>> height="75"/> > >>> </p> > >>> <p style="margin-left: 2%;"> > >>> <a href="linear_actuators.html" rel="images/ > >>> cylinder.jpg" > >>> class="swapImages">Linear Actuators</a><br/> > >>> <a href="#" rel="images/mgp_swap.jpg" > >>> class="swapImages">Guided > >>> Actuators</a><br/> > >>> <a href="#" rel="images/mhc_swap.jpg" > >>> class="swapImages">Grippers > >>> & Escapements</a><br/> > >>> <a href="#" rel="images/shock_swap.jpg" > >>> class="swapImages">Actuator > >>> Accessories</a><br/> > >>> <a href="#" rel="images/emy2_swap.jpg" > >>> class="swapImages">Electric > >>> Actuators</a><br/> > >>> <a href="#" rel="images/ncy2_swap.jpg" > >>> class="swapImages">Rodless > >>> Actuators</a><br/> > >>> <a href="#" rel="images/crq_swap.jpg" > >>> class="swapImages">Rotary > >>> Actuators</a><br/> > >>> <a href="#" rel="images/clean_room_swap.jpg" > >>> class="swapImages">Specialty Actuators</a><br/> > >>> </p> > > >>> On Sep 26, 10:24 am, Danjojo <[EMAIL PROTECTED]> wrote: > > >>>> I think I am starting to get lost... > > >>>> The links are supposed to be triggering the jQuery function... > > >>>> what class or id do they use? > > >>>> <div class="MenuContent" style="background: #FFF; height: 210px;"> > >>>> <p class="centered" style="height: 80px;"> > > >>>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" width="97" > >>>> height="75"/> > > >>>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" > >>>> rel="images/ > >>>> cylinder.jpg" class="swapImages"/> > >>>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" > >>>> rel="images/ > >>>> mgp_swap.jpg" class="swapImages"/> > >>>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" > >>>> rel="images/ > >>>> mhc_swap.jpg" class="swapImages"/> > >>>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" > >>>> rel="images/ > >>>> shock_swap.jpg" class="swapImages"/> > >>>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" > >>>> rel="images/ > >>>> emy2_swap.jpg" class="swapImages"/> > >>>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" > >>>> rel="images/ > >>>> ncy2_swap.jpg" class="swapImages"/> > >>>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" > >>>> rel="images/ > >>>> crq_swap.jpg" class="swapImages"/> > >>>> <img id="imgLinkAct" src="images/NCQ8_swap.jpg" > >>>> rel="images/ > >>>> clean_room_swap.jpg" class="swapImages"/> > > >>>> </p> > >>>> <p style="margin-left: 2%;"> > >>>> <a href="linear_actuators.html" class="showPic">Linear > >>>> Actuators</ > >>>> a><br/> > >>>> <a href="#" class="showPic2">Guided Actuators</a><br/> > >>>> <a href="#" class="showPic3">Grippers & Escapements</ > >>>> a><br/> > >>>> <a href="#" class="showPic4">Actuator Accessories</a><br/> > >>>> <a href="#" class="showPic5">Electric Actuators</a><br/> > >>>> <a href="#" class="showPic6">Rodless Actuators</a><br/> > >>>> <a href="#" class="showPic7">Rotary Actuators</a><br/> > >>>> <a href="#" class="showPic8">Specialty Actuators</a><br/ > >>>> ></p> > >>>> </div> > > >>>> On Sep 26, 9:34 am, Karl Swedberg <[EMAIL PROTECTED]> wrote: > > >>>>> The problem here is that .hover() takes two arguments, one for > >>>>> mouseover and one for mouseout. > > >>>>> So it should look like this: > > >>>>> .hover(function() { > >>>>> // Stuff to do when the mouse enters the element;}, function > >>>>> () { > > >>>>> // Stuff to do when the mouse leaves the element; > > >>>>> }); > > >>>>> If you just want to do something on mouseover, use the > >>>>> (appropriately > >>>>> named) .mouseover() method instead: > > >>>>> .mouseover(function() { > >>>>> // Stuff to do when the mouse enters the element > > >>>>> }) > > >>>>> --Karl > >>>>> _________________ > >>>>> Karl Swedbergwww.englishrules.comwww.learningjquery.com > > >>>>> On Sep 26, 2007, at 9:17 AM, Danjojo wrote: > > >>>>>> I am doing a simple imageChange onLinkHover... > > >>>>>> I get the following error in Firebug everytime I hover over a > >>>>>> link. > >>>>>> But the image swaps work GREAT in all browsers. > >>>>>> Except for the fact I see the error getting thrown in the > >>>>>> browsers I > >>>>>> am fine. > > >>>>>> g has no properties > >>>>>> handleHover(Object type=mouseout target=a.showPic)jquery- > >>>>>> svn.js (line > >>>>>> 11) > >>>>>> e(Object type=mouseout target=a.showPic)jquery-svn.js (line 11) > >>>>>> e()jquery-svn.js (line 11) > >>>>>> [Break on this error] eval(function(p,a,c,k,e,r){e=function(c) > >>>>>> {return(c<a?'':e(parseInt(c/a)))+((c=c%a... > > >>>>>> The jQuery code to swap images is: > > >>>>>> $(".showPic").hover(function() { > >>>>>> $("#imgLinkAct").attr("src", "images/cylinder.jpg"); > >>>>>> }); > >>>>>> $(".showPic2").hover(function() { > >>>>>> $("#imgLinkAct").attr("src", "images/mgp_swap.jpg"); > >>>>>> }); > >>>>>> $(".showPic3").hover(function() { > >>>>>> $("#imgLinkAct").attr("src", "images/mhc_swap.jpg"); > >>>>>> }); > >>>>>> $(".showPic4").hover(function() { > >>>>>> $("#imgLinkAct").attr("src", "images/shock_swap.jpg"); > >>>>>> }); > >>>>>> $(".showPic5").hover(function() { > >>>>>> $("#imgLinkAct").attr("src", "images/emy2_swap.jpg"); > >>>>>> }); > >>>>>> $(".showPic6").hover(function() { > >>>>>> $("#imgLinkAct").attr("src", "images/ncy2_swap.jpg"); > >>>>>> }); > >>>>>> $(".showPic7").hover(function() { > >>>>>> $("#imgLinkAct").attr("src", "images/crq_swap.jpg"); > >>>>>> }); > >>>>>> $(".showPic8").hover(function() { > >>>>>> $("#imgLinkAct").attr("src", "images/ > >>>>>> clean_room_swap.jpg"); > >>>>>> }); > > >>>>>> });- Hide quoted text - > > >>>>> - Show quoted text -- Hide quoted text - > > >>>> - Show quoted text -- Hide quoted text - > > >>> - Show quoted text -- Hide quoted text - > > >> - Show quoted text -- Hide quoted text - > > - Show quoted text -