CODEWITHSUNDEEP
javascriptjquerymouseovermouseout
Krish
Krish

Reputation: 2670

How to remove the attr() value on mouseout

I am using this code for set height and width for a image on mouseover

$('#gallery').find("img").attr('height', '20px');
$('#gallery').find("img").attr('width','20px');

//so here the default height and width are changed by the javascript above

When mouseout how to remove the height and width of the image set by the mouseover

Upvotes: 0

Views: 507

Answers (5)

d_inevitable
d_inevitable

Reputation: 4461

To restore previous values instead of reverting to default do this:

$("#gallery").mouseenter(function() {
   var gallery = this;

   $("img", this).each(function() {
      var prev = {
        "width": $(this).attr("width"),
        "height": $(this).attr("height")
      };

      var img = this;

      $(gallery).one("mouseleave", function() {
        $(img).attr(prev);
      });
   }).attr({'height':'20px', 'width':'20px'});
});

This will safely store the old value on a per-image basis, without conflicting with other images. (Even if each image has a different size to start with.

http://jsfiddle.net/4bEfs/

Upvotes: 1

David Thomas
David Thomas

Reputation: 253485

Use hover():

$('#gallery').hover(
    function(){
        // mouseover
        $(this).find("img").attr({'height':'20px', 'width':'20px'});
    },
    function(){
        // mouseout
        $(this).find('img').removeAttr('height').removeAttr('width');
        /* as of jQuery 1.7, it's possible to remove multiple attributes at once:
           $(this).removeAttr('height width'); */
    });

JS Fiddle demo.

JS Fiddle demo, using .removeAttr('height width').

References:

Upvotes: 3

WolvDev
WolvDev

Reputation: 3226

Try this: on mouseover you store the width and height and later you restore them.

    var storeddimensions;    
    $('#gallery').hover( 
        function() {
            storeddimensions = new Array($(this).find("img").height(), $(this).find("img").width());
            $(this).find("img").attr({'height':'20px', 'width':'20px'}); 
        }, 
        function() { 
            $(this).find("img").attr({'height':storeddimensions[0] + 'px', 'width':storeddimensions [1] + 'px'}); 
        }
    );

Upvotes: 0

fraabye
fraabye

Reputation: 136

You can use http://api.jquery.com/hover/ and http://api.jquery.com/removeAttr/ in combination if you want to work on attributes.

A more flexible solution might be to manipulate css using http://api.jquery.com/css/. This way you can change multiple values at the same time.

Upvotes: 0

Rizstien
Rizstien

Reputation: 802

on mouseout try $('#gallery').find("img").attr('height', 'auto'); $('#gallery').find("img").attr('width','auto');

Upvotes: 0

Related Questions