The difference between image link and image map

Since this is about the image, let's introduce the elements of the HTML in the image: (according to the W3 standard, the element does not recommend the analysis of attributes)

elements------Embed an image into a Web page

Attributes of the IMG element:

(1) src: Image source URL.

(2) Alt: Specifies an alternative text for the image.

(3) Height and width: pixels, or default if not specified, or automatically resized if only height or width is specified.

(4) Ismap: Defines the image as a server-side image map.

(5) Usemap: Defines the image as a client-side image map.

(6) Longdesc: Point to the URL that contains the long image description document.

<map> element------Define a client-side image map (image-map)

Attributes of the Map element:

(1) ID: Defines a unique name for the map tag.

(2) Name: for Image-map.

Note the Usemap property in: can refer to the ID in <map> or the Name property (depending on the browser), so both the ID and the name attribute should be added to <map>.

<area> elements------Defining areas in image maps

Properties of the AREA element:

(1) Alt: Specifies an alternative text for the image.

(2) Shape: Used to describe the shape of the area, Rect\poly\circle\default is optional, and default refers to an area that has not yet been defined.

(3) Coords: Specifies the coordinates of the area. For example, the rectangle has 4 coordinates, the first two are the x, y coordinates of the upper left corner, and the next two are the X, y coordinates of the lower right corner.

(4) HREF and nohref:href Specify the purpose of the link, if you do not specify the href attribute, you need to specify nohref,nohref= "Nohref"

(5) Target: The same as the <a> tag.

Note: The area element is always nested inside the map element.

After familiarizing yourself with the above three elements, we will discuss the differences between image links and image maps:

Image Link:

Insert a link on the image: Click the image, jump page:insert 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>

Image mapping:

(1) server-side image mapping: the click of the coordinates sent to the server, by the server's script to determine. (ISMAP)

(2) Client image mapping: Determine the purpose of the link depending on the location of the click.    (USEMAP) (Only client image mapping is analyzed here)

Note: set the Usemap property in , and set the Name property in <map>.

  Application:

1), the whole picture map the same area (at this time and the picture link no difference)

 
 <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 whole picture is mapped to several different areas (several areas have several area)

 
  <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), to the picture Local area add link

 
 <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> 

Often reflect, often review, warm so know new!

The difference between image link and image map