Как создать области тегов привязки поверх фонового изображения с помощью CSS
Во времена Web 1.0 такую коллекцию ссылок можно было создать, соединив ваше изображение со ссылками на каждую графику, а затем попытавшись сшить все это вместе с помощью таблицы. Это также может быть достигнуто с помощью карта изображения но обычно для этого требуется инструмент для построения системы координат.
Использование каскадных таблиц стилей (CSS) делает это намного проще… не склеивая изображения и не пытаясь найти инструмент для построения вашей системы координат! Вы просто добавляете фоновое изображение в div, а затем используете абсолютное позиционирование, чтобы указать ширину и высоту каждой из областей, которые вы хотите связать.
- Создайте изображение, которое вы хотели бы использовать. Вы можете использовать этот рисунок ниже (щелкните правой кнопкой мыши и сохраните как для загрузки)
- Загрузите свое изображение в каталог, относящийся к вашему CSS. В WordPress это проще всего сделать, поместив его в папку изображений в каталоге вашей темы.
- Добавьте свой HTML. Это красиво и просто ... div с тремя ссылками:
<div id="subscribe">
<a id="rss" href="[your feed link]" title="Subscribe with RSS"><span class="hide">RSS</span></a>
<a id="email" href="[your email subscribe link]" title="Subscribe with Email"><span class="hide">Email</span></a>
<a id="mobile" href="[your mobile link]" title="View Mobile Version"><span class="hide">Mobile</span></a>
</div>
- Отредактируйте каскадную таблицу стилей (CSS). Вы будете добавлять 6 различных стилей. 1 стиль для всего div, 1 для тега привязки, чтобы он не отображал текстовое оформление, 1 стиль для скрытия текста (используется для специальных возможностей) и 1 спецификация стиля для каждой из ссылок:
#subscribe { /* background image block */
display: block;
width: 215px;
height: 60px;
background: url(https://martech.zone/wp-content/uploads/2007/10/options.png) no-repeat;
margin-top: 0px; }
#subscribe a { text-decoration:none; }
.hide { visibility:hidden; }
#rss { /* RSS Link */
float: left;
position:absolute;
width: 50px;
height: 50px;
margin-left: 20px;
margin-top: 5px; }
#email { /* Email Link */
float: left;
position:absolute;
width: 50px;
height: 50px;
margin-left: 80px;
margin-top: 5px; }
#mobile { /* Mobile Link */
float: left;
position:absolute;
width : 50px;
height: 50px;
margin-left: 150px;
margin-top: 5px; }
Позиционирование красивое и простое… добавьте высоту и ширину, а затем установите левое поле с левой стороны изображения и верхнее поле с верхней стороны изображения!
ОБНОВЛЕНО 10 для лучшей доступности по совету Фил!