Атрибут shape тега <a> — форма активної області посилання
автор: NagarD
Загальний опис
автор: NagarD
- Порада
-
Для створення зображення-карти, яка працює в всіх браузерах, використовуйте елемент
автор: Wsewlad<area>!
Синтаксис
<a shape="value">Атрибут shape може отримувати 4 значень:
-
default -
Визначає весь регіон.
автор: NagarD -
rect -
Визначає прямокутну область.
автор: NagarD -
circle -
Визначає коло кругової області.
автор: NagarD -
poly -
Визначає многокутну область.
автор: NagarD
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1–58 | 1 | 15 | 79 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4–58 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML 4 дозволяв робити області карти посиланнями з shape прямо в map — браузери для <a> цього не реалізували, тож object показує запасний вміст (самі посилання). Робочий shape живе в <area>: rect — прямокутник, circle — коло, poly — многокутник.
<object data="missing.gif" type="image/gif" usemap="#Map01" width="300" height="60">
<map name="Map01">
<a href="#black" shape="rect" coords="0,0,82,126">Чорний кіт</a>
<a href="#brown" shape="circle" coords="90,58,3">Рудий кіт</a>
</map>
</object>Дві однакові картинки. Ліворуч мапа зроблена посиланнями з shape і coords — клац не робить нічого, бо цього не реалізував жоден браузер; текст посилань до того ж витік на сторінку, бо <map> не ховає вміст. Праворуч та сама розмітка на <area> — ділянки живі. Нижче — сучасна заміна на clip-path, яка відгукується рівно на свою форму.
HTML
<div class="pair">
<div>
<p class="cap bad">Мертвий варіант: a з shape і coords</p>
<img class="pic" usemap="#dead" width="220" height="120" alt="Дві половини"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='120'%3E%3Crect%20width='110'%20height='120'%20fill='%23d64545'/%3E%3Crect%20x='110'%20width='110'%20height='120'%20fill='%23f2b134'/%3E%3C/svg%3E">
<map name="dead">
<a href="#left" shape="rect" coords="0,0,110,120">ліва половина</a>
<a href="#right" shape="rect" coords="110,0,220,120">права половина</a>
</map>
</div>
<div>
<p class="cap good">Робочий варіант: area з shape і coords</p>
<img class="pic" usemap="#alive" width="220" height="120" alt="Дві половини"
src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='120'%3E%3Crect%20width='110'%20height='120'%20fill='%2372b043'/%3E%3Crect%20x='110'%20width='110'%20height='120'%20fill='%232f6fd0'/%3E%3C/svg%3E">
<map name="alive">
<area shape="rect" coords="0,0,110,120" href="#left" alt="ліва половина">
<area shape="rect" coords="110,0,220,120" href="#right" alt="права половина">
</map>
</div>
</div>
<p class="head">Сучасна заміна: посилання формою, яку задає clip-path</p>
<a class="clip" href="#left">клац лише в ромбі</a>
<p id="left" class="anchor">Сюди веде ліва ділянка.</p>
<p id="right" class="anchor">Сюди веде права ділянка.</p>CSS
.pair {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.cap {
margin: 0 0 6px;
font-weight: 600;
}
.bad {
color: #c0392b;
}
.good {
color: #2c7a3f;
}
.pic {
display: block;
border: 2px solid #5a6472;
}
.head {
margin: 24px 0 8px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.clip {
display: grid;
place-items: center;
width: 220px;
height: 120px;
background: #2f6fd0;
color: #fff;
text-align: center;
text-decoration: none;
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.anchor {
max-width: 560px;
margin-top: 10px;
padding: 6px 10px;
background: #eef3fb;
scroll-margin-top: 12px;
}Різниця між HTML 4.01 та HTML5
Атрибут shape для теґу <a> не підтримується у HTML5.
Коментарі
Коментарів ще немає — будьте першим!