CODEWITHSUNDEEP
javascript
moqa
moqa

Reputation: 71

Change image on hover of parent with JS

I'm trying to make it so when the parent div is hovered I can change the image source inside the child div. In example:

<div class="parent">
    <div class="child">
        <img class="image" src=... />
    </div>
</div>

I did find a js script for changing the source, but I'm not sure how to trigger it when the parent is hovered, nor the child div, just when the image itself is hovered. That code is,

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

$(function () {
    $('img.image').hover(sourceSwap, sourceSwap);
});

I'd like to say I tried more than that logically, but I was just kind of shooting in the dark due to my inexperience with JS. I'm not finding anything on this and it really has me stumped. Is there an easier way to achieve this than I am trying? Regardless, a solution is appreciated.

Upvotes: 0

Views: 922

Answers (3)

Gherman
Gherman

Reputation: 7426

This code uses jQuery libriry so you need to include it into your page before including your script.

$() grabs HTML-elements either by ussual css or with some additional jQuery words. .find lets us query HTML-elements among children of another one. These commands are queries so they may last long. That's why we save results in variables to avoid doing the queries multiple times. ready and hover are events of the document and the parent div which we set callback functions that will execute when the events happen. .attr lets us change the attribute value if 2 arguments provided(an attribute and a value) and get the current value of the attribute if one argument provided(an attribute). 

$(document).ready(function() {

    var $parentDiv = $("div.parent");
    var $image = $parentDiv.find("img.image");
    $parentDiv.hover(function() {
        $image.attr("src", "oneImageSource.jpg");
    }, function() {
        $image.attr("src", "anotherImageSource.jpg");
    });

});

Upvotes: 1

SAMdroid
SAMdroid

Reputation: 273

You can do this through css, using the background property. Here is an example: http://jsfiddle.net/SAMdroid/p2CZU/. Basically it is just using src in css instead of src in html:

.child {
    content: url("http://placekitten.com/200/200")
}

.parent:hover > .child {
    content: url("http://placekitten.com/200/250")
}

Of course this most of your code is in the css, which isn't very clean :(

Just an idea :D

Upvotes: 3

Brocco
Brocco

Reputation: 64853

SAMdroid's CSS solution will work just fine, assuming that your image URL's are static, but if they need to change based upon something else here is a fiddle that will swap out properties for an inner tag based upon the mouse entering and leaving the element.

http://jsfiddle.net/A9mB5/

$(function () {
    var orig;
    $('.parent').mouseenter(function () {
        var img = $(this).find('.img');
        if (!orig){
            orig = img.text();
        }
        img.text('Hover Text');
    }).mouseleave(function(){
        $(this).find('.img').text(orig);
    });
});

I swapped out the text instead of the image for the sake of an simpler example.

Upvotes: 1

Related Questions