- •Introduction in html 3
- •Special symbols and comments.
- •Tables in html
- •«Lists as a tool for structuring»
- •Create of lists
- •Html List Tags
- •Ordered Lists
- •Unordered Lists
- •Circle:
- •Html Description Lists
- •Example
- •«Types of hyperlinks. The concept of the url and using them »
- •« Creating frames. Setting the frame»
- •«The concept of media files»
- •« Navigation maps »
- •References
« Navigation maps »
The <MAP> tag is used to define a client-side image-map. An image-map is an image with clickable areas.
The required name attribute of the <MAP> element is associated with the <IMG>'s usemap attribute and creates a relationship between the image and the map.
The <MAP> element contains several of <AREA> elements, that defines the clickable areas in the image map.
The <MAP> tag has attributes:
Attribute |
Value |
Description |
name |
mapname |
Required. Specifies the name of an image-map |
The <AREA> element is always nested inside a <MAP> tag. The <AREA> tag has not closing tag.
The <AREA> tag has attributes:
Attribute |
Value |
Description |
alt |
text |
Specifies an alternate text for the area. Required if the HREF attribute is present |
coords |
coordinates |
Specifies the coordinates of the area |
href |
URL |
Specifies the hyperlink target for the area |
shape |
default rect circle poly |
Specifies the shape of the area |
target |
_blank _parent _self _top framename |
Specifies where to open the target URL |
Attributes of COОRDS parameter:
Value |
Description |
x1,y1,x2,y2 |
Specifies the coordinates of the left, top, right, bottom corner of the rectangle (for shape="rect") |
x,y,radius |
Specifies the coordinates of the circle center and the radius (for shape="circle") |
x1,y1,x2,y2,..,xn,yn |
Specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon (for shape="poly") |
Examples
Create navigation map with name ImageMap:
<MAP NAME="ImageMap">
<AREA HREF="Содержание.html" SHAPE="rect" COORDS="0,0,70,140" ALT="Левая половинка">
<AREA HREF="фильмы.html" SHAPE="poly" COORDS="71,0,80,95,140,130" ALT="Правый многоугольник">
</MAP>
<BODY>
Attach the map to the image:
<IMG SRC="sakura.jpg" USEMAP="#ImageMap" HEIGHT="140" WIDTH="140" BORDER="0">
</BODY>
References
Томас А. Паулл Полное руководство по HTML- Минск 2001 г.
Матросов А., Сергеев А., Чаунин М. HTML 4.0- Санкт-Петербург, из. BHV (в подлиннике)
Будилов В.А. Практическое занятие по HTML- Санкт-Петербург 2001 г. (краткий курс)
В.Холмогоров. Основы Веб-мастерства. – Питер, 2010.
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/default.asp
www.youtube.com