What Is an HTML Image Link?
The so-called link image is both a link and an image. When a webpage is created, a hyperlink is often added to some pictures on the webpage. When the user clicks the picture, the browser immediately transfers to the address pointed to by the hyperlink.
- Insert a link on the image: click on the image, jump to the page: insert the <img /> element between <a> </a>.
<a href="http://www.w3school.com.cn/"> <img src = "http://img4.3lian.com/sucai/img6/230/29.jpg" alt = "Alternate Text"> </a>
- In some cases, we don't want the entire image to be linked. The desired effect is: click on an area of the picture to link to an address.
<html> <body> <img src = "images / rinking.jpg" width = "230" height = "32" usemap = "# phly" /> <map name = "phly"> <area id = "venus" coords = "9,9,64,28" alt = "ranking use" href = "UseingCounter? subAction = init" /> </ map> </ body> </ html>
- Server-side image mapping : The coordinates of the click are sent to the server, which is determined by the server script. (Ismap)
- Client-side image mapping : The purpose of the link is determined according to the clicked position. (usemap) (only client image mapping is analyzed here)
- Note: Set the usemap attribute in <img>; set the name attribute in <map>. [2]
- application:
- 1) The entire image is mapped to the same area (at this time there is no difference from the image link)
<img src = "http://scimg.jb51.net/allimg/150624/11-1506241135512L.jpg" alt = "Animal" usemap = "# animalmap" width = "200" height = "200" /> <map name = "animalmap" id = "animalmap"> <area shape = "rect" coords = "0,0,200,200" href = "http://www.w3school.com.cn/" target = "_ blank" alt = "animal "/> </ map>
- 2) The entire picture is mapped to several different areas (several areas have several areas)
<img src = "/ i / eg_planets.jpg" border = "0" usemap = "# planetmap" alt = "Planets" /> <map name = "planetmap" id = "planetmap"> <area shape = "circle" coords = "180,139,14" href = "/ example / html / venus.html" target = "_ blank" alt = "Venus" /> <area shape = "circle" coords = "129,161,10" href = "/ example / html / mercur.html" target = "_ blank" alt = "Mercury" /> <area shape = "rect" coords = "0,0,110,260" href = "/ example / html / sun.html" target = "_ blank" alt = "Sun" /> </ map>
- 3) Add a link to a local area of the picture
<img src = "http://scimg.jb51.net/allimg/150624/11-1506241135512L.jpg" width = "230" height = "32" usemap = "# click_enter" /> <map name = "click_enter" id = "click_enter"> <area shape = "rect" coords = "9,9,64,28" alt = "click to enter" href = "http://www.w3school.com.cn" /> </ map>