Π’Π΅Π³ΠΈ area map – МоТно Π»ΠΈ Ρ‡Π΅Ρ€Π΅Π· CSS ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ-Ρ‚ΠΎ Π΅Ρ‰Ρ‘ ΠΎΡ„Ρ€ΠΌΠΈΡ‚ΡŒ map area? β€” Π₯Π°Π±Ρ€ Q&A

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π’Π΅Π³ | HTML справочник

HTML Ρ‚Π΅Π³ΠΈ

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅

Π’Π΅Π³ <map> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния изобраТСния-ΠΊΠ°Ρ€Ρ‚Ρ‹. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ°Ρ€Ρ‚Π° прСдставляСт собой ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΉ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <map> содСрТит ряд <area> Ρ‚Π΅Π³ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ области Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ-ΠΊΠ°Ρ€Ρ‚Π΅, Ρ‚.Π΅. ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ изобраТСния происходят ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Π΅ дСйствия, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, открываСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ страница с описаниСм Π΄Π°Π½Π½ΠΎΠ³ΠΎ участка изобраТСния.

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

Атрибуты

ΠΡ‚Ρ€ΠΈΠ±ΡƒΡ‚Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
namemapname

Π—Π°Π΄Π°Ρ‘Ρ‚ имя ΠΊΠ°Ρ€Ρ‚Π΅-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ. ЯвляСтся ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ, ΠΎΠ½ связан с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ usemap элСмСнта <img> (создаСт связь ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ).

Атрибутами Ρ‚Π΅Π³Π° <area> ΠΌΡ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ°ΠΊ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ области (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ coords), Ρ‚Π°ΠΊ ΠΈ Ρ‚ΠΈΠΏ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΉ Π½Π°ΠΌ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ shape):

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅
defaultΠ’Π΅ΡΡŒ Ρ€Π΅Π³ΠΈΠΎΠ½.
rectΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (x1,y1,x2,y2).
circleΠšΡ€ΡƒΠ³Π»Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (x,y,r- радиус).
polyΠœΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (x1,y1,x2,y2,…,xn,yn).

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ области с использованиСм систСмы ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Π΅ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ рисункС происходит ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π΅Π±-страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ эти Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ (ссылки Π½Π° Π’ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΡŽ):

<!DOCTYPE html>
<html>
<head>
<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использованиС Ρ‚Π΅Π³Π° <map></title>
</head>
	<body>
		<p>Π’Ρ‹Π±Π΅Ρ€ΠΈ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ:</p>
		<img src = "map.png" usemap = "#figuri" alt = "Доступны 4 Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ для Π²Ρ‹Π±ΠΎΡ€Π°" >
		<map name = "figuri" >
			<area shape = "rect" coords = "25,25,125,125" href = "red.html" alt = "ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚" >
			<area shape = "circle" coords = "200,75,50" href = "green.html" alt = "Π—Π΅Π»Ρ‘Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³." >
			<area shape = "poly" coords = "325,25,262,125,388,125" href = "blue.html" alt = "Π“ΠΎΠ»ΡƒΠ±ΠΎΠΉ Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ" >
			<area shape = "poly" coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href = "yellow.html" alt = "ЖСлтая Π·Π²Π΅Π·Π΄Π°" >
		</map>
	</body>
</html>

И Ρ‚Π°ΠΊ ΠΏΠΎ порядку, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ сдСлали Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

  • РазмСстили ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (Ρ‚Π΅Π³ <img>), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Π² послСдствии Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ составлСнии ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ-ΠΊΠ°Ρ€Ρ‚Ρ‹. Π’ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ usemap Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ имя изобраТСния-ΠΊΠ°Ρ€Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² элСмСнтС <map> (Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΡƒ).
  • Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ°Ρ€Ρ‚Ρƒ (Ρ‚Π΅Π³ <map>), Π·Π°Π΄Π°Π΅ΠΌ СдинствСнный ΠΈ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ элСмСнта name (имя ΠΊΠ°Ρ€Ρ‚Ρ‹). ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Ρ‚Π΅Π³Π° <img> ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ имя Π±Π΅Π· Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ, Π² ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ.
  • Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ‚Π΅Π³Π° <area>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ области Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ-ΠΊΠ°Ρ€Ρ‚Π΅:
    • ΠŸΠ΅Ρ€Π²ΠΎΠΉ ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ shape со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ «rect»), ΠΎΠ½Π° соотвСтствуСт Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ (ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π²Π° значСния ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ Π»Π΅Π²ΠΎΠΌΡƒ ΡƒΠ³Π»Ρƒ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Π²Π° значСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΏΡ€Π°Π²Ρ‹ΠΉ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡƒΠ³ΠΎΠ»).
    • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ shape со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ «circle»), ΠΎΠ½Π° соотвСтствуСт Π½Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ (ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ соотвСтствуСт ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌ ΠΏΠΎ оси x, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎ оси y, Ρ‚Ρ€Π΅Ρ‚Π΅Π΅ опрСдСляСт радиус).
    • Π§Ρ‚ΠΎ касаСтся Ρ‚Ρ€Π΅Ρ‚Π΅ΠΉ ΠΈ Ρ‡Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, Ρ‚ΠΎ ΠΎΠ½ΠΈ составлСны ΠΏΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΎΠΉ области (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ shape со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ «poly»). Π’Ρ‹ опрСдСляСтС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ количСство Ρ‚ΠΎΡ‡Π΅ΠΊ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, высчитываСтС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ этих Ρ‚ΠΎΡ‡Π΅ΠΊ (графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€) ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Π² Ρ‚Π°ΠΊΠΎΠΌ порядкС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈΡ… ΠΌΠΎΠ³ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ. На ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° (Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ рисунок):
      пСрвая
      Ρ‚ΠΎΡ‡ΠΊΠ° (ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x ΠΈ y Π²Π΅Ρ€ΡˆΠΈΠ½Ρ‹), вторая Ρ‚ΠΎΡ‡ΠΊΠ° (ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x ΠΈ y Π»Π΅Π²ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡƒΠ³Π»Π°) ΠΈ трСтяя Ρ‚ΠΎΡ‡ΠΊΠ° (ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x ΠΈ y ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡƒΠ³Π»Π°).

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ссли Ρƒ Ρ‚Π΅Π³Π° <area> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт гипСрссылку Π½Π° ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ, Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt (Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст для области).

Π’ HTML5, Ссли Ρƒ элСмСнта <map> ΡƒΠΊΠ°Π·Π°Π½ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id, Ρ‚ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ name.


Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ (кликабСльно) ΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ построСния изобраТСния-ΠΊΠ°Ρ€Ρ‚Ρ‹ Π² HTML.

ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ HTML 4.01 ΠΎΡ‚ HTML 5

Π’ HTML5, Ссли Ρƒ элСмСнта ΡƒΠΊΠ°Π·Π°Π½ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id, Ρ‚ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ name.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

map {
display: inline;
}

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ «Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹».

Атрибуты событий

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ «Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ событий».

HTML Ρ‚Π΅Π³ΠΈ

Π’Π΅Π³ | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

БпСцификация

HTML:3.24.015.0XHTML:1.01.1

ОписаниС

Π’Π΅Π³ <map> слуТит ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ для элСмСнтов <area>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ области для ΠΊΠ°Ρ€Ρ‚-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’Π°ΠΊΠΈΠ΅ области ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°ΡŽΡ‚ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ Π·ΠΎΠ½Ρ‹ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, ΡΠ²Π»ΡΡŽΡ‰ΠΈΠ΅ΡΡ ссылками Π½Π° HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹. ЦСль использования Ρ‚Π΅Π³Π° <map>Β β€” Π² связывании Ρ‚Π΅Π³Π° <img> с клиСнтской ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ. Π­Ρ‚Π° связь опрСдСляСтся ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° ΠΊΠ°ΠΊ Π² Ρ‚Π΅Π³Π΅ <img>, Π·Π°Π΄Π°Π²Π°Π΅ΠΌΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ usemap, Ρ‚Π°ΠΊ ΠΈ Π² Ρ‚Π΅Π³Π΅ <map>, устанавливаСмого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ name.

Бинтаксис

HTML
<map name="имя">
  <area Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹>
</map>
XHTML
<map name="имя">
  <area Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ />
</map>

Атрибуты

name
Имя ΠΊΠ°Ρ€Ρ‚Ρ‹-изобраТСния.

Π—Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³

ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»Π΅Π½.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Π’Π΅Π³ AREA</title>
  <style type="text/css">
   #title {
    line-height: 0; /* ИзмСняСм мСТстрочноС расстояниС */
   }
   #title img {
    border: none; /* Π£Π±ΠΈΡ€Π°Π΅ΠΌ Ρ€Π°ΠΌΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ изобраТСния */
   }
  </style>
 </head>
 <body> 
  <div><img src="images/ecctitle.png" 
    alt="ДСтский ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ†Π΅Π½Ρ‚Ρ€"><br>
   <img src="images/navigate.png" alt="Навигация ΠΏΠΎ сайту"
    usemap="#Navigation"></div>
   <p><map name="Navigation">
    <area shape="poly" coords="113,24,211,24,233,0,137,0" href="inform.html" alt="Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ">
    <area shape="poly" coords="210,24,233,0,329,0,307,24" href="activity.html" alt="ΠœΠ΅Ρ€ΠΎΠΏΡ€ΠΈΡΡ‚ΠΈΡ">
    <area shape="poly" coords="304,24,385,24,407,0,329,0" href="depart.html" alt="ΠžΡ‚Π΄Π΅Π»Π΅Π½ΠΈΡ">
    <area shape="poly" coords="384,24,449,24,473,0,406,0" href="techinfo.html" alt="ВСхничСская информация">
    <area shape="poly" coords="449,24,501,24,525,0,473,0" href="study.html" alt="ΠžΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅">
    <area shape="poly" coords="501,24,560,24,583,0,525,0" href="work.html" alt="Π Π°Π±ΠΎΡ‚Π°">
    <area shape="poly" coords="560,24,615,24,639,0,585,0" href="misk.html" alt="Π Π°Π·Π½ΠΎΠ΅">
   </map></p>
 </body>
</html>

ΠšΠ°Ρ€Ρ‚Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ β€” ВикипСдия

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» ΠΈΠ· Π’ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΠΈ β€” свободной энциклопСдии

ΠšΠ°Ρ€Ρ‚Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (Π°Π½Π³Π».Β image map, ΠΈΠ½ΠΎΠ³Π΄Π° сСнсорная ΠΊΠ°Ρ€Ρ‚Π° ΠΈΠ»ΠΈ графичСская ΠΊΠ°Ρ€Ρ‚Π°) β€” это графичСский ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ языка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML, связанный с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ содСрТащий ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ области (Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π·ΠΎΠ½Ρ‹), ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ происходит ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΌΡƒ URL (ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ javascript ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ дСйствия). ИспользованиС ΠΊΠ°Ρ€Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ позволяСт Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ нСсколько ссылок Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ.

Для добавлСния ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° Π²Π΅Π±-страницу ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠ°Ρ€Π½Ρ‹ΠΉ HTML-Ρ‚Π΅Π³ <map>, Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ «name» ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ указываСтся ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΊΠ°Ρ€Ρ‚Ρ‹. Π’Π½ΡƒΡ‚Ρ€ΡŒ Π½Π΅Π³ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π½Π΅ΠΏΠ°Ρ€Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ <area>, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… описываСт ΠΎΠ΄Π½Ρƒ Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π·ΠΎΠ½Ρƒ. Π—Π°Ρ‚Π΅ΠΌ Π² Ρ‚Π΅Π³ <img>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ с ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ, добавляСтся Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ usemap, содСрТащий имя привязываСмой ΠΊΠ°Ρ€Ρ‚Ρ‹. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒΡΡ со Π·Π½Π°ΠΊΠ° Ρ€Π΅ΡˆΡ‘Ρ‚ΠΊΠΈ. ΠŸΡ€ΠΈ этом Π² Ρ‚Π΅Π³Π΅ <img> Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ явно ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния.

map[ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ | ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄]

  • name β€” ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π£Π½ΠΈΠΊΠ°Π»Π΅Π½ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’ XHTML Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ name считаСтся ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΌ, ΠΈ вмСсто Π½Π΅Π³ΠΎ прСдлагаСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id [1].

area[ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ | ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄]

  • shape β€” Ρ„ΠΎΡ€ΠΌΠ° Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ области. ДопустимыС значСния: circle (ΠΎΠΊΡ€ΡƒΠΆΠ½ΠΎΡΡ‚ΡŒ), rect (ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ), poly (ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½).
  • alt β€” Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст области. Π‘Π»ΡƒΠΆΠΈΡ‚ лишь ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅ΠΌ для ссылки, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π° экран Π½Π΅ выводится.
  • title β€” позволяСт Π·Π°Π΄Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку для Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ области.
  • coords β€” ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ области. ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² пиксСлях ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΡƒΠ³Π»Π° изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ соотвСтствуСт Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ «0,0». ΠŸΠ΅Ρ€Π²ΠΎΠ΅ число являСтся ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ΠΎΠΉ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π²Ρ‚ΠΎΡ€ΠΎΠ΅ β€” ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Бписок ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ зависит ΠΎΡ‚ Ρ„ΠΎΡ€ΠΌΡ‹ области:
  • Для окруТности Π·Π°Π΄Π°ΡŽΡ‚ΡΡ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€Π° ΠΊΡ€ΡƒΠ³Π° ΠΈ радиус:
  • Для ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° β€” ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡƒΠ³Π»Π°:
<area coords="x1,y1,x2,y2">
  • Для ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Π° Π·Π°Π΄Π°ΡŽΡ‚ΡΡ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π΅Π³ΠΎ Π²Π΅Ρ€ΡˆΠΈΠ½:
<area coords="x1,y1,x2,y2,…,xN,yN">
ΠŸΡ€ΠΈ этом, Ρ‡Ρ‚ΠΎΠ±Ρ‹ «Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ» ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, пСрвая ΠΈ послСдняя ΠΏΠ°Ρ€Ρ‹ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ X ΠΈ Y Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ. Если эти значСния Π½Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΏΠ°Ρ€Ρƒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ.
  • href β€” ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ адрСс ссылки для области. ΠŸΡ€Π°Π²ΠΈΠ»Π° записи Ρ‚Π°ΠΊΠΈΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ для Ρ‚Π΅Π³Π° <А>.

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½ ΠΊΠΎΠ΄, ΡΠΎΠ·Π΄Π°ΡŽΡ‰ΠΈΠΉ ΠΊΠ°Ρ€Ρ‚Ρƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Π΅Ρ‘ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ:

<html>
    <body>
        <img usemap="#somemap" src="upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png">
        <map name="somemap">
            <area shape="rect" coords="6, 7, 140, 196" href="ru.wikipedia.org/wiki/ΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ">
            <area shape="circle" coords="239, 98, 92" href="ru.wikipedia.org/wiki/ΠšΡ€ΡƒΠ³">
            <area shape="poly" coords="386, 16, 344, 56, 350, 189, 385, 132, 489, 190, 496, 74" href="ru.wikipedia.org/wiki/ΠœΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ">
        </map>
    </body>
</html>

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ получится ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ (Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π·ΠΎΠ½Ρ‹ располоТСны Π½Π°Π΄ изобраТСниями Ρ„ΠΈΠ³ΡƒΡ€):

Figures for imagemap.png

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π°[ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ | ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄]

  1. ΠšΠ°Ρ€Ρ‚Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π·Π°Π΄Π°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ области ссылки. Учитывая, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹Π΅ изобраТСния ΠΏΠΎ своСй ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ссылку слоТной Ρ„ΠΎΡ€ΠΌΡ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ для указания гСографичСского Ρ€Π°ΠΉΠΎΠ½Π°, Π±Π΅Π· ΠΊΠ°Ρ€Ρ‚-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅ прСдставляСтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ.
  2. Π‘ ΠΎΠ΄Π½ΠΈΠΌ Ρ„Π°ΠΉΠ»ΠΎΠΌ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ β€” Π½Π΅ приходится Π·Π°Π±ΠΎΡ‚ΠΈΡ‚ΡŒΡΡ ΠΎ состыковкС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ².

НСдостатки[ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ | ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄]

  1. НСльзя ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… областСй. ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст позволяСт ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ рисункС ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΉ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Если ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ просмотр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‚ΠΎ Π² ΠΈΡ‚ΠΎΠ³Π΅ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ лишь ΠΎΠ΄ΠΈΠ½ пустой ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ.
  2. ΠŸΡ€ΠΈ слоТной Ρ„ΠΎΡ€ΠΌΠ΅ области ссылки увСличиваСтся объСм ΠΊΠΎΠ΄Π° HTML. ΠšΠΎΠ½Ρ‚ΡƒΡ€ состоит ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° прямых ΠΎΡ‚Ρ€Π΅Π·ΠΊΠΎΠ², для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ слСдуСт Π·Π°Π΄Π°Ρ‚ΡŒ Π΄Π²Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹, Π° ΠΎΠ±Ρ‰Π΅Π΅ количСство Ρ‚Π°ΠΊΠΈΡ… Ρ‚ΠΎΡ‡Π΅ΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ достаточно Π²Π΅Π»ΠΈΠΊΠΎ. БправСдливости Ρ€Π°Π΄ΠΈ, слСдуСт ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ слоТныС Ρ„ΠΎΡ€ΠΌΡ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ частным случаСм ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ достаточно Ρ€Π΅Π΄ΠΊΠΎ.
  3. Π‘ ΠΊΠ°Ρ€Ρ‚Π°ΠΌΠΈ-изобраТСниями нСльзя ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ эффСкты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ доступны ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π΅Π·Π°Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ рисунка Π½Π° Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹: эффСкт пСрСкатывания, частичная анимация, ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Π°Ρ оптимизация ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ для ΠΈΡ… быстрой Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ Ρ‚.Π΄.

HTML :: ΠšΠ°Ρ€Ρ‚Ρ‹-изобраТСния

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π½Π° Π²Π΅Π±-страницС ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС гипСрссылок, для этого Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ‚Π΅Π³ <img> ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³Π°ΠΌΠΈ гипСрссылки. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ любой области Π΄Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅Ρ‚ ΠΏΠΎ адрСсу, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠΌΡƒ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ href элСмСнта ‘a’. Однако ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±Π½ΠΎΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ области (части) ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈ Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅ изобраТСния являлись ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ гипСрссылками, Π²Π΅Π΄ΡƒΡ‰ΠΈΠΌΠΈ Π² ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Ρ€Π°Π·Π½Ρ‹Π΅ мСста. Π’ этом случаС приходится ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρƒ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΊΠ°ΠΊ Ρ€Π°Π· ΠΈ позволяСт Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π² сСбС сразу нСсколько гипСрссылок.

ΠšΠ°Ρ€Ρ‚Π°-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (ΠΎΡ‚ Π°Π½Π³Π». image map) – это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, содСрТащСС ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π·ΠΎΠ½Ρ‹, ΡΠ²Π»ΡΡŽΡ‰ΠΈΠ΅ΡΡ гипСрссылками.

ΠšΠ°Ρ€Ρ‚Ρ‹-изобраТСния ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π² Π΄Π²ΡƒΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ…: сСрвСрном ΠΈ клиСнтском, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°Π΄Π°ΡŽΡ‚ΡΡ, соотвСтствСнно, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ ismap ΠΈ usemap элСмСнта ‘img’. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ являСтся логичСским ΠΈ Π½Π΅ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, являясь ΠΈΠ½Π΄ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ, Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ – Π² качСствС значСния ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ имя ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта ‘map’, ΠΏΠ΅Ρ€Π΅Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ставится Π·Π½Π°ΠΊ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ. Рассмотрим эти Π΄Π²Π° Π²ΠΈΠ΄Π° графичСских ΠΊΠ°Ρ€Ρ‚ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅.

Π‘Π΅Ρ€Π²Π΅Ρ€Π½Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚Ρ‹-изобраТСния строятся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ: создаСтся элСмСнт ‘a’, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ адрСс ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹-ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, располоТСнной Π½Π° сСрвСрС, Π·Π°Ρ‚Π΅ΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ гипСрссылки ‘a’ располагаСтся элСмСнт ‘img’, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ указываСтся Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ismap. ΠŸΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π·ΠΎΠ½Π΅ Ρ‚Π°ΠΊΠΎΠ³ΠΎ изобраТСния, Π½Π° сСрвСр Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Ρ‹ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x ΠΈ y Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΌΡ‹ΡˆΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° изобраТСния. ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ΡΡ Π½Π° сСрвСр ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ GET, Ρ‚.Π΅. ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ΡΡ вмСстС с адрСсом сСрвСрной ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹-ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ href гипСрссылки, нСпосрСдствСнно Π² самом адрСсС ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΡΡŽΡ‚ΡΡ Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ послС Π·Π½Π°ΠΊΠ° вопроса. На сСрвСрС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°-ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ°Π΅Ρ‚, ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π² ΠΎΡ‚Π²Π΅Ρ‚. Рассмотрим ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΠΊΠΎΠ΄, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ β„–1. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ страницы Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° рис. β„–2.

<!DOCTYPE html>
<html>
<head>
	<!-- ΠŸΡ€ΠΈΠ²Ρ‹ΠΊΠ°Π΅ΠΌ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ слуТСбныС элСмСнты -->
	<meta charset="utf-8">	
	<base href="http://belarusweb.net/belarusweb_files/">
	<link rel="stylesheet" href="css/style_1.css">
	<script src="javascript/code_1.js"></script>
	<title>БСрвСрная ΠΊΠ°Ρ€Ρ‚Π°-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅</title>
</head>
<body>
	Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ &ndash; сСрвСрная ΠΊΠ°Ρ€Ρ‚Π°. <br>
	
	<!-- Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ΅Ρ€Π²Π΅Ρ€Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚Ρƒ -->
	<a href="php/test.php">
		<img src="images/html_images/example_4_3a.png" alt="map_2" ismap>
	</a> 
	
	<p>
		ΠšΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½ΡƒΠΆΠ½ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ <br>
		Π½Π° страницу Π΅Π΅ описания.
	</p>
</body>
</html>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ β„–1. Π€ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ сСрвСрной ΠΊΠ°Ρ€Ρ‚Ρ‹-изобраТСния

Рис. β„–2. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ страницы с использованиСм сСрвСрной ΠΊΠ°Ρ€Ρ‚Ρ‹-изобраТСния Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ

Если ΠΌΡ‹ ΠΊΠ»ΠΈΠΊΠ½Π΅ΠΌ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΡƒ, Π½Π° сСрвСр Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Ρ‹ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x ΠΈ y ΠΊΠ»ΠΈΠΊΠ°. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ Π² ΠΊΠ°ΠΊΠΎΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‚ Π΄Π°Π½Π½Ρ‹Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΈ послС ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π²Π΅Ρ€Π½Π΅Ρ‚ Π½Π°ΠΌ Π²Π΅Π±-страницу с описаниСм свойств ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°.

ΠšΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚Ρ‹-изобраТСния, Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ строятся с использованиСм элСмСнтов ‘map’ ΠΈ ‘area’. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ ‘map’ формируСтся ΠΏΠ°Ρ€Π½Ρ‹ΠΌ Ρ‚Π΅Π³ΠΎΠΌ <map> (ΠΎΡ‚ Π°Π½Π³Π». map – ΠΊΠ°Ρ€Ρ‚Π°). Он связываСтся с ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ‡Π΅Ρ€Π΅Π· свой Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ name. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° usemap (Π·Π½Π°ΠΊ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ ΠΏΡ€ΠΈ этом Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ) ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ элСмСнта ‘img’, Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‰Π΅Π³ΠΎ Π² Ρ€ΠΎΠ»ΠΈ клиСнтской ΠΊΠ°Ρ€Ρ‚Ρ‹-изобраТСния. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, элСмСнт ‘map’ являСтся ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌ для хранСния элСмСнтов ‘area’, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… опрСдСляСт Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρ‹-изобраТСния ΠΈ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΈΡ… Π² гипСрссылки. ЀормируСтся элСмСнт ‘area’ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° <area> (ΠΎΡ‚ Π°Π½Π³Π». area – ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Ρ€Π΅Π³ΠΈΠΎΠ½), Ρ‚.Π΅. являСтся пустым элСмСнтом (см. ΠΏΡ€ΠΈΠΌΠ΅Ρ€ β„–3).

<!DOCTYPE html>
<html>
<head>
	<!-- ΠŸΡ€ΠΈΠ²Ρ‹ΠΊΠ°Π΅ΠΌ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ слуТСбныС элСмСнты -->
	<meta charset="utf-8">	
	<base href="http://localhost/test/">
	<title>ΠšΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΠ°Ρ ΠΊΠ°Ρ€Ρ‚Π°-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅</title>
</head>
<body>
	Π­Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ &ndash; клиСнтская графичСская ΠΊΠ°Ρ€Ρ‚Π°. <br>
	
	<!-- ΠŸΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°Π΅ΠΌ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΊΠ°Ρ€Ρ‚Ρƒ map_3 (Π½Π΅ Π·Π°Π±Ρ‹Π²Π°Π΅ΠΌ ΠΏΡ€ΠΎ Π·Π½Π°ΠΊ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ) -->
	<img src="images/html_images/example_4_5a.png" alt="map_3" usemap="#map_3">
	
	<map name="map_3">
		<!-- Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ области ΠΊΠ°Ρ€Ρ‚Ρ‹ -->
		<area href="page_1.html" shape="circle" coords="70,75,50">
		
		<!-- Π­Ρ‚Π° ссылка откроСтся Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ -->
		<area href="page_2.html" target="_blank" shape="poly" 
		coords="130,125, 150,125, 140,25, 130,125">
		
		<area href="page_3.html" shape="rect" coords="170,125, 240,25">
	</map>
	
	<p>
		ΠšΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½ΡƒΠΆΠ½ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ <br>
		Π½Π° страницу Π΅Π΅ описания.
	</p>
</body>
</html>

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ β„–3. Π€ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ клиСнтской ΠΊΠ°Ρ€Ρ‚Ρ‹-изобраТСния

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ элСмСнт ‘area’ слуТит для создания гипСрссылок, Ρ‚ΠΎ ΠΎΠ½ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ всСми Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ элСмСнта ‘a’: href, target, download, rel, hreflang, type (ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ). ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ связан с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ слуТит для опрСдСлСния Π΅Π³ΠΎ Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π·ΠΎΠ½, поэтому ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Π΅Ρ‰Π΅ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ: alt, shape ΠΈ coords (ΠΎΡ‚ Π°Π½Π³Π». coordinates).

Атрибут alt Π·Π°Π΄Π°Π΅Ρ‚ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст для Π΄Π°Π½Π½ΠΎΠΉ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π·ΠΎΠ½Ρ‹ изобраТСния.

Атрибут shape опрСдСляСт Ρ„ΠΎΡ€ΠΌΡƒ Π΄Π°Π½Π½ΠΎΠΉ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ Π·ΠΎΠ½Ρ‹ изобраТСния, Π° coords Π·Π°Π΄Π°Π΅Ρ‚ для Π½Π΅Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π² пиксСлях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° изобраТСния, Π³Π΄Π΅ считаСтся, Ρ‡Ρ‚ΠΎ x=0px ΠΈ y=0px. Π’ качСствС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ shape ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚:

  • «circle» – ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ окруТности; Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x ΠΈ y Ρ†Π΅Π½Ρ‚Ρ€Π° окруТности, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΅Π΅ радиус, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, coords=»150, 200, 120″;
  • «default» – вся ΠΎΠ±Π»Π°ΡΡ‚ΡŒ изобраТСния;
  • «poly» (ΠΎΡ‚ Π°Π½Π³Π». polygon) – ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°; Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x, y Π΅Π³ΠΎ Π²Π΅Ρ€ΡˆΠΈΠ½, начиная с любой ΠΈ заканчивая ΠΎΠ±Ρ…ΠΎΠ΄ Π² стартовой Ρ‚ΠΎΡ‡ΠΊΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, coords=»50,70, 64,82, 85,82, 130,60, 50,70″;
  • «rect» (ΠΎΡ‚ Π°Π½Π³Π». rectangle) – ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π² Π²ΠΈΠ΄Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ°; Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x, y Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡƒΠ³Π»ΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, coords=»50,70, 154,213″.

Π’Π½Π΅ΡˆΠ½Π΅ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ отобраТСния страниц, содСрТащих ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ случаС, ΠΊΠ°ΠΊ сСрвСрная ΠΊΠ°Ρ€Ρ‚Π°-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ, ΠΊΠ°ΠΊ клиСнтская ΠΊΠ°Ρ€Ρ‚Π°, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ². Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ использования Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ практичСски ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. Π’ΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос, Π·Π°Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π΄Π²Π° Π²ΠΈΠ΄Π° ΠΊΠ°Ρ€Ρ‚? ВсС ΠΎΡ‡Π΅Π½ΡŒ просто ΠΈ зависит ΠΎΡ‚ ситуации. Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ нСбольшоС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, графичСскоС мСню, Ρ‚ΠΎ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ клиСнтская ΠΊΠ°Ρ€Ρ‚Π°-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ быстро загруТаСтся Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΈ отсутствуСт Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π· ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π·ΠΎΠ½Ρƒ ΠΏΠΎΡΡ‹Π»Π°Ρ‚ΡŒ запрос Π½Π° сСрвСр, Ρ‚Π΅ΠΌ самым Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ загруТая Π΅Π³ΠΎ ΠΈ заставляя ΠΆΠ΄Π°Ρ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚Π°. Однако, Ссли ΠΊΠ°Ρ€Ρ‚Π° ΠΎΡ‡Π΅Π½ΡŒ большая, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, прСдставляСт спутниковый снимок Π³ΠΎΡ€ΠΎΠ΄Π°, ΠΈ ΠΏΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π½Π° этом снимкС Π΄ΠΎΠ»ΠΆΠ½Π° Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ страница с описаниСм ΠΈ Ρ„ΠΎΡ‚ΠΎ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, Ρ‚ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π΅Π΅ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ становится ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ, Ρ‚.ΠΊ. Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°Ρ€Ρ‚ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΡ‡ΠΈΡΠ»ΡΡ‚ΡŒΡΡ ΠΌΠ΅Π³Π°Π±Π°ΠΉΡ‚Π°ΠΌΠΈ ΠΎΠ΄Π½ΠΈΡ… Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚.

Π’ ΠΊΠΎΠ½Ρ†Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ°Ρ€Ρ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ΄Π΅Π»Π΅Π½Π° Π½Π° Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π·ΠΎΠ½Ρ‹ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π½ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ ΠΈ Π½Π΅ΠΏΠΎΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ мСста. ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ Ρ‚Π°ΠΊΠΈΠΌ Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ областям Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚Ρ‹-изобраТСния ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ страницС нашСго ΡƒΡ‡Π΅Π±Π½ΠΎΠ³ΠΎ сайта β„–1.

Π£Ρ‡Π΅Π±Π½ΠΈΠΊ HTML 5. Π‘Ρ‚Π°Ρ‚ΡŒΡ «ΠŸΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΠ΅ изобраТСния-ΠΊΠ°Ρ€Ρ‚Ρ‹»

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ с Π’Π°ΠΌΠΈ рассмотрим ΠΊΠ°ΠΊ ΡΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΡƒΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ°Ρ€Ρ‚Ρƒ, ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ, ΠΌΡ‹ смоТСм ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΏΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ ссылкС. БоставлСниС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ-ΠΊΠ°Ρ€Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π΄ΠΊΠΎ Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ Π½Π° сайтах, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ этот процСсс довольно-Ρ‚Π°ΠΊΠΈ Ρ‚Ρ€ΡƒΠ΄ΠΎΠ΅ΠΌΠΊΠΈΠΉ, Π½ΠΎ Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚ΡŒ Π²Π°ΡˆΠΈΡ… посСтитСлСй Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠΎΠΉ для ссылок ΠΈ Ρƒ вас Π΅ΡΡ‚ΡŒ Π² распоряТСнии свободноС врСмя для самообразования, Ρ‚ΠΎ эта ΡΡ‚Π°Ρ‚ΡŒΡ для вас.

Π’Π΅Π³ <map> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния изобраТСния-ΠΊΠ°Ρ€Ρ‚Ρ‹. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ°Ρ€Ρ‚Π° прСдставляСт собой ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΉ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <map> содСрТит ряд <area> Ρ‚Π΅Π³ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ области Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ-ΠΊΠ°Ρ€Ρ‚Π΅, Ρ‚.Π΅. ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ изобраТСния происходят ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Π΅ дСйствия, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, открываСтся ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ страница с описаниСм Π΄Π°Π½Π½ΠΎΠ³ΠΎ участка изобраТСния.


Атрибут name элСмСнта <map> являСтся ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, ΠΎΠ½ связан с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ usemap элСмСнта <img> (создаСт связь ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΠΉ).


Атрибутами Ρ‚Π΅Π³Π° <area> ΠΌΡ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΠΊΠ°ΠΊ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ области (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ coords), Ρ‚Π°ΠΊ ΠΈ Ρ‚ΠΈΠΏ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΉ Π½Π°ΠΌ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ shape):

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅
defaultΠ’Π΅ΡΡŒ Ρ€Π΅Π³ΠΈΠΎΠ½.
rectΠŸΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (x1,y1,x2,y2).
circleΠšΡ€ΡƒΠ³Π»Π°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (x,y,r- радиус).
polyΠœΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (x1,y1,x2,y2,…,xn,yn).

Рис. 48 Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ области с использованиСм систСмы ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ ΠΏΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Π΅ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ рисункС происходит ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π΅Π±-страницы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ эти Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ (ссылки Π½Π° Π’ΠΈΠΊΠΈΠΏΠ΅Π΄ΠΈΡŽ):

<!DOCTYPE html>
<html>
<head>
<title>ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использованиС Ρ‚Π΅Π³Π° <map></title>
</head>
	<body>
		<p>Π’Ρ‹Π±Π΅Ρ€ΠΈ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ:</p>
		<img src = "map.png" usemap = "#figuri" alt = "Доступны 4 Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ для Π²Ρ‹Π±ΠΎΡ€Π°" >
		<map name = "figuri" >
			<area shape = "rect" coords = "25,25,125,125" href = "red.html" alt = "ΠšΡ€Π°ΡΠ½Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚" >
			<area shape = "circle" coords = "200,75,50" href = "green.html" alt = "Π—Π΅Π»Ρ‘Π½Ρ‹ΠΉ ΠΊΡ€ΡƒΠ³." >
			<area shape = "poly" coords = "325,25,262,125,388,125" href = "blue.html" alt = "Π“ΠΎΠ»ΡƒΠ±ΠΎΠΉ Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ" >
			<area shape = "poly" coords = "450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"  href = "yellow.html" alt = "ЖСлтая Π·Π²Π΅Π·Π΄Π°" >
		</map>
	</body>
</html>

И Ρ‚Π°ΠΊ ΠΏΠΎ порядку, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ сдСлали Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅:

  • РазмСстили ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (Ρ‚Π΅Π³ <img>), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Π² послСдствии Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ составлСнии ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ-ΠΊΠ°Ρ€Ρ‚Ρ‹. Π’ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ usemap Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ имя изобраТСния-ΠΊΠ°Ρ€Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² элСмСнтС <map> (Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΡƒ).
  • Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ°Ρ€Ρ‚Ρƒ (Ρ‚Π΅Π³ <map>), Π·Π°Π΄Π°Π΅ΠΌ СдинствСнный ΠΈ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ элСмСнта name (имя). ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Ρ‚Π΅Π³Π° <img> ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ имя Π±Π΅Π· Ρ€Π΅ΡˆΠ΅Ρ‚ΠΊΠΈ, Π² ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ.
  • Π Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ‚Π΅Π³Π° <area>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ области Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ-ΠΊΠ°Ρ€Ρ‚Π΅:
    • ΠŸΠ΅Ρ€Π²ΠΎΠΉ ΠΌΡ‹ Π·Π°Π΄Π°Π΅ΠΌ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ shape со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ «rect» ), ΠΎΠ½Π° соотвСтствуСт Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΏΠ΅Ρ€Π²ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ (ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π²Π° значСния ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ Π»Π΅Π²ΠΎΠΌΡƒ ΡƒΠ³Π»Ρƒ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Π²Π° значСния ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ ΠΏΡ€Π°Π²Ρ‹ΠΉ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΡƒΠ³ΠΎΠ»).
    • Π’Ρ‚ΠΎΡ€ΠΎΠΉ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ shape со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ «circle» ), ΠΎΠ½Π° соотвСтствуСт Π½Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ (ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ соотвСтствуСт ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌ ΠΏΠΎ оси x, Π° Π²Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎ оси y, Ρ‚Ρ€Π΅Ρ‚Π΅Π΅ опрСдСляСт радиус).
    • Π§Ρ‚ΠΎ касаСтся Ρ‚Ρ€Π΅Ρ‚Π΅ΠΉ ΠΈ Ρ‡Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΎΠΉ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹, Ρ‚ΠΎ ΠΎΠ½ΠΈ составлСны ΠΏΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΎΠΉ области (Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ shape со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ «poly» ). Π’Ρ‹ опрСдСляСтС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ количСство Ρ‚ΠΎΡ‡Π΅ΠΊ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, высчитываСтС ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ этих Ρ‚ΠΎΡ‡Π΅ΠΊ (графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€) ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Π² Ρ‚Π°ΠΊΠΎΠΌ порядкС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈΡ… ΠΌΠΎΠ³ ΡΠΎΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ. На ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° (Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ рисунок): пСрвая Ρ‚ΠΎΡ‡ΠΊΠ° (ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x ΠΈ y Π²Π΅Ρ€ΡˆΠΈΠ½Ρ‹), вторая Ρ‚ΠΎΡ‡ΠΊΠ° (ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x ΠΈ y Π»Π΅Π²ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡƒΠ³Π»Π°) ΠΈ трСтяя Ρ‚ΠΎΡ‡ΠΊΠ° (ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ x ΠΈ y ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡƒΠ³Π»Π°).

ΠžΠ±Ρ€Π°Ρ‰Π°ΡŽ Π’Π°ΡˆΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ссли Ρƒ Ρ‚Π΅Π³Π° <area> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ href, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ опрСдСляСт гипСрссылку Π½Π° ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ, Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ alt (Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст для области).

Π’ HTML5, Ссли Ρƒ элСмСнта <map> ΡƒΠΊΠ°Π·Π°Π½ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id, Ρ‚ΠΎ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ name.


Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ (кликабСльно) ΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ:

Рис. 49 ΠŸΡ€ΠΈΠΌΠ΅Ρ€ построСния изобраТСния-ΠΊΠ°Ρ€Ρ‚Ρ‹ Π² HTML.

Вопросы ΠΈ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΡŽ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π΅ΠΌΡ‹ ΠΏΡ€ΠΎΠΉΠ΄ΠΈΡ‚Π΅ практичСскоС Π·Π°Π΄Π°Π½ΠΈΠ΅:

  • Для выполнСния задания Π²Π°ΠΌ понадобится ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π°Ρ€Ρ…ΠΈΠ² ΠΈ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС Π°Ρ€Ρ…ΠΈΠ²Π° (HTML Ρ„Π°ΠΉΠ» ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅) Π² Π»ΡŽΠ±ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ Π½Π° вашСм ТСстком дискС:

  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ знания ΡΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΊΠ°Ρ€Ρ‚Ρƒ:

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ β„– 26.

Нюанс: для чистоты практичСского задания ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Ρ€ΡˆΠΈΠ½Ρƒ Π·Π²Π΅Π·Π΄Ρ‹ ΠΈ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ ΠΏΠΎ часовой стрСлкС. Π’ качСствС значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° href я ΡƒΠΊΠ°Π·Π°Π» # Π² этом случаС ΠΎΠ½Π° выступаСт ΠΊΠ°ΠΊ Π·Π°Π³Π»ΡƒΡˆΠΊΠ° (Π²Ρ‹ ΠΎΡΡ‚Π°Π΅Ρ‚Π΅ΡΡŒ Π½Π° Ρ‚ΠΎΠΉ ΠΆΠ΅ страницС), Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° Π»ΡŽΠ±ΡƒΡŽ страницу.

Подсказка: Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ изобраТСния Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π΄Π°ΠΆΠ΅ самый простой Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Paint, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Ρ‚ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ курсора. Π’Ρ‹ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π½Π° листок ΠΈΠ»ΠΈ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» ΠΈ внСситС значСния Π½Π° страницу.

Если Ρƒ Вас Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ трудности с Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ΠΌ задания, Ρ‚ΠΎ проинспСктируйтС ΠΊΠΎΠ΄ страницы, ΠΎΡ‚ΠΊΡ€Ρ‹Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΎΠΊΠ½Π΅ ΠΈ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅.


Image Map. ΠšΠ°Ρ€Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π£ Вас Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π·Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Π½ JavaScript. Π Π°Π·Ρ€Π΅ΡˆΠΈΡ‚Π΅ JavaScript для Ρ€Π°Π±ΠΎΡ‚Ρ‹ сайта!

ΠšΠ°Ρ€Ρ‚Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (Image Map) позволяСт ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°Ρ‚ΡŒ ссылки ΠΊ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π°ΠΌ изобраТСния. ЩСлкая ΠΌΡ‹ΡˆΡŒΡŽ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… частях изобраТСния,Β ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ Ρ‚ΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ ссылкС Π½Π° Ρ€Π°Π·Π½Ρ‹Π΅ Web-страницы.

ΠšΠ°Ρ€Ρ‚Π° изобраТСния опрСдСляСтся ΠΏΠ°Ρ€Π½Ρ‹ΠΌ Ρ‚Π΅Π³ΠΎΠΌ <map>…</map>. HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ нСсколько ΠΊΠ°Ρ€Ρ‚ изобраТСния, поэтому ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ присвоСно ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ имя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ опрСдСляСтся Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ name.

ΠšΠ°Ρ€Ρ‚Π° изобраТСния состоит ΠΈΠ· участков изобраТСния ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΈΠΌ ссылок. ΠžΠΏΠΈΡΡ‹Π²Π°Π΅Ρ‚ участок изобраТСния ΠΈ ставит Π΅ΠΌΡƒ Π² соотвСтствиС ссылку ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ Ρ‚Π΅Π³ <area>.

Атрибуты Ρ‚Π΅Π³Π° <area>
shapeΠžΡ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΡ области. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°:
rectΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ;
circleΠΊΡ€ΡƒΠ³;
polyΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ.
coordsΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ области.
Для ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° – ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡƒΠ³Π»ΠΎΠ².
Для ΠΊΡ€ΡƒΠ³Π° – ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€Π° ΠΈ радиус.
Для ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° – ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ всСх ΡƒΠ³Π»ΠΎΠ².
hrefАдрСс Ρ„Π°ΠΉΠ»Π°, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ дСлаСтся ссылка.
nohrefΠžΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ эта ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π΅ дСйствуСт. Π£Π΄ΠΎΠ±Π΅Π½ для вырСзания Π΄Ρ‹Ρ€.
altВСкстовоС описаниС области. Π‘Π»ΡƒΠΆΠΈΡ‚ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΉ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.
titleΠ’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ тСкст, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‰ΠΈΠΉΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΊΠΈ Π½Π° Π·Π°Π΄Π°Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ.

ΠšΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΠ·ΠΌΠ΅Ρ€ΡΡŽΡ‚ΡΡ Π² пиксСлях.

Начало отсчСта ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚ – это Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ» экрана, Ρ‚.Π΅.

XY
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌ областСй ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ
<!-- ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ 10 Π½Π° 10 пиксСлСй Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ изобраТСния -->
<area shape="rect" coords="0, 0, 9, 9">

<!-- ΠΊΡ€ΡƒΠ³ с радиусом Π² 5 пиксСлСй ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠΌ, располоТСнном Π² Ρ‚ΠΎΡ‡ΠΊΠ΅ (10, 10) -->
<area shape="circle" coords="10, 10, 5">

<!-- Ρ‚Ρ€Π΅ΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ с ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Π°ΠΌΠΈ Π²Π΅Ρ€ΡˆΠΈΠ½ (10, 50), (15, 20) ΠΈ (20, 50) -->
<area shape="poly" coords="10, 50, 15, 20, 20, 50">

Если Π΄Π²Π΅ описанных области Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°, Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ссылка, принадлСТащая ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ…. Π­Ρ‚Ρƒ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ситуации, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ ΠΌΡ‹ΡˆΡŒΡŽ Π½Π° Ρ‚ΠΎΡ‡ΠΊΠ΅, которая Π½Π΅ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· областСй ΠΊΠ°Ρ€Ρ‚Ρ‹, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ² послСднюю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΊΠ°ΠΊ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ высотой Π²ΠΎ всю ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΊΠ°Ρ€Ρ‚Ρƒ, Π² Ρ‚Π΅Π³ <img> Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ввСсти Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ usemap, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ имя ΠΊΠ°Ρ€Ρ‚Ρ‹ изобраТСния. ΠŸΠ΅Ρ€Π΅Π΄ этим ΠΈΠΌΠ΅Π½Π΅ΠΌ ставится Π·Π½Π°ΠΊ «#».

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Image Map
<map name="map0">
    <area shape="rect" coords="0, 0, 402, 42" href="#area1">
    <area shape="rect" coords="0, 42, 132, 204" href="#area2">
    <area shape="poly" coords="260, 96, 331, 42, 403, 96, 377, 180, 286, 180" href="#area4">
    <area shape="circle" coords="180, 100, 90" href="#area3">
    <area shape="rect" coords="0, 0, 402, 204" href="#area5">
</map>
<img src="imagemap.gif" border="0" usemap="#map0">

ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ°Ρ… Π½Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ области Π΄Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния мСняСтся Ρ†Π²Π΅Ρ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ тСкста:

ΠžΠ±Π»Π°ΡΡ‚ΡŒ 1
ΠžΠ±Π»Π°ΡΡ‚ΡŒ 2
ΠžΠ±Π»Π°ΡΡ‚ΡŒ 3
ΠžΠ±Π»Π°ΡΡ‚ΡŒ 4

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Image Map

ВСхнология Image Map примСняСтся Π² самых Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… областях. Однако Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ часто Π΅Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈ создании графичСских мСню, ΠΊΠΎΠ³Π΄Π° создаСтся ΠΎΠ΄Π½ΠΎ большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с элСмСнтами мСню, ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ участку изобраТСния прСдписываСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ΅ дСйствиС.

Π§ΠΈΡ‚Π°Ρ‚ΡŒ дальшС: SVG ΠΊΠ°Ρ€Ρ‚Ρ‹

HTML Ρ‚Π΅Π³ map | Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, синтаксис, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

ПослСднСС обновлСниС: 23.01.2011

Π’Π΅Π³ <map> (с Π°Π½Π³Π». ΠΊΠ°Ρ€Ρ‚Π°) β€” Ρ‚Π΅Π³-ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для создания ΠΊΠ°Ρ€Ρ‚Ρ‹-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.
Π‘Π»ΠΎΡ‡Π½Ρ‹ΠΉ элСмСнт.

Π’Π΅Π³ <map> опрСдСляСт ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΡƒΡŽ ΠΊΠ°Ρ€Ρ‚Ρƒ (ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ассоциирован с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ элСмСнтами (<img>, <object>, <input>). ΠšΠ°Ρ€Ρ‚Π° ассоциируСтся с элСмСнтом с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° usemap. Π’Π΅Π³ <map> ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π±Π΅Π· ассоциированного изобраТСния для ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌΠΎΠ² ΠΎΠ±Ρ‰Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° <map> ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ:

  • ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ элСмСнтов <area>. Π­Ρ‚ΠΈ элСмСнты Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ содСрТимого, Π½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ гСомСтричСскиС Ρ€Π΅Π³ΠΈΠΎΠ½Ρ‹ ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ гипСрссылки, ассоциированныС с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Ρ€Π΅Π³ΠΈΠΎΠ½ΠΎΠΌ
  • содСрТимоС уровня Π±Π»ΠΎΠΊΠ°. Π­Ρ‚ΠΎ содСрТимоС Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ <Ρ‚Π΅Π³ΠΈ a>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΡ†ΠΈΡ€ΡƒΡŽΡ‚ гСомСтричСскиС Ρ€Π΅Π³ΠΈΠΎΠ½Ρ‹ ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈ ссылки, ассоциированныС с ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Ρ€Π΅Π³ΠΈΠΎΠ½ΠΎΠΌ

Если Ρ‚Π΅Π³ <map> ΠΈΠΌΠ΅Π΅Ρ‚ смСшанноС содСрТимоС (ΠΈ Ρ‚Π΅Π³ΠΈ <area>, ΠΈ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты), Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, согласно спСцификации HTML 4.01, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты <area>.

Если Ρ€Π΅Π³ΠΈΠΎΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ, элСмСнт, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ Ρ€Π΅Π³ΠΈΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появился Ρ€Π°Π½ΡŒΡˆΠ΅ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Бинтаксис

<map></map>

Атрибуты

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π’ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Бобытия

class опрСдСляСт имя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ класса
dir опрСдСляСт Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ символов:
  • ltr β€” слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ
  • rtl β€” справа Π½Π°Π»Π΅Π²ΠΎ
id ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€
lang опрСдСляСт язык ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°
name имя ΠΊΠ°Ρ€Ρ‚Ρ‹ изобраТСния. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, ΠΊΠ°ΠΊ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° usemap Ρ‚Π΅Π³Π° <img>
onblur потСря фокуса элСмСнтом
onclick Ρ‰Π΅Π»Ρ‡ΠΎΠΊ Π½Π° элСмСнтС
ondblclick Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ Ρ‰Π΅Π»Ρ‡ΠΎΠΊ Π½Π° элСмСнтС
onfocus ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ фокуса элСмСнтом
onkeydown Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ клавиши, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ фокус
onkeypress Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΈ освобоТдСнии клавиши, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ фокус
onkeyup освобоТдСниС Ρ€Π°Π½Π΅Π΅ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ клавиши, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ фокус
onmousedown Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ фокус
onmousemove Π΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ указатСля ΠΌΡ‹ΡˆΠΈ, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ фокус
onmouseout смСщСниС указатСля ΠΌΡ‹ΡˆΠΈ с элСмСнта
onmouseover ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт
onmouseup освобоТдСниС Ρ€Π°Π½Π΅Π΅ Π½Π°ΠΆΠ°Ρ‚ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΡ‹ΡˆΠΈ, ΠΊΠΎΠ³Π΄Π° элСмСнт ΠΈΠΌΠ΅Π΅Ρ‚ фокус
style Π·Π°Π΄Π°Π΅Ρ‚ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй
title Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

ΠΊΠΎΠ΄:

<map name="myMap">
<area nohref="nohref" alt="Ρ‚ΡƒΡ‚ ссылки Π½Π΅Ρ‚" title="Ρ‚ΡƒΡ‚ ссылки Π½Π΅Ρ‚" shape="circle" coords="70,138,39"/>
<area href=../../../manuals/html/tags/"#" alt="БСрая Π·ΠΎΠ½Π°" title="БСрая Π·ΠΎΠ½Π°" shape="rect" coords="20,10,118,188"/>
<area href=../../../manuals/html/tags/"#" alt="ЖСлтая Π·ΠΎΠ½Π°" title="ЖСлтая Π·ΠΎΠ½Π°" shape="poly" coords="175,30,270,100,200,150"/>
</map>
<img src=../../../manuals/html/tags/"map.png" alt="ΠΊΠ°Ρ€Ρ‚Π°" usemap="#myMap"/>

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ использованию

  • Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ обязатСлСн (</map>)
  • Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ id являСтся ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ
  • рСкомСндуСтся ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρƒ графичСской ΠΊΠ°Ρ€Ρ‚Π΅ для Ρ‚Π΅Ρ… случаСв, ΠΊΠΎΠ³Π΄Π° Π³Ρ€Π°Ρ„ΠΈΠΊΠ° нСдоступна ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π΅Ρ‘ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ
  • Π½Π΅ рСкомСндуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρƒ-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² качСствС основной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΈΠ·-Π·Π° слабой ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ старыми ΠΈ голосовыми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ

Π’Π΅Π³ <area> β€” элСмСнт уровня Π±Π»ΠΎΠΊΠ°, Ρ‚.Π΅. содСрТимоС Ρ‚Π΅Π³Π° всСгда начинаСтся с Π½ΠΎΠ²ΠΎΠΉ строки. ПослС Ρ‚Π΅Π³Π° Ρ‚Π°ΠΊΠΆΠ΅ добавляСтся пСрСнос строки.

Π’Π²ΠΎΠΉ ΠΊΠΎΠ΄:
<html> <head> <title></title> </head> <body> <div> <map name=»myMap»> <area alt=»Ρ‚ΡƒΡ‚ ссылки Π½Π΅Ρ‚» title=»Ρ‚ΡƒΡ‚ ссылки Π½Π΅Ρ‚» coords=»70,138,39″ shape=»circle» nohref=»nohref»/> <area alt=»Π‘Срая Π·ΠΎΠ½Π°» title=»Π‘Срая Π·ΠΎΠ½Π°» coords=»20,10,118,188″ shape=»rect» href=»#»/> <area alt=»Π–Слтая Π·ΠΎΠ½Π°» title=»Π–Слтая Π·ΠΎΠ½Π°» coords=»175,30,270,100,200,150″ shape=»poly» href=»#»/> </map> <img alt=»ΠΊΠ°Ρ€Ρ‚Π°» src=»http://www.HTML-CSS-PHP-JS.RU/assets/images/html-tags/map.png» usemap=»#myMap» /> </div> </body> </html> Π‘Π΄Π΅Π»Π°ΠΉ ΠΊΠΎΠ΄ ΠΈ ΠΆΠΌΠΈ Ρ‚ΡƒΡ‚

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:
большой полигон

По Ρ‚Π΅ΠΌΠ΅

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *