Содержание маркетинга

Как создать области тегов привязки поверх фонового изображения с помощью CSS

Во времена Web 1.0 такую ​​коллекцию ссылок можно было создать, соединив ваше изображение со ссылками на каждую графику, а затем попытавшись сшить все это вместе с помощью таблицы. Это также может быть достигнуто с помощью карта изображения но обычно для этого требуется инструмент для построения системы координат.

Использование каскадных таблиц стилей (CSS) делает это намного проще… не склеивая изображения и не пытаясь найти инструмент для построения вашей системы координат! Вы просто добавляете фоновое изображение в div, а затем используете абсолютное позиционирование, чтобы указать ширину и высоту каждой из областей, которые вы хотите связать.

  1. Создайте изображение, которое вы хотели бы использовать. Вы можете использовать этот рисунок ниже (щелкните правой кнопкой мыши и сохраните как для загрузки)
кредита

  1. Загрузите свое изображение в каталог, относящийся к вашему CSS. В WordPress это проще всего сделать, поместив его в папку изображений в каталоге вашей темы.
  2. Добавьте свой 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>
  1. Отредактируйте каскадную таблицу стилей (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 для лучшей доступности по совету Фил!

Douglas Karr

Douglas Karr является директором по маркетингу OpenINSIGHTS и основатель компании Martech Zone. Дуглас помог десяткам успешных стартапов MarTech, помог в комплексной проверке приобретений и инвестиций Martech на сумму более 5 миллиардов долларов, а также продолжает помогать компаниям во внедрении и автоматизации их стратегий продаж и маркетинга. Дуглас — международно признанный эксперт по цифровой трансформации, а также эксперт в области MarTech и спикер. Дуглас также является автором опубликованного руководства для чайников и книги по бизнес-лидерству.

Статьи по теме

Вернуться к началу кнопки
Закрыть

Adblock обнаружен

Martech Zone может предоставить вам этот контент бесплатно, потому что мы монетизируем наш сайт за счет доходов от рекламы, партнерских ссылок и спонсорства. Мы были бы признательны, если бы вы удалили блокировщик рекламы при просмотре нашего сайта.