HTML/CSS/Images/Image map

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

Client-side Image Map Example

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>Client-side Image Map Example</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Client-side Image Map Test</H1>
<DIV ALIGN="CENTER">
<IMG SRC="http://www.wbex.ru/style/logo.png" USEMAP="#shapes" BORDER="0" WIDTH="400" HEIGHT="200">
</DIV>
<!-- Start of Client Side Image Map -->
<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>



Creating and Using Image Maps

 
<?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>



HTML Image map

 

<!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>



Image map area

 
<?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>
    <p>
      <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=""/>
    </p>
  </body>
</html>



<img src =... usemap = "#id"> indicates that the specified image map is used with this image

 

<?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>



shape = "circle" indicates a circular area with the given center and radius

 

<?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>



shape = "rect" indicates a rectangular area, with coordinates for the upper-left and lower-right corners

 
<?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>



value "poly" creates a hotspot in the shape of a polygon, defined by coords

 

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