Create a Hyperlink of an Image using jQuery

Here’s a quick and easy way to create a Hyperlink of an Image using jQuery. Let us say you have the following image tags on the page:

<img alt="" src="http://www.dotnetcurry.com/Images/linq.gif" /><img alt="" src="http://www.dotnetcurry.com/images/Question.gif" />

To convert these images to hyperlink, we will use the jQuery wrap() function as shown below:

<script type="text/javascript">    $(function ()    {        $("#replAll").click(function ()        {            $('img').each(function ()            {                var currImg = $(this);  // cache the selector                currImg.wrap("<a href='" + currImg.attr("src") + "' />");            });        });    });</script>

What happens here is whenever the user clicks on the button, the wrap function wraps the anchor HTML structure around each image. After you click the button, you will observe that the images have become ‘clickable’, since they are now hyperlinks.

See a Live Demo

Share:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • DZone
  • LinkedIn
  • Reddit
  • StumbleUpon
  • Twitthis
This entry was posted in jQuery, Syndicated. Bookmark the permalink.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree