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.
target
properties 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.href
jumps 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 remarksFor 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