Sometimes, once I get started down the reusability path I think there
must be no end.
Perhaps in this case I have to draw the line.. and so the multiple
panels that independently swap out images on their set of links would
look like so.
var orgActSRC = $("#imgLinkAct").attr("src");
var orgValveSRC = $("#imgLinkValve").attr("src");
//method
$(".swapActImages").hover(function(){
var newSRC = $(this).attr("rel");
$("#imgLinkAct").attr("src",newSRC);
},function(){
$("#imgLinkAct").attr("src",orgActSRC);
})
//method
$(".swapValveImages").hover(function(){
var newSRC = $(this).attr("rel");
$("#imgLinkValve").attr("src",newSRC);
},function(){
$("#imgLinkValve").attr("src",orgValveSRC);
})
On Sep 26, 1:35 pm, Danjojo <[EMAIL PROTECTED]> wrote:
> 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 -- Hide quoted text -
>
> - Show quoted text -
