How to remove the attr() value on mouseout

Question

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

Possible duplicates: http://stackoverflow.com/questions/1870441/remove-all-attributes — Rubens Mariuzzo, Apr 19 '12 at 13:07
@DavidThomas my answer below stores it in .data(). I think this would be a good place to store it in. — d_inevitable, Apr 19 '12 at 13:20
@d_inevitable, yeah; I meant where, in the initial html, would the values be found? (Would there be `width`/`height` attributes in the image, or would it just display at its default/'natural' size.) — David Thomas, Apr 19 '12 at 13:38
@DavidThomas: it just display the default size no `width/height` attributes for the image — Krish, Apr 19 '12 at 13:39
In which case there's no point storing the 'old' values, since on removal of the attributes they'll just revert back to their default size anyway. — David Thomas, Apr 19 '12 at 13:41
@krish it is a good practice to set the width and height attributes in so that the layout can be predicted by the browser before the images are loaded. — d_inevitable, Apr 19 '12 at 14:12

David Thomas · Accepted Answer · 2012-04-19T13:44:29.650

3

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:

edited Apr 19 '12 at 13:44

answered Apr 19 '12 at 13:05

David Thomas

249,100
51
377
410

4

from jQuery 1.7 you could also write `$(this).removeAttr('width height');` – Fabrizio Calderan Apr 19 '12 at 13:07
Ah? I'd just been looking to see if multiple attributes could be removed in one `removeAttr()`, given that it seemed messy to use multiple calls to the same method. Thanks! – David Thomas Apr 19 '12 at 13:08
it may be worth memoizing `$(this).find("img")` – jbabey Apr 19 '12 at 13:16
1

I think you should do a `.find("img")` on the mouse out too. Or, better `$("img",this)`. – d_inevitable Apr 19 '12 at 13:26
@d_inevitable: you're absolutely right; I hadn't realised that I'd left that out. Thanks, and edited-in! =) – David Thomas Apr 19 '12 at 13:35
@jbabey: there's no point; I'm only using the `$(this).find('img')` once in each function, and storing that in the first function won't make it available to the second, so it wouldn't actually reduce the number of calls to either `$(this)` or `.find()`. – David Thomas Apr 19 '12 at 13:37
@DavidThomas oh right, hover takes two callbacks, i wrote that under the impression it took one. – jbabey Apr 19 '12 at 13:38

d_inevitable · Answer 2 · 2012-04-19T13:56:19.723

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/

score 0 · Answer 3 · answered Apr 19 '12 at 13:07

0

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

answered Apr 19 '12 at 13:07

Rizstien

802
1
8
23

score 0 · Answer 4 · answered Apr 19 '12 at 13:08

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.

score 0 · Answer 5 · answered Apr 19 '12 at 13:09

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'}); 
        }
    );

Actually this will not work because there may be multiple images. — d_inevitable, Apr 19 '12 at 13:11

How to remove the attr() value on mouseout

5 Answers5