How to get the background image url of anchor tag using id

Question

I want to give hover effect to multiple images on single page.

There is separate hover image for each image so I am using dynamic background image change.

My logic is :

1. use 2 anchor tag and hide 1 one them
2. hidden image contains the image which should shown on hover image.
3. When user hovers, first anchor tag's background image should be get replaced with hidden anchor tag's bg-image.

here is my code :

    <td class="cell-style-img">
    <a href="<?php echo $linkedin; ?>" id="img<?php echo '-'.$founder_count;?>" class="img-circular img_hover" style="background-image: url(<?php echo $src;?>);"/>
    <a href="<?php echo $linkedin; ?>" class="img-circular" style="display:none;background-image: url(<?php echo $hover_src;?>);" id="hover<?php echo '-'.$founder_count;?>"/>

    </a>
    </td>
$("a.img_hover").bind({

    mouseenter: function () {
      var id = $(this).attr('id');
      var id1 = id.replace (/[^\d.]/g, ''); 
      id1 = 'hover-'+(id1);
      //alert(id1);
      var bg = $("#"+id1).css('background-image').replace(/^url|[\(\)]/g, '');

      bg = bg.replace('url(','').replace(')','');
    $("#"+id).css('background-image', bg );
    },
    mouseout: function () {
      var id = $(this).attr('id');
      var id1 = id.replace (/[^\d.]/g, ''); 
      id1 = 'hover-'+(id1);
             $("#"+id).show();
             $("#"+id).show();
    }
});

My Problem is that I am not able to get second hidden anchor tag's bg-image.

How I can get the background-image of anchor tag using jquery.

Answer 1

Instead of making multiple elements, use the data-* attribute.

HTML:

<a href="#" data-hover="url('image2.jpg')" style="background-image: url('image1.jpg');">&nbsp;</a>

jQuery:

$('a').hover( function() {
    var hoverImg = $(this).data('hover');
    var basicImg = $(this).css('background-image');
    $(this).data('hover', basicImg ).css('background-image', hoverImg );
});

DEMO

Maybe I'm looking at it to easy, but why not use CSS for it (since you already use id's on the images):

 
 
 
  
  a#imgId { background-image: url('image1.jpg'); } a#imgId:hover { background-image: url('image2.jpg'); }
 
  

DEMO

Answer 2

I think this approach is way too complex for such a simple problem. Try something simpler, like letting CSS do the heavy-lifting.

This obviously won't fit your scenario out-of-the-box (because I can't see exactly what it is you're doing), but it should lead down the right (or at least easier) path.

Demo: http://jsfiddle.net/u93efzb5/

HTML

<a href="#" class="reveal" style="background-image: url(http://lorempixel.com/output/technics-q-g-256-256-5.jpg);">
    <span style="background-image: url(http://lorempixel.com/output/food-q-c-256-256-9.jpg);" />
</a>

CSS

a.reveal {
    display: block;
    height: 256px; width: 256px;
    position: relative;
}
a.reveal span {
    display: none;
    background-repeat: no-repeat;
    position: absolute;
}

a.reveal:hover span {
    display: block;
    left: 0; top: 0;
    height: 100%; width: 100%;
}