HTML/CSS/Images/Image map
Содержание
- 1 Client-side Image Map Example
- 2 Client-side Image Map Test
- 2.1 Creating and Using Image Maps
- 2.2 HTML Image map
- 2.3 Image map area
- 2.4 <img src =... usemap = "#id"> indicates that the specified image map is used with this image
- 2.5 shape = "circle" indicates a circular area with the given center and radius
- 2.6 shape = "rect" indicates a rectangular area, with coordinates for the upper-left and lower-right corners
- 2.7 value "poly" creates a hotspot in the shape of a polygon, defined by coords
Client-side Image Map Example
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <TITLE>Client-side Image Map Example</TITLE> </HEAD> <BODY>
Client-side Image Map Test
<IMG SRC="http://www.wbex.ru/style/logo.png" USEMAP="#shapes" BORDER="0" WIDTH="400" HEIGHT="200">
<MAP NAME="shapes"> <AREA SHAPE="RECT" COORDS="6,50,140,143" HREF="rectangle.htm" ALT="Rectangle"> <AREA SHAPE="CIRCLE" COORDS="195,100,50" HREF="circle.htm" ALT="Circle"> <AREA SHAPE="POLY" COORDS="255,122,306,53,334,62,338,0,388,77,374,116,323,171,255,122" HREF="polygon.htm" ALT="Polygon"> <AREA SHAPE="default" HREF="defaultreg.htm"> </MAP> </BODY> </HTML>
</source>
Creating and Using Image Maps
<source lang="html4strict">
<?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 xmlns = "http://www.w3.org/1999/xhtml">
<body> <map id = "picture"> <area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /> <area shape = "poly" alt = "E-mail the Deitels" coords = "162,25,154,39,158,54,169,51,183,39,161,26" href = "mailto:d@d.ru" /> <area href = "mailto:d@d.ru" shape = "circle" coords = "100,36,33" alt = "" /> </map> <img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /> </body>
</html>
</source>
HTML Image map
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> </head> <body> <map name="Map" id="Map"> <area shape="rect" coords="118,192,203,249" href="http://www.wbex.ru" alt="" /><area shape="circle" coords="50,70,40" href="http://www.wbex.ru" alt="" /> <area shape="poly" coords="159,145,115,96,115,39,160,21,205,40,206,103" href="http://www.wbex.ru" alt="" /> </map> <img src="http://www.wbex.ru/style/logo.png" alt="" width="300" height="272" usemap="#Map" ismap="ismap" /> </body> </html>
</source>
Image map area
<source lang="html4strict">
<?xml version"1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <style type="text/css"> img {border-style: none} </style> <title>Image Maps</title> </head> <body>
<map id="map" name="map"> <area shape="rect" href="square.html" coords="20,27 97,76" alt="" /> <area shape="circle" href="round.html" coords="167,51 35" alt="" /> </map> <img usemap="#map" src="imagemap.gif" alt=""/>
</body>
</html>
</source>
<img src =... usemap = "#id"> indicates that the specified image map is used with this image
<source lang="html4strict">
<?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 xmlns = "http://www.w3.org/1999/xhtml">
<body> <map id = "picture"> <area href = "mailto:l@l.ru" shape = "circle" coords = "100,36,33" alt = "" /> </map> <img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /> </body>
</html>
</source>
shape = "circle" indicates a circular area with the given center and radius
<source lang="html4strict">
<?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 xmlns = "http://www.w3.org/1999/xhtml">
<body> <map id = "picture"> <area href = "mailto:d@q.ru" shape = "circle" coords = "100,36,33" alt = "" /> </map> <img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /> </body>
</html>
</source>
shape = "rect" indicates a rectangular area, with coordinates for the upper-left and lower-right corners
<source lang="html4strict">
<?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 xmlns = "http://www.w3.org/1999/xhtml">
<body> <map id = "picture"> <area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /> <area href = "mailto:d@l.ru" shape = "circle" coords = "100,36,33" alt = "" /> </map> <img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /> </body>
</html>
</source>
value "poly" creates a hotspot in the shape of a polygon, defined by coords
<source lang="html4strict">
<?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 xmlns = "http://www.w3.org/1999/xhtml">
<body> <map id = "picture"> <area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /> <area shape = "poly" alt = "E-mail the Deitels" coords = "162,25,154,39,158,54,169,51,183,39,161,26" href = "mailto:d@d.ru" /> <area href = "mailto:d@l.ru" shape = "circle" coords = "100,36,33" alt = "" /> </map> <img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /> </body>
</html>
</source>