jquery1

Add Hyperlink to images using jQuery

To Add Hyperlink to the image, we normally use <a> tag that contains image tag to show the image. But assume there are 100 images and you need to add hyperlink to every image. Putting 100 <a> tag with each image is time consuming and painful. But jQuery can make your task painless. So in this post, I will show to how to add HyperLink to images using jQuery.

jQuery provides a method named “wrap()“, which can be used to insert any HTML structure in set of matched elements. In simple words, if you want put wrapper around your div element then you can use wrap() method. For example, you have a div with ID “Child”.

<div id="Child"></div>

And want to wrap this div with any parent then you can use “wrap()” method to insert HTML.

$('#Child').wrap('<div id="Parent"></div>');

Output:

<div id="parent">
  <div id="child"></div>
</div>

Same way, we will use the wrap() method to insert hyperlink to image tag so that the image becomes clickable. See below.

$(document).ready(function() {
  $('img').each(function ()
  {
     var currentImage = $(this);
     currentImage.wrap("<a href='" + currentImage.attr("src") + "' </a>");
  });
});

In the above code, the wrap function wraps the anchor tag around each image with using the image source as Hyperlink for a tag. For demo, I have added “target=_blank” attribute so that it opens in a new tab/window.

See result below.

If you want to add same Hyperlink to every image then you can use below code. Just replace the URL (My blog URL) with your required URL.

$(document).ready(function() {
  $('img').wrap("<a href='<a title="http://webduos.com" href="http://webduos.com" target="_blank">http://webduos.com</a>' </a>");
});
See Complete Code

Feel free to contact me for any help related to jQuery, I will gladly help you.

Related Posts


5 thoughts on “Add Hyperlink to images using jQuery

  1. online gambling

    Wow, awesome blog structure! How long have you been blogging for? you made blogging look easy. The whole look of your site is wonderful, let alone the content material!

    Reply
  2. kore dizileri izle

    Fantastic article admin thank you. I discovered what i was in search of here. I will review overall of posts in this day time

    Reply
  3. Dario Bealer

    I simply want to tell you that I’m new to weblog and certainly savored you’re web-site. Almost certainly I’m likely to bookmark your blog post . You amazingly come with very good articles. Bless you for revealing your web-site.

    Reply
  4. Dominique

    Great publish admin! i bookmarked your internet blog site. i’ll appear ahead when you can have an e-mail listing including.

    Reply
  5. Sonny Disano

    I just want to say I am newbie to blogging and site-building and really savored this web blog. Almost certainly I’m want to bookmark your site . You definitely come with great articles and reviews. Cheers for sharing your website page.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*