HTML - Image Links
Now that we have seen the various way to create text links as explained in the previous tutorial, and we also learned the way to display images in our webpages. Now, we'll find out how to use or make image links.
Example
It's simple to use a picture as a hyperlink. We just got to use a picture inside hyperlink at the place of text, as shown below :
<!DOCTYPE html> <html> <head> <title>Image Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "https://siitgo.com" target = "_self"> <img src = "/images/logo.png" alt = "Siitgo" border = "0"/> </a> </body> </html>
This will produce a result, where you'll click on the pictures to succeed on the house page of Siitgo.
This was the only way of making hyperlinks using images. Next, we'll see how we will create Mouse-Sensitive Image Links.
Also make sure your images are well edited before placing them on your pages, you can use Free Online Image Editors powered by Adobe.
Mouse-Sensitive Images
The HTML and XHTML standards provide a feature that allows you to embed many various links inside one image. you'll create different links on the only image supported different coordinates available on the image. Once different links are attached to different coordinates, we will click different parts of the image to open target documents. Such mouse-sensitive images are referred to as image maps.
There are two ways to make image maps:
1. Server-side image maps: This is often started by the ismap HTML attribute of the <img> tag and it often needs access to a server and similar image-map processing application.
2. Client-side image maps: This is generates with the usemap HTML attribute of the <img> tag, including the follow up <map> and <area> HTML tags.
Server-Side Image Maps
The server uses the mouse-pointer coordinates to work out which document to deliver back to the browser.
When ismap is employed, the href attribute of the containing <a> tag must contain the URL of a server application sort of a cgi or PHP script, etc. to process the incoming request supported the passed coordinates.
The coordinates, preceded by an issue mark, are added to the top of the URL.
For instance, if a certain user clicks 20 pixels over and 30 pixels down right from the upper-left corner of the subsequent image that has been generated by the subsequent code snippet:
<!DOCTYPE html> <html> <head> <title>ISMAP Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href = "/cgi-bin/ismap.cgi" target = "_self"> <img ismap src = "/images/logo.png" alt = "SIITGO" border = "0"/> </a> </body> </html>
Then the browser sends the subsequent search parameters to the web server which may be processed by ismap.cgi script or map file and you'll link whatever documents you wish to those coordinates:
/cgi-bin/ismap.cgi?20,30
This way, you'll assign different links to different coordinates of the image and when those coordinates are clicked, you'll open the corresponding linked documents.
Client-Side Image Maps
Client-side image maps are kickstarted by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags.
The image that is getting to form the map is inserted into the page using the <img /> tag as a traditional image, except it carries an additional attribute known as usemap. The worth of the usemap attribute is that the value which will be utilized in a <map> tag to link map and image tags. The <map> alongside the <area> tags define all the image coordinates and corresponding links.
Below is an example from the image map:
<!DOCTYPE html> <html> <head> <title>USEMAP Hyperlink Example</title> </head> <body> <p>Search and click the hotspot</p> <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/> <!-- Create Mappings --> <map name = "html"> <area shape = "circle" coords = "80,80,20" href = "/css/index.htm" alt = "CSS Link" target = "_self" /> <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" href = "/jquery/index.htm" target = "_self" /> </map> </body> </html>
The above code will be displayed as:
Jobs Vacancy
The Jobs portal provides you with real time Jobs Opening and Vacancy Updates curated globally. Start applying for your dream job with ease in any location you choose.
Learn More >>
CV Builder
The CV Builder provides you with comprehensive guide and proven steps to take in writing a professional CV including top CV templates to get you started quickly.
Learn More >>
