Атрибут target тега <area> — де відкрити посилання
Атрибут target визначає, де відкрити пов'язаний документ.
Використовується тільки за атрибутом href.
автор: NagarD
Загальний опис
автор: NagarD
Синтаксис
<area target="_blank|_self|_parent|_top|framename">Атрибут target може отримувати 5 значень:
-
_blank -
Відкриває пов'язаний документ в новому вікні або вкладці.
автор: NagarD -
_self -
Відкриває пов'язаний документ в той же фрейм, в якому він був викликаний (це без задання).
автор: NagarD -
_parent -
Відкриває пов'язаний документ в батьківському фреймі.
автор: NagarD -
_top -
Відкриває пов'язаний документ в повному тілі вікна
автор: NagarD -
framename -
Відкриває пов'язаний документ в зазначеному фреймі.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Сонце має target="_blank" — клац відкриє нову вкладку; Меркурій без target відкривається у цьому ж вікні. У вбудованій пісочниці нові вкладки можуть бути заблоковані.
<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="https://css.in.ua" alt="Сонце" target="_blank">
<area shape="circle" coords="180,60,16" href="#mercury" alt="Меркурій">
</map>Карта зображення з трьох областей. Підписи під картинкою відповідають ділянкам: ліва має target="_self", середня — target="_BLANK" великими літерами (працює так само), права — target="_blank", але БЕЗ href, тому це взагалі не посилання й клац по ній нічого не робить. Курсор над областями — найпростіша перевірка, що ділянка жива.
HTML
<p class="head">Наведіть курсор на кожну третину картинки</p>
<img class="pic" usemap="#zones" width="480" height="120" alt="Три ділянки"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='120'%3E%3Crect%20width='160'%20height='120'%20fill='%232f6fd0'/%3E%3Crect%20x='160'%20width='160'%20height='120'%20fill='%2372b043'/%3E%3Crect%20x='320'%20width='160'%20height='120'%20fill='%23b9c6d8'/%3E%3C/svg%3E">
<map name="zones">
<area shape="rect" coords="0,0,160,120" href="#zone-self" target="_self" alt="У цьому ж вікні">
<area shape="rect" coords="160,0,320,120" href="#zone-blank" target="_BLANK" alt="У новій вкладці">
<area shape="rect" coords="320,0,480,120" target="_blank" alt="Без href — не посилання">
</map>
<ul class="legend">
<li class="a">Ліва третина: href є, target="_self" — перехід у цьому ж вікні</li>
<li class="b">Середня: href є, target="_BLANK" — регістр не важить, буде нова вкладка</li>
<li class="c">Права: target є, а href немає — це не посилання, клац не робить нічого</li>
</ul>
<p id="zone-self" class="anchor">Ділянка «у цьому ж вікні» веде сюди.</p>
<p id="zone-blank" class="anchor">Ділянка «у новій вкладці» веде сюди.</p>CSS
.head {
margin: 6px 0 10px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.pic {
display: block;
border: 2px solid #5a6472;
}
.legend {
max-width: 560px;
margin: 14px 0;
padding-left: 0;
list-style: none;
}
.legend li {
padding: 6px 10px;
margin-bottom: 4px;
border-left: 6px solid #b9c6d8;
background: #f6f9ff;
}
.legend .a {
border-left-color: #2f6fd0;
}
.legend .b {
border-left-color: #72b043;
}
.legend .c {
border-left-color: #d64545;
color: #c0392b;
}
.anchor {
max-width: 560px;
padding: 6px 10px;
background: #eef3fb;
scroll-margin-top: 12px;
}Коментарі
Коментарів ще немає — будьте першим!