HTML Dom tutorial 16-html Dom area object
1: Area object
An area object represents an area mapped to an image (image ing refers to an image with a clickable area)
Each time a <area> tag appears in an HTML document, an area object is created.
2: attributes of the Area object| Attribute | Description | IE | F | O | W3C |
|---|---|---|---|---|---|
| Accesskey | Set or return the shortcut key for accessing a region. | 5 | 1 | No | Yes |
| ALT | Set or return the replacement text when the browser cannot display a certain area. | 5 | 1 | 9 | Yes |
| Coords | Sets or returns the coordinates of the clickable areas in the image ing. | 5 | 1 | 9 | Yes |
| Hash | Sets or returns the anchor part of the URL in a region. | 4 | 1 | No | No |
| Host | Set or return the host name and port of the URL in a region. | 4 | 1 | No | No |
| Href | Sets or returns the URL of the link in the image ing. | 4 | 1 | 9 | Yes |
| ID | Sets or returns the ID of a region. | 4 | 1 | 9 | Yes |
| Nohref | Sets or returns whether a region is active or not. | 5 | 1 | 9 | Yes |
| Pathname | Sets or returns the path name of a URL in a region. | 4 | 1 | 9 | No |
| Protocol | Set or return the protocol of the URL in a region. | 4 | 1 | 9 | No |
| Search | Sets or returns the query string of a URL in a region. | 4 | 1 | 9 | No |
| Shape | Sets or returns the shape of an area in the image ing. | 5 | 1 | 9 | Yes |
| Tabindex | Sets or returns the tab key control order for a region. | 5 | 1 | 9 | Yes |
| Target | Set or return the link-URL in the open area. | 4 | 1 | 9 | Yes |
| Attribute | Description | IE | F | O | W3C |
|---|---|---|---|---|---|
| Classname | Sets or returns the class attribute of an element. | 5 | 1 | 9 | Yes |
| Dir | Set or return the direction of the text. | 5 | 1 | 9 | Yes |
| Lang | Set or return element LanguageCode. | 5 | 1 | 9 | Yes |
| Title | Sets or returns the title of an element. | 5 | 1 | 9 | Yes |
4: Dir attribute
Definition: sets the Dir attribute or returns the text direction of the element.
Usage: See the following example:
<HTML>
<Body id = "myid" dir = "RTL">
<SCRIPT type = "text/JavaScript">
X = Document. getelementsbytagname ('body') [0];
Document. Write ("text direction:" +
X. dir);Document. Write ("<br/> ");
Document. Write ("an alternate way :");
Document. Write (
Document. getelementbyid ('myid'). dir);</SCRIPT>
</Body>
</Html>
5. Hash attributes
Definition: the hash attribute can be set or the anchor part of the URL in a region is returned.
Usage: See the following example. In the following example, you can change the anchor part of the URL # top to # bottom:
<HTML>
<Head>
<SCRIPT type = "text/JavaScript">
Function changelink ()
{
Document. getelementbyid ('venus'). Hash = "bottom"}
</SCRIPT>
</Head>
<Body>
<Map Name = "planetmap">
<Area ID = "Venus" shape = "circle" coords = "124,58, 8" alt = "Venus" href = "venus2.htm # Top"/>
</Map>
<Input type = "button" onclick = "changelink ()" value = "change link"/>
</Body>
</Html>
6: Host attributes
As shown in the following example, the host name and port in the "Venus" area are returned:
<HTML><Body>
<Map Name = "planetmap">
<Area ID = "Venus" shape = "circle" coords = "124,58, 8" alt = "Venus" href = "venus.htm"/>
</Map><P> the hostname and port for the "Venus" area are:
<SCRIPT type = "text/JavaScript">
X = Document. getelementbyid ('venus ');
Document. Write (X. HOST );</SCRIPT>
</P>
</Body>
</Html>
7: Search attributes
<HTML><Body>
<Map Name = "planetmap">
<Area ID = "Venus" shape = "circle" coords = "124,58, 8" alt = "Venus" href = "venus.htm? Id = Venus "/>
</Map><P> the hostname and port for the "Venus" area are:
<SCRIPT type = "text/JavaScript">
X = Document. getelementbyid ('venus ');
Document. Write (X. Search);</SCRIPT>
</P>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
