How to Wrap Image with Anchor Link in jQuery

Last Updated on August 21, 2022 by Roshan Parihar

In this tutorial, learn how to wrap image with anchor link using jQuery. The short answer is to use the jQuery wrap() function and specify the hyperlink for the <img>.

There can be many other methods given here below to add anchor hyperlinks to images. You can also wrap multiple images with hyperlinks using these methods.

Below is the Image to Wrap with Anchor Link Using jQuery

Output

The above image contains no hyperlinks to click and visit other pages. Let’s see how you can add hyperlinks to it with the different examples given below.

Method 1: Wrap Image with Anchor Link Using jQuery wrap() Function

To wrap an image with anchor hyperlinks, you can use the jQuery wrap() function. You can specify the <a> tag with a link inside this function to wrap the <img> tag with it. See the example to learn how to use the function.

Output

Hover over the image to check the anchor link

The above example contains the image with a hyperlink. When you hover over the image given above, you will get the URL where you will visit when you click the image. You can click the image given above to visit the page. specified in the anchor link.

Method 2: Add Hyperlink to an Image Using jQuery window.location.href = ''

If you want to add an anchor link to an image using jQuery, you can also use the click event using click() function. Inside this function, specify the code snippet window.location.href = '' and specify the URL within the quotes (' ').

Output

Hover over the image to check the anchor link

It works the same as an anchor link to take visitors to the new URL every time they click the image. When you hover over the above image, you will not get the anchor link of the image. However, it will take you to the specified URL when you click the image.

How to Wrap Different Anchor Links to Multiple Images Using jQuery

In addition to the above examples, you can also wrap different anchor links to different images inside <div> elements using the above methods. You have to use the wrap() with nth-child() function to get the required image and specify the anchor link for wrapping. See the example to learn how to wrap multiple images with different anchor links.

Output

Hover over the images given above to see multiple anchor link

The above example contains multiple images with different hyperlinks for each image. You can hover over the image to check different anchor links. Now, click on any of the images to visit the specified URL.

You May Also Like to Read

• Show/Hide Image on Hover Anchor Link Using jQuery
• How to Remove Anchor tag Link from Div Using jQuery
• How to Insert mailto in Anchor Tag Link Using HTML

Reference

• Stackoverflow