April 2, 2020

Tutorial 13# Understanding HTML IMAGE Links and How to Create Them

In this tutorial we will be explaining HTML IMAGE links the easy way. Adding image links can be important in some cases. Imaging you want to add an image on your web page and you need this image to take users to a web URL when clicked. Such cases are found in blogs and websites having their logo as the site identity at the top of the website. When you click on such images it reloads the website which simply means it took you back to the same website.

read previous tutorial on : Tutorial 12# Understanding HTML Text Links and How to Create Them

What are HTML image links?

HTML image links are links added to an image which leads a user to a web URL when clicked. In other HTML image links are same as using images as Hyperlinks in a web document.


<!DOCTYPE html>
<html lang="en">

   <a href="https://develoferd/html/ebooks/downloads.html"  target="_self"  >
      <img     src="/html/image.jpeg" alt="develoferd"  border="0" >

A clear observation of the codes above you can see that we have the image tag placed between the anchor tags.

Mouse-Sensitive Images

HTML allows developers insert more than one link in a single image. This simply means you can have more than one link in a single image on a web page but these links will be placed at different coordinates of the image. One’s different links are linked to different coordinates of the image, different coordinates of the image will direct us to different links when clicked. Such images are called image maps. Which means mapping the images with different links at different coordinates.

There are to two different ways of creating image maps

Server side image maps: This image map is achieved using the ismap attributed to the <img> HTML tag and it also needs a server and some image-map processing application

Client side image maps: This image map is achieved using the usemap attribute of the <img> tag with the <map> and <area> HTML tags


Now you understand the basics of HTML TEXT IMAGES and you are really doing great. Lets move on to the next tutorial on   HTML EMAIL LINKS

Leave a Reply

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