CODEWITHSUNDEEP
jqueryhtmlcss
user2441391
user2441391

Reputation: 339

Changing an image in a div when mouse hovers over a different div?

I have four divs, each of them displays text. I also have a div for an image. I have 4 images, I want the corresponding image to be shown when I hover over it's corresponding div. So, if I hover over the div about monkeys then the image div should display monkey.jpg, if I hover over the lion div then the lion.jpg should be displayed and the monkey image should disappear. I don't have much experience with jquery so I haven't figured out much.

HTML:

<div class="images">
<img src="monkey.jpg">
<img src="lion.jpg">
<img src="tree.jpg">
<img src="falcon.jpg">
</div>

<div>
<p>Monkey are funny!</p>
</div>
<div>
<p>Lions are cool!</p>
</div>
<div>    
<p>Trees are green!</p>
</div>
<div>
<p>Falcons are fast!<p>
</div>

I've thought about making a function that hides all images, and then individually showing each image when I hover the div, but I don't think that'll work.

Upvotes: 1

Views: 5140

Answers (5)

yeyene
yeyene

Reputation: 7380

You can also use like that, DEMO http://jsfiddle.net/yeyene/J8FJq/1/

Add target attribute with image url to link, also add class. And below script will do all the changes for you.

$('.imgLink').hover(function(){
    $('#preview').css({'background':'url('+ $(this).attr('target') +')'});
},function(){
    $('#preview').css({'background':''});
});

Upvotes: 1

Jeremy
Jeremy

Reputation: 3538

Here is a simple example using no plugins just javascript and the "onmouseover" event...

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div > p {
                cursor: pointer;
            }
        </style>

        <script>
            var monkeySrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/monkey-icon.png";
            var lionSrc = "http://icons.iconarchive.com/icons/martin-berube/animal/256/lion-icon.png";
            var treeSrc = "http://totaltreeworks.co.nz/wp-content/uploads/2011/02/Tree-256x256.png";
            var falconSrc = "http://icons.iconarchive.com/icons/jonathan-rey/star-wars-vehicles/256/Millenium-Falcon-01-icon.png";

            function changeImage(src){
                document.getElementById("myImage").src = src;
            }

        </script>
    </head>

    <body>
        <div class="images">
            <img id="myImage" width="256" height="256">
        </div>

        <div>
            <p onmouseover="changeImage(monkeySrc)">Monkey are funny!</p>
        </div>

        <div>
            <p onmouseover="changeImage(lionSrc)">Lions are cool!</p>
        </div>

        <div>    
            <p onmouseover="changeImage(treeSrc)">Trees are green!</p>
        </div>

        <div>
            <p onmouseover="changeImage(falconSrc)">Falcons are fast!<p>
        </div>
    </body>
</html>

So I've used some of my own links to images online, just swap these out for your own and you're good to go.

This is basically what you originally suggested at the bottom of your answer.

Upvotes: 1

matt3141
matt3141

Reputation: 4443

Here is a full implementation of your desired effect. Note the grouping of the links, which plays a role in identifying which item has been hovered over (see .index()) and the CSS styles, which only show the image matching the class of the .images wrapper. The hover function then sets that class to reflect the item which has been hovered over, drawing from the ordered listing of their names, ["monkey", "lion", ...].

<div class="images">
    <img src="monkey.jpg">
    <img src="lion.jpg">
    <img src="tree.jpg">
    <img src="falcon.jpg">
</div>

<div class="links">
    <div>
        <p>Monkey are funny!</p>
    </div>
    <div>
        <p>Lions are cool!</p>
    </div>
    <div>    
        <p>Trees are green!</p>
    </div>
    <div>
        <p>Falcons are fast!<p>
    </div>
</div>

<style>
    .images img {
        display: none;
    }
    .images.monkey img[src*=monkey] {
        display: block;
    }
    .images.tree img[src*=tree] {
        display: block;
    }
    .images.lion img[src*=lion] {
        display: block;
    }
    .images.falcon img[src*=falcon] {
        display: block;
    }
</style>

<script>
    var images = ["monkey", "lion", "tree", "falcon"];
    $(".links div p").hover(function() {
        $(".images").attr("class", "images "+images[$(this).parents("div").index()]);
    }, function() {
        $(".images").attr("class", "images");
    });
</script>

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24733

You can use .hover jquery

DEMO http://jsfiddle.net/kevinPHPkevin/J8FJq/

$('#monkeys').hover(function(){
    $('#preview').addClass('monkeys');
},function(){
    $('#preview').removeClass('monkeys');
});

Upvotes: 0

user2568107
user2568107

Reputation:

Use jquery and css:

CSS:

//image div { background-image: url('your-image.jpg'); width: // image width; height: // image height; }

Jquery:

$('.another-element').hover(function(){
    $('div').css({    'background-image': 'url('newimage.jpg')',
    'width': '// new image width',
    'height': '// new image height;'})
});

Upvotes: 0

Related Questions