[jQuery] Re: Image change on link hover.

[Rob Desbois]

An alternative avoiding 1 <img> tag being two different images is the
following:

<img id="imgLinkAct1" src="theOFFimage.jpg" />
<img id="imgLinkAct2" src="theONimage.jpg" class="hidden" />

.hidden {display:none}

$(".showPic").hover(function() {
   $("#imgLinkAct1, #imgLinkAct2").toggleClass("hidden");
});

It's slightly more semantically correct, and means you don't need to use the
non-standard attribute.
--rob


On 7/19/07, Andy Matthews <[EMAIL PROTECTED]> wrote:

Put the alternate image in a rel attribute on the actual images:

<img src="theOFFimage.jpg" rel="theONimage.jpg">

-----Original Message-----
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Danjojo
Sent: Wednesday, July 18, 2007 2:23 PM
To: jQuery (English)
Subject: [jQuery] Image change on link hover.


I have a crude demo working when I hover over a link an image above is
switched out.

How do I best store what image I want the link to swap to?

        $(".showPic").hover(function() {
                $("#imgLinkAct").attr("src", "images/valve_manifold.jpg");
        });

The html:
<p class="centered" style="height: 80px;"><img id="imgLinkAct"
src="images/cylinder.jpg"/></p>
<p style="margin-left: 2%;">
<a href="linear_actuators.html">Linear Actuators</a><br/> <a href="#"
class="showPic">Guided Actuators</a><br/> <a href="#">Grippers &amp;
Escapements</a><br/>

Would I store the img path in the <a> tags title attribute?

I would like to not hard code it in the jquery/script..

--
Rob Desbois
Eml: [EMAIL PROTECTED]
Tel: 01452 760631
Mob: 07946 705987
"There's a whale there's a whale there's a whale fish" he cried, and the
whale was in full view.
...Then ooh welcome. Ahhh. Ooh mug welcome.