Change image source when hover div

Using data-* attributes

by shyam kumar

HTML

<div class="loop" data-selected-image="https://cdn3.iconfinder.com/data/icons/picons-social/57/40-google-plus-128.png">
  google
</div>
<div class="loop" data-selected-image="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-256.png">
  facebook
</div>
<div class="loop" data-selected-image="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-128.png">
  twitter
</div>
<div class="loop" data-selected-image="https://cdn2.iconfinder.com/data/icons/social-icons-color/512/gmail-128.png">
  gmail
</div>
<img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/40-google-plus-128.png" class="image_new">

JavaScript

$('.loop').mouseover(function () {
   var new_src = $(this).attr('data-selected-image');
    //alert(new_src);
   $('.image_new').attr('src', new_src);
    });