coding180 icon

Coding180

HTML Element: Hyperlink using an image <a> and <img>

HTML Element: Hyperlink using an image <a> and <img>

Tutorials > HTML > Anchor Elements


Since we already know about hyperlinks and how to insert images in our page, now we can implement a hyperlink but instead of showing a text we will show an image.

The solution is simple and consists of placing the <img> tag enclosed between the opening and closing tag of the link (<a>)

Let's make a page that displays two images (photo1.jpg and photo2.jpg) as hyperlinks. When pressed, call another page.

The images are located in the folder of the parent directory where our HTML page is located:

<!DOCTYPE html>
<html>

<head>
    <title>Page title</title>
    <meta charset="UTF-8">
</head>

<body>
    <h2>Click on any of the images to learn more about that work.</h2>
    <a href="page2.html"><img src="../photo1.jpg" alt="Geometric Painting"> </a>
    <br>
    <a href="page3.html"><img src="../photo2.jpg" alt="Geometric Painting"> </a>
</body>

</html>

Output:

As we can see, we inserted the HTML img element in the place where we had the hyperlink text. That is all.


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel