CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2485649
user2485649

Reputation: 235

Jquery: Replace image source getting link from anchor tag

I need a help and I am stuck how to replace a image source by getting the url link from its anchor tag. And I need to repeat this for a n number of div.

What I have is n number of div, and a anchor tag in each div with a image. When someone hover on a image tag, the source of image should changed by getting the source from anchor tag and I also want to disable the anchor click. Is this possible?

Have a look at the code:

<div class="slide" data-type="image">
        <a href="http://www.extremetech.com/wp-content/uploads/2012/12/Audi-A1.jpg">
            <img data-image="http://earnthis.net/wp-content/uploads/2013/09/Toy-Story-2-Disney-Wallpaper-Picture.jpg" 
            data-src="http://earnthis.net/wp-content/uploads/2013/09/Toy-Story-2-Disney-Wallpaper-Picture.jpg" 
        src="http://earnthis.net/wp-content/uploads/2013/09/Toy-Story-2-Disney-Wallpaper-Picture.jpg"
            />
        </a>

http://jsfiddle.net/7AqkS/1/

Thanks, I am not good in jquery :(

Upvotes: 3

Views: 3083

Answers (3)

Mayank Tripathi
Mayank Tripathi

Reputation: 1352

This might help you http://jsfiddle.net/7AqkS/8/

HTML:

<div class="slide" data-type="image"> <a href="http://scm-l3.technorati.com/11/08/30/49859/Google+steel.png?t=20110830212412">
        <img data-image="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg" 
                data-src="http://scm-l3.technorati.com/11/08/30/49859/Google+steel.png?t=20110830212412" 
            src="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg"/>
    </a>

</div>
<div class="slide" data-type="image">
    <a href="http://scm-l3.technorati.com/11/08/30/49859/Google+steel.png?t=20110830212412">
                <img data-image="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg" 
                data-src="http://scm-l3.technorati.com/11/08/30/49859/Google+steel.png?t=20110830212412" 
            src="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg"/>
    </a>

</div>

JS:

$(document).ready(function(){
$(".slide img").on("mouseenter", function () {
    $(this).attr("src", $(this).data("src"));
}).on("mouseleave", function () {
    $(this).attr("src", $(this).data("image"));
});
});

Upvotes: 1

dfsq
dfsq

Reputation: 193271

You can achieve basic rollover effect with this code:

$(".slide a").hover(function() {
    $(this).find('img').prop('src', this.href);
}, function() {
    $(this).find('img').prop('src', function() {
        return $(this).data('src');
    });
})
.on('click', function(e) { e.preventDefault(); })

Demo: http://jsfiddle.net/7AqkS/6/

Or if you want something fancier:

$('.slide a').on({
     'mouseover mouseout': function(e) {
         $('img', this).prop('src', function() {
             return e.type == 'mouseover' ? e.delegateTarget.href : $(this).data('src');
         });
     },
     click: function(e) {
         e.preventDefault();
     }
 });

Upvotes: 5

Digital Fu
Digital Fu

Reputation: 2917

Look for the parents 'href' attribute and set the images 'src' attribute to its value, like this.

$( document ).ready( function() {

     // One way che
     $( ".slide img" ).hover( function( element ){
         var image = $( this );
         var newImage = image.parent( 'a' ).attr( 'href' );
         image.attr( 'src', newImage );

     });

     // Prevent Default anchor behavior
     $( ".slide a" ).click( function(element){ 
          element.preventDefault();
          element.stopPropagation();
     });

});

Upvotes: 1

Related Questions