http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FImages%2FImage_map
HTML/CSS/Images/Image map - История изменений
2026-04-04T21:50:15Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Images/Image_map&diff=5120&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Images/Image_map&diff=5121&oldid=prev
Admin: 1 версия
2010-05-26T08:16:28Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Client-side Image Map Example==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><br />
<HTML><br />
<HEAD><br />
<TITLE>Client-side Image Map Example</TITLE><br />
</HEAD><br />
<BODY><br />
<H1 ALIGN="CENTER">Client-side Image Map Test</H1><br />
<DIV ALIGN="CENTER"><br />
<IMG SRC="http://www.wbex.ru/style/logo.png" USEMAP="#shapes" BORDER="0" WIDTH="400" HEIGHT="200"><br />
</DIV><br />
<!-- Start of Client Side Image Map --><br />
<MAP NAME="shapes"><br />
<AREA SHAPE="RECT" COORDS="6,50,140,143" HREF="rectangle.htm" ALT="Rectangle"><br />
<AREA SHAPE="CIRCLE" COORDS="195,100,50" HREF="circle.htm" ALT="Circle"><br />
<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"><br />
<AREA SHAPE="default" HREF="defaultreg.htm"><br />
</MAP><br />
</BODY><br />
</HTML><br />
</source><br />
<br />
<br />
<br />
<br />
==Creating and Using Image Maps==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<body><br />
<map id = "picture"><br />
<area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /><br />
<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" /><br />
<area href = "mailto:d@d.ru" shape = "circle" coords = "100,36,33" alt = "" /><br />
</map><br />
<img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==HTML Image map==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
</head><br />
<body><br />
<map name="Map" id="Map"><br />
<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="" /><br />
<area shape="poly" coords="159,145,115,96,115,39,160,21,205,40,206,103" href="http://www.wbex.ru" alt="" /><br />
</map><br />
<img src="http://www.wbex.ru/style/logo.png" alt="" width="300" height="272" usemap="#Map" ismap="ismap" /><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Image map area==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version"1.0" encoding="UTF-8"?><br />
<!DOCTYPE html<br />
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<style type="text/css"><br />
img {border-style: none}<br />
</style><br />
<title>Image Maps</title><br />
</head><br />
<body><br />
<p><br />
<map id="map" name="map"><br />
<area shape="rect" href="square.html" coords="20,27 97,76" alt="" /><br />
<area shape="circle" href="round.html" coords="167,51 35" alt="" /><br />
</map><br />
<img usemap="#map" src="imagemap.gif" alt=""/><br />
</p><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==<img src =... usemap = "#id"> indicates that the specified image map is used with this image==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version = "1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<body><br />
<map id = "picture"><br />
<area href = "mailto:l@l.ru" shape = "circle" coords = "100,36,33" alt = "" /><br />
</map><br />
<img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==shape = "circle" indicates a circular area with the given center and radius==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version = "1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<body><br />
<map id = "picture"><br />
<area href = "mailto:d@q.ru" shape = "circle" coords = "100,36,33" alt = "" /><br />
</map><br />
<img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==shape = "rect" indicates a rectangular area, with coordinates for the upper-left and lower-right corners==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<body><br />
<map id = "picture"><br />
<area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /><br />
<area href = "mailto:d@l.ru" shape = "circle" coords = "100,36,33" alt = "" /><br />
</map><br />
<img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==value "poly" creates a hotspot in the shape of a polygon, defined by coords==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<?xml version = "1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<body><br />
<map id = "picture"><br />
<area href = "form.html" shape = "rect" coords = "2,123,54,143" alt = "Go to the feedback form" /><br />
<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" /><br />
<area href = "mailto:d@l.ru" shape = "circle" coords = "100,36,33" alt = "" /><br />
</map><br />
<img src = "http://www.wbex.ru/style/logo.png" width = "200" height = "144" alt = "logo" usemap = "#picture" /><br />
</body><br />
</html><br />
</source></div>
Admin