jQuery hover function

Question

I am creating a hover effect using jQuery and data-attribute.

So what I did is that I put some data attribute on each images and then I access them via jQuery and store them in a variable. Then I access them to change the image via jQuery. However, I have no idea how to put it back to the original on "mouseout"

Here's my jQuery:

$(document).ready(function(){
    $('img').hover(function(){
        var s = $(this).attr('data-alt-src');
        $(this).attr('src', s);
    }, function(){
        $(this).attr('src');
    });
});

Any idea?

Umesh Sehta · Accepted Answer · 2015-06-26 06:04:52Z

2

try to set origional src to other attribute and use that when mouseleave.

 $(document).ready(function(){
    $('img').hover(function(){
        var s = $(this).attr('data-alt-src');            
        $(this).attr('orSrc',$(this).attr('src')).attr('src', s);
    }, function(){
        $(this).attr('src',$(this).attr('orSrc'));
    });
});

Demo

answered Jun 26, 2015 at 6:04

Umesh Sehta

10.7k5 gold badges43 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kimberly Wright Over a year ago

Can I ask a question? Why can't we declare the var old inside the $(document).ready(function(){} ??? ABOVE THE var old src. ??? – Kimberly Wright

Kimberly Wright Over a year ago

Can you explain further why?

Kimberly Wright Over a year ago

what will happen if I will declare these whole thing above the hover function: var original_src=$(this).attr('src'); would it still be accessible on mouse out?

Umesh Sehta Over a year ago

not at all because $(this) refers to hoved image(i.e which image being hoved) so it will throw an error

Balachandran · Accepted Answer · 2015-06-26 06:06:39Z

1

To store current src as a variable and use it

   var old="";
$(document).ready(function(){
        $('img').hover(function(){
            old=$(this).attr('src');
            var s = $(this).attr('data-alt-src');
            $(this).attr('src', s);
        }, function(){
            $(this).attr('src',old);
        });
    });

Updated Fiddle

answered Jun 26, 2015 at 6:06

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

1 Comment

Kimberly Wright Over a year ago

Can I ask a question? Why can't we declare the var old inside the $(document).ready(function(){} ???

Muhammet · Accepted Answer · 2015-06-26 06:10:10Z

1

    $(document).ready(function() {
      var src_original;
      $('img').hover(function() {
        src_original = $(this).attr('src');
        var s = $(this).attr('data-alt-src');
        $(this).attr('src', s);
      }, function() {
        $(this).attr('src', src_original);
      });
    });

img {
  cursor: pointer;
}
img:hover {
  opacity: 0.7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <img src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/1.jpg" data-alt-src='http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/1-1.jpg' />
  <img src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/4.jpg" data-alt-src='http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/2-2.jpg' />
  <img src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/3.jpg" data-alt-src='http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/3-3.jpg' />
  <img src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/2.jpg" data-alt-src='http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/4-4.jpg' />

</section>

edited Jun 26, 2015 at 6:10

answered Jun 26, 2015 at 6:05

Muhammet

3,31816 silver badges23 bronze badges

3 Comments

Kimberly Wright Over a year ago

Can I ask a question? Why can't we declare the var old inside the $(document).ready(function(){} ??? ABOVE THE var old src. ???

Muhammet Over a year ago

@KimberlyWright It is declared in inside DOM ready, but if you are asking about why not inside hover function it won't be available for mouseout function, since it is a local variable.

Kimberly Wright Over a year ago

so we need to declare it as an empty variable outside the hover function first and then set a value on it inside the hover function am I correct?

Satpal · Accepted Answer · 2015-06-26 06:06:06Z

0

Store original image src in cache using .data().

$(document).ready(function () {
    $('img').hover(function () {
        var that = $(this);
        that.data('or-src', that.prop('src'))
        that.prop('src', that.data('alt-src'));
    }, function () {
        var that = $(this);
        $(this).prop('src', that.data('or-src'));
    });
});

DEMO

answered Jun 26, 2015 at 6:06

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Usman Arshad · Accepted Answer · 2015-06-26 06:09:38Z

I added data-old-src to store default img source and load on mouse out.

Check https://jsfiddle.net/jzxh1asx/6/

HTML

  <section>
    <img src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/1.jpg" data-old-src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/1.jpg" data-alt-src='http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/1-1.jpg' />
    <img src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/4.jpg" data-old-src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/4.jpg" data-alt-src='http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/2-2.jpg' />
    <img src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/3.jpg" data-old-src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/3.jpg" data-alt-src='http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/3-3.jpg' />
    <img src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/2.jpg" data-old-src="http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/2.jpg" data-alt-src='http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/4-4.jpg' />
  </section>

JS

$(document).ready(function(){
    $('img').hover(function(){
        var s = $(this).attr('data-alt-src');
        $(this).attr('src', s);
    }, function(){
        var os = $(this).attr('data-old-src');
        $(this).attr('src', os);
    });
});

Collectives™ on Stack Overflow

jQuery hover function

5 Answers 5

4 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related