3schools

Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu March 09, 2024 . #alt . #HowTo
❌

How to Add a Link to an Image in HTML

To add a link to an image in HTML, you can wrap the <img> tag within an <a> tag. Here's how you can do it:

<a href="https://example.com">
    <img src="https://app.3schools.in/logo.png" alt="Description of the image">
</a>

In this example:

  1. Replace "https://example.com" with the URL you want the image to link to.
  2. Replace "https://app.3schools.in/logo.png" with the path to your image file.
  3. Make sure to provide a meaningful alt attribute for accessibility purposes, describing the content or purpose of the image.

save
listen
AI Answer
2 Answers
  1. Another way to add a link to an image in HTML is by using JavaScript to dynamically add the link. Here is an example using JavaScript:
    <img id="my-image" src="image.png" alt="Description of the image">
    <script>
      // Select the image element
    const image = document.getElementById('my-image');

    // Create a link element
    const link = document.createElement('a');

    // Set the href attribute of the link
    link.href = 'https://www.example.com';

    // Append the image element to the link
    link.appendChild(image);

    // Replace the image element with the link element
    image.parentNode.replaceChild(link, image);
    </script>
    In this approach, JavaScript is used to create a link element (<a>) and then append the image to it, effectively turning the image into a clickable link.
    Reply Delete
    Share
  2. Using JavaScript Event Listeners:
    You can also add a link dynamically using JavaScript event listeners. This approach allows for more complex interactions and customization.
    <img id="my-image" src="https://app.3schools.in/logo.png" alt="Image Description">
    <script>
    document.getElementById('my-image').addEventListener('click', function() {
    window.location.href = 'destination-url';
    });
    </script>
    In this HTML snippet:

    href:- attribute specifies the destination URL where the user will be directed when clicking the image.

    src :- attribute specifies the URL or file path of the image.

    alt :- attribute provides alternative text for the image, which is important for accessibility and SEO purposes.
    Reply Delete
    Share
Write Your Answer
loading
back
View All