HTML <area><map> tags and its application in real-world development

Source: Internet
Author: User
Tags transparent image

Before, I always thought that HTML <area> is a chicken, HTML, estimated that the HTML5 era will be abandoned life. However, a recent search of information, obediently a boom, not only not abandoned, but developed, and added a number of tag attributes, such as, and rel media hreflang so on.

And then further research found that the goods can actually be used to solve a troubled me for many years the thorny problem, the image immediately tall up.

First, HTML <area> original function

HTML <area> is intended to be used for image tagging of hotspot areas. For example, a map of a Chinese province, click on the corresponding provinces to display the corresponding provinces of the page, or Xu Asahi Cinema or Asahi Asahi Restaurant seat plan, click the corresponding seat selection, you can use <area> the label.

Words pale, instances speak, you can ruthlessly click here: HTML <area> Basic Use Demo

The HTML code is as follows:

<map id= "mm" name= "mm" >    <area shape= "rect" coords= " 20,20,80,80 "href=" #rect "alt=" Rectangle ">    <area shape=" Circle "coords=" 200,50,50 "href=" #circle "alt=" Circle ">    <area shape= "poly" coords= "150,100,200,120,180,130,190,180,150,150,100,160,140,120,100,110" href= "#poly" alt= "Polygon" ></map>

At this point there are 3 hot zones on the picture, and we can use the tab index to highlight the range of its contours, such as the Slice 3 combo:

The image and hotspot Area element associations are properties that use the picture usemap , their values correspond <map> to values id (the name Chrome browser only supports name attribute value associations).

There are two HTML tags, one is, and <area> <map> These are HTML tags that are supported from very early on, so you don't have to worry about compatibility issues. In terms of the closure feature, it <area> is similar that there is no child element or other child content.

Several properties appear here:

Shape
shape represents a click on the shape of a hotspot area, supporting rectangles rect , circles, circle and polygons poly .
Coords
coords represents the coordinates of the clicked Hotspot Area shape. The coordinate point 0,0 represents the upper-left corner of the picture. Where the rectangle rect supports 4 a number of 2 coordinates, the upper-left corner of the rectangle and the coordinates of the lower-right corner of the rectangle. For example, the coords="20,20,80,80" result is a rectangular area where the upper-left corner coordinates are 20,20 wide 60px and high. The Circle circle supports 3 a number, the previous 2 value is the center coordinate, and the first 3 value is the radius of the circle. Polygons poly are much simpler, with each two numeric combination representing a coordinate point, the area in which the line is formed is the final hotspot area.
Href
href and the <a> element href is the same thing, the direct jump address, or anchor point and so on. targetproperties and properties are also supported rel . <area>that is, it can be seen as a half <a> element.
Alt
The
alt descriptive information of the same element that represents the alt image of the hotspot area.

If you want to associate with a <area> picture hotspot, the ancestor element <map> is indispensable, but not necessarily a direct parent-child relationship. <map>It <area> is also normal to have a function of what is nested between and <div> .

<area>this should be a very useful attribute, for example, if the image of a social site often has a human recognition label function, like this:

<area>The hot spot looks like a thing, however, in fact, we seldom use elements very rarely, why? <area>

Because the style of the hot area in the picture is not customizable at all, in addition to the outline can be displayed outline unexpectedly, what border background color is not good, for area CSS settings, but also only to change the style of the tag element itself, not the image of the hot click area style. So, eventually, the labels or hotspots on the image, we often use other tags, such as <div> , or <a> tags to cover the simulation.

In other words, HTML <area> can only be used for scenes that do not have any style requirements for hit hotspots. Considering that this scenario <a> is also possible with tag simulation, it further compresses the <area> practical value of HTML. Unless it is an irregular click Hotspot, this irregular area includes IE8, which is supported by browsers that do not support CSS3, such as:

So, so many years down, never used <area> , and nothing strange, the flowers are still so fragrant, haze or so waves. Is it true that HTML <area> is useless and can only exist in certain rare scenarios?

If so, I would not have written this article, in fact, by chance, I found a <area> hidden feature that could have left the <area> fog and smell the scent.

Second, HTML <area> derivative of the more valuable role

As mentioned earlier, the <area> element can be seen as <a> a half element, which is critical, in other words, we can sometimes use <area> elements instead of <a> elements.

So our thinking becomes: <a> what are the limitations of the element, and sometimes we need to use the <area> substitution <a> element?

The answer is: <a> nesting is not supported. For example:

<a href= "#1" >11111111111<a href= "#2" >22222222222</a></a>

The browser resolves it to an adjacent sibling, not a parent-child relationship, as follows:

So, if we have the need to link nesting, we can try to use <area> elements, for example, like annotations:

Yellow Highlight Area Click is to go to "book details page", and click on the list of any other area is to "book reading page", how should it be achieved?

Traditional method, better is to change the structure and order of the visual Dom, so that the link content into a neighboring relationship, and then through the CSS re-layout positioning, although the trouble points, but at least the semantic and accessibility of this piece is very good; compare the times by using JS, click the target area to preventDefault block the default event, and then location.hrefjumps and the like.

In fact, there is a better approach, that is, <a> elements nested <area> elements, you can ensure that the DOM structure in line with the visual rendering, without JS assistance.

Seeing is believing, you can really click here: Link nested demo with area element

The demo is as follows:

In Chrome and ie9+ browsers, clicking on the picture and heading jumps to the book details page, and clicking on a different area jumps to the book reading page, and the link nesting feature is implemented.

In the demo, the implementation principle of the link nesting and title text of the picture is different.

The link embedding method of the image is more canonical, that is, the use of <map> and <area> elements to create click Hotspots on the image, the relevant HTML code is as follows:

<map id= "bookcover" name= "bookcover" >    < Area shape= "rect" coords= "0,0,54,72" href= "book/1003477570" alt= "City Hunter Limited Time free" target= "_blank" ></map>

That is, the entire image area as a click Hotspot, fully play the <area> characteristics of the label itself, no compatibility problems, keyboard access and so on are very good, and to meet our link nesting function, <area> the practical value of the elements can be reflected greatly.

For the title text "Urban Hunter" link inline processing is a bit cumbersome. The practice of the Demo instance page is to place a bare element directly in front of the text, which is <area> implemented by CSS settings overlay text, with the relevant HTML and CSS code as follows:

. book-title {    position:relative;}. Book-title >. area {    position:absolute;    left:0; top:0;    width:100%; height:100%;}

An <map> element that is detached from nudity <area> can actually be clicked to jump, just like a <a> link element, but the <area> element does not support child elements, so it can only be overwritten. However, it supports pseudo-elements, that is, if you look at visual performance alone, you can also make the title text with the help :before of pseudo-elements.

However, although the subjective function is OK, the code is also very refined, but this <area> method of direct use of element coverage has some limitations, one is not supported by the Firefox browser (Firefox <area> element default display:none , and cannot reset) Another problem is the inability to use the Keyboard tab index Access, if there is no outside <a> element is possible, after that, this trickery practice will not be.

Therefore, if your project compatibility requirements are relatively high, accessibility requirements are also relatively high, it is recommended to use transparent image overlay method to implement the text of the link nested, CSS unchanged, as long as the HTML slightly adjusted to be able to, as follows:

That is, replace the original bare <area> , and then use the <area> element to create the image hotspot. As a result, the full compatibility version of the major browsers is so accomplished!

Iii. concluding remarks

For Chrome and the Ie9+ browser, you can <area> style the elements, and after Firefox4, I look up the online profile and find out that some people think the Firefox browser is doing the right thing, including 10 when someone gave Mozilla feedback about the bug, but It seems that Mozilla developers insist that they are right, which <area> is always the Firefox browser display:none .

The following is a proof of Firefox browser practice is the correct content, citing a lot of specifications content:

OK, so let's walk through the specs here. https://drafts.csswg.org/cssom-view/#dom-element-getclientrects says:

If the element on which it is invoked does not has an associated layout box return a empty sequence and stop this Algor Ithm.

where "layout box" links to https://drafts.csswg.org/cssom-view/#layout-box which says, a "layout box" is either a CSS Layout box or an SVG box. https://drafts.csswg.org/cssom-view/#css-layout-box then says, that's the same term, the CSS specs use.

Going to the HTML spec, https://html.spec.whatwg.org/multipage/embedded-content.html#the-area-element doesn ' t seem to Say anything useful on its own (which are not surprising; rendering are described elsewhere in HTML). Https://html.spec.whatwg.org/multipage/embedded-content.html#image-maps describes association of <area> elements with Layered shapes on an image, which is not "CSS layout boxes" (not least because they ' re not actually box-like in any "; They can have pretty arbitrary shapes). There's no SVG involved here, of course.

OK, https://html.spec.whatwg.org/multipage/rendering.html which is where HTML describes rendering. This says, in https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements:

area {Display:none;}

(The actual selector includes other things). Great, that's something to work with. Https://www.w3.org/TR/CSS21/visuren.html#display-prop says:

None

... Please note this a display of ' none ' does not the Create an invisible box; It creates no box at all.

The current Css-display draft at Https://drafts.csswg.org/css-display/#valdef-display-none likewise says:

 
       

So as far as I can tell the Firefox behavior are exactly following the specs here: <area> elements has no layout boxes, and Hence getClientRects returns an empty list.

The right or wrong actually does not have much significance, I wait as long as know in addition to the area hotspot, <area> in the link nesting function more valuable can be OK!

HTML <area><map> tags and its application in real-world development

Related Article

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.