Атрибут href тега <area> — адреса області карти
Атрибут href визначає URL-адресу сторінки, на яку вказує посилання.
Якщо атрибут href відсутній, то тег <area> не є гіперпосиланням.
Загальний опис
автор: NagarD
Синтаксис
<area href="URL"> Атрибут href може отримувати єдине значення:
-
URL -
URL-адреса посилання. Можливі значення:
- Абсолютний URL - вказує на інший сайт (наприклад, Href = "http://www.example.com/default.htm")
- Відносний URL - вказує на файл в межах веб-сайту (наприклад, href = "default.htm")
- Посилання на елемент із зазначеним ідентифікатором в межах сторінки (наприклад, href = "# top")
- Інші протоколи (наприклад, https: //, ftp: //, mailto:, file:, і т.д ..)
- Сценарій (наприклад href = "JavaScript:alert('Hello');")
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
href перетворює область карти на справжнє посилання: клацни Сонце чи планету — якір у адресі зміниться. Область без href була б просто «мертвою» зоною.
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Crect width='300' height='120' fill='%23001b33'/%3E%3Ccircle cx='40' cy='60' r='55' fill='gold'/%3E%3Ccircle cx='180' cy='60' r='14' fill='%23b3b3b3'/%3E%3Ccircle cx='255' cy='60' r='22' fill='%23e0a96d'/%3E%3C/svg%3E" width="300" height="120" alt="Сонячна система" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,100,120" href="#sun" alt="Сонце" title="Сонце">
<area shape="circle" coords="180,60,16" href="#mercury" alt="Меркурій" title="Меркурій">
<area shape="circle" coords="255,60,24" href="#venus" alt="Венера" title="Венера">
</map>Зліва класична карта: адреса ділянки живе в href, форма — в coords. Праворуч те саме завдання без карти — звичайні посилання поверх картинки. Наведіть по черзі на обидві: у карти видно лише курсор, у посилань — підсвічену зону, бо їх можна стилізувати й вони масштабуються разом із картинкою.
HTML
<div class="pair">
<div>
<h3>Карта зображення</h3>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='140'%3E%3Crect%20width='150'%20height='140'%20fill='%234a6fa5'/%3E%3Crect%20x='150'%20width='150'%20height='140'%20fill='%236f4aa5'/%3E%3Ctext%20x='75'%20y='76'%20text-anchor='middle'%20font-family='sans-serif'%20font-size='15'%20fill='white'%3EHTML%3C/text%3E%3Ctext%20x='225'%20y='76'%20text-anchor='middle'%20font-family='sans-serif'%20font-size='15'%20fill='white'%3ECSS%3C/text%3E%3C/svg%3E"
width="300" height="140" alt="Дві половини: HTML і CSS" usemap="#demo">
<map name="demo">
<area shape="rect" coords="0,0,150,140" href="/html/tags" alt="Теґи HTML" title="/html/tags">
<area shape="rect" coords="150,0,300,140" href="/css/properties" alt="Властивості CSS" title="/css/properties">
</map>
</div>
<div>
<h3>Посилання поверх картинки</h3>
<div class="hotspots">
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='140'%3E%3Crect%20width='150'%20height='140'%20fill='%234a6fa5'/%3E%3Crect%20x='150'%20width='150'%20height='140'%20fill='%236f4aa5'/%3E%3Ctext%20x='75'%20y='76'%20text-anchor='middle'%20font-family='sans-serif'%20font-size='15'%20fill='white'%3EHTML%3C/text%3E%3Ctext%20x='225'%20y='76'%20text-anchor='middle'%20font-family='sans-serif'%20font-size='15'%20fill='white'%3ECSS%3C/text%3E%3C/svg%3E"
width="300" height="140" alt="Дві половини: HTML і CSS">
<a class="hot" style="left:0" href="/html/tags"><span>Теґи HTML</span></a>
<a class="hot" style="left:50%" href="/css/properties"><span>Властивості CSS</span></a>
</div>
</div>
</div>CSS
h3 { font-size: 1rem; margin: 0 0 .4em; }
.pair { display: flex; flex-wrap: wrap; gap: 1.5em; }
img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.hotspots { position: relative; display: inline-block; }
.hot {
position: absolute; top: 0; width: 50%; height: 100%;
display: flex; align-items: flex-end; justify-content: center;
border-radius: 6px; text-decoration: none;
}
.hot span { color: transparent; font-size: .85rem; padding-bottom: .4em; }
.hot:hover, .hot:focus { background: rgba(255, 255, 255, .35); outline: 2px solid #fff; }
.hot:hover span, .hot:focus span { color: #fff; }Різниця між HTML 4.01 та HTML5
У HTML5, якщо <area> тег не має атрибута href, це заповнювач для гіперпосилання.
Коментарі
Коментарів ще немає — будьте першим!