CODEWITHSUNDEEP
jqueryhtmlcss
Behrouz Salehipour
Behrouz Salehipour

Reputation: 1

Changing image background with jquery

I'm trying to change the image thats inside my div by mousing over, in order to change it into a different image. However I can not insert the second image when i mouse over, and i cannot bring the first image back when i mouse leave.

HTML 

<head>
    <link rel="stylesheet" href="TEST.css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $('img').mouseenter(function(){
                $(this).remove();
                $(this).css("background-image",       "url(http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png)");
            });
            $('img').mouseleave(function(){

            });
        });
    </script>
</head>

<body>

    <div>
        <img src="http://www.clker.com/cliparts/3/7/d/5/1197103862376117882Gioppino_Soccer_Ball.svg.med.png"/>
    </div>

</body>

Upvotes: 0

Views: 278

Answers (5)

Sasidharan
Sasidharan

Reputation: 3740

    $(document).ready(function(){
      $(".hoverable").hover(
      function () {
         $(this).attr("src","http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png");
      },
      function () {
         $(this).attr("src","http://www.clker.com/cliparts/3/7/d/5/1197103862376117882Gioppino_Soccer_Ball.svg.med.png");
      }
    );
    });

Upvotes: -2

Sayed
Sayed

Reputation: 631

You cannot apply 'background' property to an image itself so literally, your code won't work (as far as I know). As I can see, you are wrapping up your image in a div, so may be you can change it like this:

$('div img').mouseenter(function()
{
$(this).attr('src','source_of_new_image');
}).mouseleave(function()
{
$(this).attr('src','source_of_old_image');
});

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206111

DEMO

Having this:

<img class="hoverable" src="image.png"/>

you can use:

jQuery(function( $ ){ // DOM Ready shorthand

    var orgSrc;
    $('.hoverable').hover(function(){      
      orgSrc = this.src;      
      this.src = "image2.png";
    }, function(){
      this.src = orgSrc;    
    });

});

Using data-* attribute: DEMO

$('.hoverable').hover(function(){      
  $(this).data('src', this.src);      
  this.src = "image2.png";
}, function(){
  this.src = $(this).data('src');   
});

Always take a closer look at the jQuery API Docs before using methods, get friendly with the Methods and selectors names. Also I'd suggest you to print a jQuery Cheat Sheet, it's always good to have one close to your desk :)

Upvotes: 3

omma2289
omma2289

Reputation: 54629

You can also do this by CSS only:

div:after{
  content: url('http://www.clker.com/cliparts/3/7/d/5/1197103862376117882Gioppino_Soccer_Ball.svg.med.png');
}

div:hover:after{
  content: url('http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png');
}

Demo http://codepen.io/anon/pen/ijeEq

Upvotes: 1

Brigand
Brigand

Reputation: 86230

$.remove literally removes the element from the page (not remove styles). If you remove that, you can add the background-image. Then just set it to an empty string to remove it.

CodePen

$(document).ready(function(){
  $('img').mouseenter(function(){
    $(this).css("background-image",       "url(http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png)");
  });
  $('img').mouseleave(function(){
    $(this).css("background-image", "");
  });
});

Upvotes: 0

Related Questions