Usemap usage in HTML

Usemap is an attribute of the label and is used to specify the name of the image map used.
The # map is an image map defined by the <map> label. Its name attribute is map, which is defined as follows:
<Map Name = "map">
<Area shape = rect coods = "100,100,200,200" href = "test1.html">
<Area shape = rect coods = "200,100,300,200" href = "test2.html">
...
</Map>
Use Time:

Image map divides an image into several regions. Clicking on different regions will go to different pages.

Map element | map object

Coordinate data that contains the client image ing.

Member table

The following table listsMapObject. Click the label on the left to select the member type you want to view.

Tag attributes/attributes

Show: Tag attributes/attributes Action Set Event Method Style Tag attributes Attribute Description Canhavechildren Obtain the value indicating whether the object can contain sub-objects. Canhavehtml Obtain the value indicating whether the object can contain rich HTML tags. Class Classname Sets or obtains the class of the object. Dir Dir Sets or obtains the reading sequence of objects. Disabled Obtain the value indicating whether the user can interact with the object. Firstchild Obtains the reference of the first child object in the childnodes set of the object. ID ID Gets the string that identifies the object. Innerhtml Set or obtain the HTML in the start and end tags of the object. Innertext Set or obtain the text in the start and end labels of the object. Iscontenteditable Obtain the value indicating whether the user can edit the object content. Isdisabled Obtain the value indicating whether the user can interact with the object. Ismultiline Obtain the value indicating whether the object contains one or multiple rows. Istextedit Obtain whether to use this object to create a textrange object. Lang Lang Set or obtain the language to use. Language Language Set or obtain the language used for writing the current script. Lastchild Get this objectChildnodesThe reference of the last child object in the collection. Name Name Set or obtain the object name. Nextsibling Obtains the reference of the next sibling object of this object. Nodename Obtain the name of a specific node type. Nodetype Obtain the type of the required node. Nodevalue Set or obtain the node value. Offsetheight Obtains the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute. Offsetleft Obtains an object relative to a layout orOffsetparentThe left side of the calculation of the parent coordinate specified by the property. Offsetparent Gets the reference of the container Object Defining the offsettop and offsetleft attributes. Offsettop Obtains an object relative to a layout orOffsettopThe top position of the parent coordinate specified by the property. Offsetwidth Obtains the coordinates of an object relative to the layout or by the parent coordinate.OffsetparentThe width of the parent coordinate specified by the property. Outerhtml Sets or obtains the HTML format of the object and its content. Outertext Sets or retrieves the object text. Ownerdocument Set or obtain the document object associated with the node. Parentelement Obtain the parent object in the object hierarchy. Parentnode Obtain the parent object in the document hierarchy. Parenttextedit The obtained document level can be used to createTextrange. Previussibling Obtains the reference of the previous sibling object of this object. Readystate Obtains the current status of an object. Scopename Obtain the namespace defined for this element. Sourceindex Obtains the sequential position of an object in the source order, that is, the order in which the object appears in the all set of the document. Style Set an embedded style for this setting element. Tagname Obtains the tag name of an object. Tagurn Set or obtain the Uniform Resource Name (URN) specified in the namespace declaration ). Title Title Sets or obtains the contact information of an object (tooltip ). Uniqueid Obtain the unique identifier automatically generated by the object.

Tag attributes/attributes

Action

Action	Description
Clientcaps	Provides information about features supported by Internet Explorer and out-of-the-box installation methods.
Download	Download the file and notify a specified callback function after the download is complete.
Homepage	Contains information about the user homepage.
Httpfolder	Contains the script feature of the folder view that allows browsing and navigation.
Savefavorite	Allows objects to retain data in favorites.
Savehistory	Allows objects to retain data in the browser history.
Savesnapshot	Allows objects to save data on Web pages.
Userdata	Allows objects to retain data in user data.

Set

Set	Description
All	Returns a reference to the element set contained in an object.
Areas	Obtain the givenMapThe area object set defined by the object.
Attributes	Obtains the set of OBJECT tag attributes.
Behaviorurns	Returns a set of unified resource names (URN) strings that are appended to the element action.
Childnodes	Obtains the set of HTML elements and textnode objects that are directly inherited from a specified object.
Children	Obtains the set of DHTML objects directly inherited from objects.

Event

Event	Description
Onbeforeactivate	The object is triggered immediately before it is set to the current element.
Onbeforecut	Triggered on the source object before being deleted from the document in the central region.
Onbeforepaste	It is triggered on the target object before the selected area is pasted from the system clipboard to the document.
Onclick	Triggered when you left-click an object.
Oncut	Triggered on the source element when the object or selected area is deleted from the document and added to the system clipboard.
Ondblclick	Triggered when you double-click an object.
Ondrag	It is triggered continuously on the source object during the drag operation.
Ondragend	When you release the mouse after the drag operation is complete, it is triggered on the source object.
Ondragenter	It is triggered on the target element when you drag an object to a valid target.
Ondragleave	This is triggered when you move the mouse out of a valid drag target during the drag operation.
Ondragover	The object is continuously triggered on the target element when it is dragged across valid targets.
Ondragstart	Triggered when the user starts to drag the selected area of the text or the selected object on the source object.
Ondrop	When the mouse button is released during the drag operation, it is triggered on the target object.
Onfocusin	Triggered before the element is set to focus.
Onfocusout	Triggered immediately after the focus is moved to other elements.
Onhelp	This is triggered when you press F1 when the browser is the current window.
Onkeydown	Triggered when you press the keyboard button.
Onkeypress	Triggered when the user presses the literal key.
Onkeyup	Triggered when a user releases a keyboard key.
Onlosecapture	Triggered when an object loses Mouse capture.
Onmousedown	Triggered when you click an object with any mouse button.
Onmouseenter	This is triggered when you move the mouse pointer to an object.
Onmouseleave	Triggered when you move the mouse pointer out of the Object Boundary.
Onmousemove	Triggered when you hover the mouse over an object.
Onmouseout	Triggered when you move the mouse pointer out of the Object Boundary.
Onmouseover	This is triggered when you move the mouse pointer to an object.
Onmouseup	This is triggered when you release the mouse button when the mouse is over the object.
Onmousewheel	Triggered when the scroll wheel button is rotated.
Onpaste	It is triggered on the target object when you paste data to transfer data to the document from the system clipboard.
Onpropertychange	Triggered when the property of an object is changed.
Onreadystatechange	Triggered when the object status changes.
Onscroll	Triggered when you scroll the scroll bar of an object.
Onselectstart	Triggered when the object is to be selected.

Method

Method	Description
Addbehavior	Attaches an action to an element.
Appendchild	Append a child element to the object.
Applyelement	Make the element a child or parent element of other elements.
Attachevent	Binds a specified function to an event so that the function is called whenever the event is triggered on an object.
Clearattributes	Delete all tag attributes and values from an object.
Click	Trigger The onclick event to simulate a click.
Clonenode	Copy the reference to the object from the document level.
Componentfrompoint	Return the position of the object under the specified coordinate through a specific event.
Contains	Check whether the object contains the given element.
Detachevent	Unbind the specified function from the event, so that the function will not receive notifications when the event is triggered.
Dragdrop	Initialize the drag event.
Fireevent	Specifies the event of the trigger object.
Getadjacenttext	Returns an adjacent text string.
Getattribute	Obtains the attribute value of a specified tag.
Getattributenode	ObtainAttributeAttribute object referenced by the. Name attribute.
Getboundingclientrect	Obtains the objects bound to the specified textrectangle object set.
Getclientrects	Obtains the content of the description object or the rectangular set of the layout in the customer zone. Each rectangle describes a straight line.
Getelementsbytagname	Obtains an object set based on the specified element name.
Haschildnodes	Returns the value indicating whether the object has sub-objects.
Insertadjacentelement	Insert an element at the specified position.
Insertadjacenthtml	Insert the specified HTML text into the element at the specified position.
Insertadjacenttext	Insert the specified text at the specified position.
Insertbefore	Insert an element into the document hierarchy.
Mergeattributes	Copy all read/write label attributes to the specified element.
Normalize	Merge joiningTextnodeObject To generate a Common Document Object Model.
Releasecapture	Release the Mouse capture of objects in the current document.
Removeattribute	Deletes the specified tag attribute of an object.
Removeattributenode	Delete from objectAttributeObject.
Removebehavior	Separating ElementAction.
Removechild	Delete a subnode from an element.
Removenode	Delete an object from the document level.
Replaceadjacenttext	Replaces the adjacent text of an element.
ReplaceChild	Replace an existing child element with a new child element.
Replacenode	Replace objects with other elements.
Scrollintoview	Scroll the object to the visible range and arrange it to the top or bottom of the window.
Setattribute	Set the value of the specified tag attribute.
Setattributenode	SetAttributeThe object is part of the object.
Setcapture	Set the Mouse capture of the object that belongs to the current document.
Swapnode	Switch the location of two objects in the document hierarchy.

Style

Style label attributes	Style attributes	Description
Behavior	Behavior	Set or getDHTML Behavior.

Note

Image ing is an image with pre-defined areas that contain links to other documents or anchors. For example, you can create a user click on a pair of solar system images to go to the links to different planets.

MapThe object is referenced by the usemap attribute of the IMG element. The format is as follows:

 

MapThe element contains a set of area elements that define the linked areas in the image.

This element is available in HTML of Microsoft Internet Explorer 3.0 and in scripts of Internet Explorer 4.0.

This element is not rendered.

The label must be disabled for this element.

Example

The following example provides an image ing code for the solar system. This code is available inMapUse in elementAreaThe element, its coords value, and shape label attributes create a link from the image ing to a single planetary image. To return to the solar system image ing, you can click the back button.

Hideexample

<P>  <Map Name = "systemmap"> <Area shape = "rect" coords = "0, 0, 82,126 "href ="/Workshop/graphics/sun.gif "> <area shape =" circle "coords =" 90,58, 3 "href ="/Workshop/graphics/merglobe.gif "> <area shape =" circle "coords =" 124,58, 8 "href ="/Workshop/graphics/venglobe.gif "> <area shape =" circle "coords =" 162,58, 10 "href ="/Workshop/graphics/earglobe.gif "> <area shape =" circle "coords =" 203,58, 8 "href ="/Workshop/graphics/marglobe.gif "> <area shape =" poly "coords =,, 89, 64, 54 "href ="/Workshop/graphics/jupglobe.gif "> <area shape =" poly "coords =" 288, 19, 349,74, 367,105,337, 85,324, 85,307, 77,303, 60,307, 50 "href ="/Workshop/graphics/satglobe.gif "> <area shape =" poly "coords =", 39,, 57, 48, 393,44 "href ="/Workshop/graphics/Workshop "> <area shape =" poly "coords =" 445,38, 434,49, 431,53, 427,62, average, 72, 435,77, 445,92, 456,77, 463,72, 463,62, 462,53, 455,47 "href ="/Workshop/graphics/nepglobe.gif "> <area shape =" circle "coords =" 479,66, 3 "href ="/Workshop/graphics/pluglobe.gif "> </map>