3

I have an img tag in HTML with a source image; then I would on mouseover to switch the image to another image; exactly the image I set in the rel attribute.

and then on mouseout, switch back to the source image.

I wrote this script but it does not work; the issue is surely due to the wrong use of "element" but I was not able to solve.

function hover(element) {
  $(element).fadeOut(1000, function(element) {
    element.setAttribute("src", element.attr("rel"));
  }).fadeIn(1000);
  return false;
}

function unhover(element) {}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" 
     src="http://www.google.com/logos/2011/trevithick11-hp.jpg" 
     rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" 
     onmouseover="hover(this);" 
     onmouseout="unhover(this);" 
     />

When solved I will focus on the mouseout event

Andrew Bone
  • 7,092
  • 2
  • 18
  • 33
agodoo
  • 409
  • 6
  • 21

4 Answers4

3

You're mixing plain vanilla JS with jQuery. The first thing you want to do is remove the inline event handlers. Then, use this:

$('#image').hover(function(){
    $(this).fadeOut(1000, function() {
        $(this).attr( "src", $(this).attr("rel") );
    }).fadeIn(1000);
},function(){})


$('#image').hover(function() {
  $(this).fadeOut(1000, function() {
    $(this).attr("src", $(this).attr("rel"));
  }).fadeIn(1000);
}, function() {})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg" rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" />

And if you want to handle the mouseout as well, try this:

$('#image').hover(function() {
  $(this).stop().fadeOut(1000, function() {
    $(this).attr({
      "src": $(this).attr("rel"),
      "rel": $(this).attr("src")
    });
  }).fadeIn(1000);
}, function() {
  $(this).stop().fadeOut(1000, function() {
    $(this).attr({
      "src": $(this).attr("rel"),
      "rel": $(this).attr("src")
    });
  }).fadeIn(1000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg" rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" />
j08691
  • 204,283
  • 31
  • 260
  • 272
0
$('#img1').mouseover(function(){
  $('#img1').attr("src","new_source");

});
$('#img1').mouseout(function(){
  $('#img1').attr("src","old_source");

});

You can see it live here

Vinayak
  • 151
  • 1
  • 7
0

Try this: It will help you...

function hover(element) {
    $("#image").fadeOut(200, function() {
        element.src= "http://www.google.com/logos/2011/mothersday11-hp.jpg";
    }).fadeIn(200);
  return false;
}

function unhover(element) {
            element.src= "http://www.google.com/logos/2011/trevithick11-hp.jpg";
}
radhey shyam
  • 759
  • 6
  • 9
0

var original_src = null;

$('#image').hover(
  // when mouse is over
  function(){
    original_src = $(this).attr('src');
    $(this).attr("src", $(this).attr("rel"));
  },
  // when mouse is out
  function(){
    $(this).attr("src", original_src);
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" 
     src="http://www.google.com/logos/2011/trevithick11-hp.jpg" 
     rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" 
     />

Here's an example with animation:

$(function(){
  var image = $('#image'),
      src = image.attr('src'),
      rel = image.attr('rel'),
      cloned_image = image.clone(),
      speed = 300;
    
  cloned_image.
  attr('src', rel).
  attr('id', image.attr('id')+'-clone').
  css({
    position: 'fixed',
    left: image.position().left,
    top: image.position().top,
    display: 'none'
  }).
  insertAfter(image);
  
  image.mouseover(
    function(){
      cloned_image.stop().fadeIn(speed);
      $(this).stop().fadeOut(speed);
    },
  );
  
  $('#'+image.attr('id')+'-clone').mouseout(function(){
    image.stop().fadeIn(speed);
    $(this).stop().fadeOut(speed);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="image" 
     src="http://www.google.com/logos/2011/trevithick11-hp.jpg" 
     rel="http://www.google.com/logos/2011/mothersday11-hp.jpg" 
     />
Tim S.
  • 162
  • 7