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="" />
img alt="" src="" />

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") + "' />");

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

Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal


Anonymous said...

$("img").click(function(){ window.location.href = $(this).attr("src"); });

This does the same, and more importantly, it doesnt alter the html structure of your page, which could easily break your styling with things like floating images or image blocks.

Orange Crush said...

Thank you Anonymous, this method worked perfectly for me!