HTML 'map' Tag/Element

Q

What Is a "map" Tag/Element?

✍: FYIcenter.com

A

A "map" element is special inline element that you to define map entries to be used by image maps. Here are some basic rules on "map" elements:

"map" elements are inline elements.
"map" elements can not have text contents.
"map" elements should have "area" elements as sub-elements.
A "map" element requires the "id" attribute to be specified.
A "map" element should have the "name" attribute specified a reference name to be used by an image map with the "usemap" attribute.
Each "area" element inside a "map" element defines a map entry for the browser to look up based on the mouse coordinates on the image map .

Here is a tutorial example of an client-side image map with map entries defined:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Image Map Entries</title>
 </head>
 <body>
  <h4>Inline Images</h4>
  <p style="background-color: #eeeeee; padding: 8px;">
   This is a client-side image map test. 
   Click this image <img src="/moonrise.jpg" alt="Moonrise"
    width="69" height="91" ismap="ismap" usemap="#mymap"/>
   to see what happens. Use browser back button to come 
   back.
   <map id="map1" name="mymap">
    <area href="http://localhost/upperLeft" 
     alt="Upper Left" coords="1,1,35,45"/>
    <area href="http://localhost/upperRight" 
     alt="Upper Right" coords="36,1,69,45"/>
    <area href="http://localhost/lowerLeft" 
     alt="Lower Left" coords="1,46,35,91"/>
    <area href="http://localhost/lowerRight" 
     alt="Lower Right" coords="36,46,69,91"/>
   </map>
  </p>
 </body>
</html>

If you save the above document as image_map_entries.html, and view it with Internet Explorer, you will see an image embedded in a paragraph. Click different parts of the image to see what happens.

⇒ HTML 'div' and 'span' elements

⇐ Client-Side Image Maps in HTML

⇑ HTML Inline Images and Image Maps

⇑⇑ HTML Tutorials

2017-03-22, ∼1653🔥, 0💬

Nested HTML 'div' Elements
Can "div" Elements Be Nested? Can "div" elements be nested? The answer is yes. In fact, nested "div" elements provides you more flexibilities to specify CSS properties at different levels. Here is a tutorial example of nested "div" elements: <?xml version="1.0" ?> <!DOCTYPE html... 2017-03-11, ∼2263🔥, 0💬

Client-Side Image Maps in HTML
What Is a Client-Side Image Map? A client-side image map is an image defined with the "ismap" attribute and the "usemap" attribute. When a client-side image map is clicked in a browser window, the browser will take mouse coordinates and map them to a predefined image map entry, to retrieve a target ... 2017-03-22, ∼2134🔥, 0💬

Animated Images in HTML
What Is an Animated Image? An animated image is a special image file saved in animated GIF format. When an animated image is displayed in a browser window, multiple image frames will be displayed in sequence to form a simple animation. Here is a tutorial example with a server-side image map: &lt... 2017-03-22, ∼1972🔥, 0💬

Using HTML 'div' Elements with CSS Properties
How To Use "div" Elements to Change CSS Properties? As elements containers, "div" elements are perfect places to set CSS properties which will be applied to all elements in the container. Here is a tutorial example of how to set CSS properties on "div" elements: <?xml version="1.0" ?> ... 2017-03-11, ∼1935🔥, 0💬

HTML 'div' Tag/Element
What Is a "div" Tag/Element? A "div" element is a block element that you can use a container of flow elements (flow elements are really the superset of both inline elements and block elements). By default, "div" elements will be treated as paragraphs by most browsers. Here are basic rules about an "... 2017-03-11, ∼1887🔥, 0💬

HTML 'div' and 'span' elements
Where to find tutorials of introduction to HTML "div" and "span" elements? Here is a list of tutorials to answer many frequently asked questions compiled by FYIcenter.com team in introduction to HTML "div" and "span" elements. Clear answers are provided with tutorial exercises on basic usages of "di... 2017-03-22, ∼1777🔥, 0💬

Reducing the Display Size of an Image in HTML
How To Reduce the Display Size of an Image? If an image embedded inline is too big when displayed in a browser, you can use "width" and "height" attributes to reduce the image's display size. The display width and height should be proportional to the actual width and height of the image. Otherwise, ... 2017-03-27, ∼1763🔥, 0💬

Floating HTML 'div' Elements
Can "div" Elements Be Floated? Can "div" elements be floated? The answer is yes. If you want to float a "div" block, you can use the "float" CSS property. Here is a tutorial example of floated "div" elements: <?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 St... 2017-03-11, ∼1760🔥, 0💬

Floating an Image to the Right Side in HTML
How To Float an Image to the Right Side? If you want to float an image to the right side of the paragraph instead of inline within a text line, you have to use the CSS property "float" to do this. The "float" property takes two values: "float: left" - Specifies that the image to be floated to the le... 2017-03-27, ∼1721🔥, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.