HTML/CSS/Images/Image map

Материал из Web эксперт
Перейти к: навигация, поиск

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>
Источник — «http://www.wbex.ru/index.php?title=HTML/CSS/Images/Image_map&oldid=5121»