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"> <head> </head> <body> <a href="https://develoferd/html/ebooks/downloads.html" target="_self" > <img src="/html/image.jpeg" alt="develoferd" border="0" > </a> </body> </html>
A clear observation of the codes above you can see that we have the image tag placed between the anchor tags.
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