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>

IN OTHER LANGUAGES

Was this article helpful? Thanks for the feedback Thanks for the feedback

How can we help? How can we help?