CODEWITHSUNDEEP
jqueryhtmlcss
Bonfire Dog
Bonfire Dog

Reputation: 167

Change an image <src> within a <div> when hovering over another <div>

I have a parent div, #crbigimg, which has an image inside it #copyrightimagecurrent.

As well as this, there are four smaller divs inside the parent div, each of different sizes and positions over the #copyrightimagecurrent image.

Structured like this:

<div id="crbigimg">
    <img id="copyrightimagecurrent" src="http://bonfiredog.co.uk/ooo/icons/copyrightbase.png" alt="Copyright" />
        <div id="copyright1"></div>
        <div id="copyright2"></div>
        <div id="copyright3"></div>
        <div id="copyright4"></div>
</div>

What I would like to do is, when hovering over each of the #copyright child divs, to change the src of the #copyrightimagecurrent image to display a different image, and when removing the mouse from a hover position, returning it to the original src.

I assume that to do this I need to call the .hover jQuery function on the child div, before altering the HTML itself. This second part, however, currently lies outside my abilities.

If anybody could help me, I would appreciate it.

For a live build of the page in question, see: http://bonfiredog.co.uk/copyright

And for the raw code itself:

HTML

<html>
<body>
    <div id="crbigimg">
    <img id="copyrightimagecurrent" src="http://bonfiredog.co.uk/ooo/icons/copyrightbase.png" alt="Copyright" />
        <div id="copyright1"></div>
        <div id="copyright2"></div>
        <div id="copyright3"></div>
        <div id="copyright4"></div>
    </div>
</body>
<html>

CSS

#crbigimg{
margin-left:auto;
margin-right:auto;
margin-top:0%;
width:25%;
text-align:center;
}

#crbigimg img{
display:block;
margin-left:auto;
margin-right:auto;
width:100%;
height:auto;
}


#copyright1{
border: 2px solid green;
width:3%;
height:6%;
position:absolute;
top:21%;
left:50%;
z-index:5;
}

#copyright2{
border: 2px solid red;
width: 6.5%;
height: 15.4%;
position: absolute;
top: 20%;
left: 45.3%;
z-index: 2;
}

#copyright3{
   border: 2px solid purple;
  width: 5.4%;
  height: 8%;
  position: absolute;
  top: 11.5%;
  left: 45.4%;
  z-index: 3;
}

#copyright4{
  border: 2px solid blue;
  width: 4.1%;
  height: 6.6%;
  position: absolute;
  top: 11.6%;
  left: 49.6%;
  z-index: 4;
}

No Javascript/jQuery as of yet!

Upvotes: 1

Views: 3424

Answers (7)

Mario Sanchez Maselli
Mario Sanchez Maselli

Reputation: 1101

I made an small example for you here https://fiddle.jshell.net/5913ba1q/

This is the js that you need to change image on hover

var currentImage = $('#copyrightimagecurrent').attr('src'),
    mainImage = $('.main-image img');

function changeImage(){

$('.copyright').hover(function(){

    var el =  $(this);
    imgUrl = el.data('image');
    mainImage.attr('src',imgUrl)

}, function(){

    mainImage.attr('src',currentImage)

});
}

changeImage();

I change a little bit your html, here it is:

<div id="crbigimg">
     <div class="main-image">
         <img id="copyrightimagecurrent" src="http://lorempixel.com/400/400/" alt="Copyright" />
     </div>   
    <div class="copyright-wrapper">
      <div class="copyright" data-image="http://lorempixel.com/410/330/"></div>
      <div class="copyright" data-image="http://lorempixel.com/350/320/"></div>
      <div class="copyright" data-image="http://lorempixel.com/350/300/"></div>
      <div class="copyright" data-image="http://lorempixel.com/300/300/"></div>
   </div>
</div>

Upvotes: 1

Pasindu Jay
Pasindu Jay

Reputation: 4510

I think store your src before you change will do.

Sample code:

//First Get the Current src and Store it to Variable
var initialImgSrc = $('#copyrightimagecurrent').attr('src');

$('#copyrightimagecurrent').hover(              
    function () {
          //Change img src when hover over
         $('#copywriteimgecurrent').attr('src','picture-1.png');
    }, 

    function () {
        //When hover out get back to initial image
        $('#copywriteimgecurrent').attr('src',initialImgSrc);
    }
);

Upvotes: 0

Balachandran
Balachandran

Reputation: 9637

Hold all images src in one json abject or array and use it like below 

var copywrightImg = {
    "copyright1": "img1path",
    "copyright2": "img2path",
    "copyright3": "img3path",
    "copyright4": "img4path"
}
$("#crbigimg div").hover(function () {

    if (Object.keys(copywrightImg).indexOf(this.id) != -1) {
        $("#copyrightimagecurrent").attr("src", copywrightImg[this.id])
    }
}, function () {
    $("#copyrightimagecurrent").attr("src", "http://bonfiredog.co.uk/ooo/icons/copyrightbase.png")
});

Upvotes: 1

Prasad Raja
Prasad Raja

Reputation: 703

<div id="crbigimg">
<img id="copyrightimagecurrent"  src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/128/single-bird-icon.png" old-src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/128/single-bird-icon.png" alt="Copyright" />

    <div id="copyright1" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">one</div>
    <div id="copyright2" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">two</div>
    <div id="copyright3" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">three</div>
    <div id="copyright4" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">four</div>


$('.cps').hover(function() {
  var that = $(this);
    var newSrc = that.attr('data-src');
    var img = $('#copyrightimagecurrent');    
    img.attr('src',newSrc);
},function() {
  var that = $(this);
    var img = $('#copyrightimagecurrent');
    img.attr('src',img.attr('old-src'));
});

Js Fiddle Demo

Upvotes: 0

Turnip
Turnip

Reputation: 36662

var img = $('#copyrightimagecurrent');
var originalSrc = img.attr('src');

$('#crbigimg > div').on({
    mouseenter: function () {
        img.attr('src',$(this).data('src'));
    },

    mouseleave: function () {
        img.attr('src',originalSrc);
    }
});
#crbigimg{
margin-left:auto;
margin-right:auto;
margin-top:0%;
width:25%;
text-align:center;
}

#crbigimg img{
display:block;
margin-left:auto;
margin-right:auto;
width:100%;
height:auto;
}

#copyright1{
border: 2px solid green;
width:3%;
height:6%;
position:absolute;
top:21%;
left:50%;
z-index:5;
}

#copyright2{
border: 2px solid red;
width: 6.5%;
height: 15.4%;
position: absolute;
top: 20%;
left: 45.3%;
z-index: 2;
}

#copyright3{
   border: 2px solid purple;
  width: 5.4%;
  height: 8%;
  position: absolute;
  top: 11.5%;
  left: 45.4%;
  z-index: 3;
}

#copyright4{
  border: 2px solid blue;
  width: 4.1%;
  height: 6.6%;
  position: absolute;
  top: 11.6%;
  left: 49.6%;
  z-index: 4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="crbigimg">
    <img id="copyrightimagecurrent" src="http://bonfiredog.co.uk/ooo/icons/copyrightbase.png" alt="Copyright">
    <div id="copyright1" data-src="http://newlaunches.com/wp-content/uploads/2013/07/google-glass-dog-590x393.jpg"></div>
    <div id="copyright2" data-src="http://googleblog.blogspot.co.uk/uploaded_images/NICKEY_credit-708823.jpg"></div>
    <div id="copyright3" data-src="http://www.glassappsource.com/wp-content/uploads/2014/02/googleglassdog.jpg"></div>
    <div id="copyright4" data-src="http://www.livewithg.com/wp-content/uploads/2013/05/dog-google-glass.jpg"></div>
</div>

Upvotes: 1

Ciaran
Ciaran

Reputation: 555

You can call the .mouseover() and .mouseout() functions to do this, like so:

jQuery(document).ready( function () {
//Set your images (I've set two here for clarity)
    var rollover_image =  "/images/image1.jpg";
    var normal_image =  "/images/image2.jpg";

    //Roll the image
    jQuery("#copyright1")
        .mouseenter(function() {
            jQuery("#copyrightimagecurrent").attr("src", rollover_image);
        })
        .mouseout(function() {
            jQuery("#copyrightimagecurrent").attr("src", normal_image);
        });
});

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

Add the new src on each '#copyright' element:

<div id="copyright1" data-src="path/to/img.png"></div>
....

On mouseenter, apply this data-src path to the img:

$('#crbigimg > div').on('mouseenter', function() {
    var newSrc = $(this).attr('data-src');
    var img = $('#copyrightimagecurrent');
    img.attr('data-orSrc', img.attr('src'));
    img.attr('src',newSrc);
}).on('mouseleave', function() {
    var img = $('#copyrightimagecurrent');
    img.attr('src',img.attr('data-orSrc'));
});

Upvotes: 1

Related Questions