HTML uses the map and area properties to create image links and create clickable image hot areas __html

Source: Internet
Author: User

You can position a few points on a picture and then create a clickable hot spot to form a clickable area, which is often used on some shopping sites, very simple and very useful:

First, you will want to display the picture, using HTML tags to display it in the page, the code is simple, do not explain too much. But here's a key, less commonly used attribute, which is usemap, which specifies the map you want to select, and which map to use to show the links. The sample code is as follows:


Next, you define map maps and block them to differentiate between different content areas.


Map maps are made up of <map> tags and <area> tags. <map> label definition is very simple, just declare ID and name can, because different browsers recognize the label is not the same, so the ID and name are both indispensable. <area> tags because they are not used, the following chart shows the exact meaning of each attribute.

Property

Value

Describe

Coords

Coordinate value

Defines the coordinates of clickable areas (areas that are sensitive to the mouse).

Href

Url

Defines the destination URL for this zone.

Shape

Default

Rect

Circ

Poly

Defines the shape of a range.

Target

_blank

_parent

_self

_top

Specifies where to open the destination URL specified by the href attribute.

The sample code for map maps is as follows:

<map name= "Imgmap" id= "Imgmap" >

<area shape= "Circle" coords= "180,139,14" href = "venus.html" alt= "Venus"/>

<area shape= "Circle" coords= "129,161,10" href = "mercur.html" alt= "Mercury"/>

<area shape= "rect" coords= "0,0,110,260" href = "sun.html" alt= "Sun"/>

</map>

So far, we can easily create our own picture map. However, the coordinates of an element in a picture are still a problem for many small partners, because ordinary looking software cannot see the coordinates of each element at all. Here, we recommend an online tool: Image-maps. We only need to register an account on the image-maps, we can through the visual tool to tailor the picture to get the coordinates of the cropped picture.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.