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 -
