Toggling background image (jQuery)

Question

$('textarea').focus(function() {
    var img = $(this).css('background-image');
    $(this).css('background-image', 'none');
});
$('textarea').blur(function() {
    $(this).css('background-image', img);
});

.. doesn't seem to work. I think somethings wrong, but I can't figure out what.

Many thanks for your help!

Answer 1

If you define

var img

just inside the .focus() event handler, that variable will not be available within .blur()

So either define var img globaly, or use jQuerys .data() method for instance.

write:

$.data(this, 'img', $(this).css('background-image'));

read:

$.data(this, 'img');

example:

$('textarea').focus(function() {
   var $this = $(this);
   $.data(this, 'img', $this.css('background-image'));
   $this.css('background-image', 'none');
});
$('textarea').blur(function() {
   $(this).css('background-image', $.data(this, 'img') || '');
});

Answer 2

Try to define the url-address for the image in css.

var img = 'images/mybg.png';
$('textarea').blur(function() {
    $(this).css('background-image', 'url('+img+')');
});