CODEWITHSUNDEEP
javascriptjqueryhover
user1230635
user1230635

Reputation: 11

Change ID img src upon hover another ID

I've just gotten the interest to learn about web programming. Encountered a problem and hope someone could show me some directions.

Example: http://jsfiddle.net/KdhPG/99/

Current: when hover over the image ID, it changes the text ID color to 'red'

Likewise isn't possible to hover over the text ID to change the current img src of the image ID to another image src/URL?

Thanks!

Upvotes: 1

Views: 433

Answers (3)

Michael Tremante
Michael Tremante

Reputation: 388

Not good at jQuery.. but here is a possible solution using the hover so that the previous image is restored. The image will change as you say when hovering over the text, once the mouse leaves it will restore the previous image:

var prevsrc;
$("#one").hover(
    function() {
        prevsrc =  $("#img-one").attr('src');
        $("#img-one").attr('src', 'yourNewImageUrl');    

    },
    function() {
        $("#img-one").attr('src', prevsrc);
    }
);

Upvotes: 1

Chuck Norris
Chuck Norris

Reputation: 15190

$("#img-one").hover(function() {
    $('#img-one').attr("src","http://aviationhumor.net/wp-content/uploads/2011/02/chuck-norris.jpg");
}

EDIT:

As David Thomas mentioned in this case it's better to work with DOM elements like this

this.src = 'http://aviationhumor.net/wp-content/uploads/2011/02/chuck-norris.jpg';

Upvotes: 0

Sean Carruthers
Sean Carruthers

Reputation: 414

Like this?

http://jsfiddle.net/yDhhr/

That doesn't account for mouseout / unhovering, but you should be able to take this code and do it.

As a side note, using the attr() feature of jQuery you can change basically any attribute you want to. It's pretty useful.

Upvotes: 0

Related Questions