Как создать карту изображения с помощью CSS

опционы

Мне нужно было что-то «чудаковатое», поэтому я выбрал «карманный» рисунок, который содержит все методы подписки для моего блога.

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

  1. Создайте свой образ, который вы хотели бы использовать. Вы можете использовать этот рисунок ниже (щелкните правой кнопкой мыши и сохраните файл для загрузки):
    Опции
  2. Загрузите свое изображение в каталог, относящийся к вашему CSS. В WordPress это проще всего сделать, поместив его в папку изображений в каталоге вашей темы.
  3. Добавьте свой HTML. Это красиво и просто ... div с тремя ссылками:
    > div id = "subscribe">> a id = "rss" href = "[ссылка на ваш канал]" title = "Подпишитесь с помощью RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[ссылка для подписки по электронной почте]" title = "Подписка по электронной почте" >> span class = "hide"> Электронная почта> / span >> / a>> a id = "mobile" href = "[ваша мобильная ссылка]" title = "Просмотреть мобильную версию" >> span class = "hide"> Mobile> / span >> / a>> / div>
    
  4. Отредактируйте свою каскадную таблицу стилей. Вы добавите 6 разных стилей. 1 стиль для всего div, 1 для тега a, чтобы он не отображал текстовое оформление, 1 стиль для скрытия текста (используется для доступности) и 1 спецификация стиля для каждой ссылки:
    #subscribe {/ * блок фонового изображения * / display: block; ширина: 215 пикселей; высота: 60 ​​пикселей; фон: url (images / options.png) no-repeat; маржа сверху: 0 пикселей; } #subscribe a {text-decoration: none; } .hide {видимость: скрытая; } #rss {/ * RSS-ссылка * / float: left; позиция: абсолютная; ширина: 50 пикселей; высота: 50 пикселей; маржа слева: 20 пикселей; маржа сверху: 5 пикселей; } #email {/ * Ссылка на электронную почту * / float: left; позиция: абсолютная; ширина: 50 пикселей; высота: 50 пикселей; маржа слева: 70 пикселей; маржа сверху: 5 пикселей; } #mobile {/ * Мобильная ссылка * / float: left; позиция: абсолютная; ширина: 50 пикселей; высота: 50 пикселей; маржа слева: 130 пикселей; маржа сверху: 5 пикселей; }

Позиционирование красивое и простое… добавьте высоту и ширину, а затем установите левое поле с левой стороны изображения и верхнее поле с верхней стороны изображения!

Этот пост «Как сделать» предназначен для входа в Вундеркинды - сексуальный конкурс "Как делать"! Одно замечание: это правда, что карта изображений может иметь гораздо более сложные полигоны, но я действительно не видел слишком много мест, где это должно быть. Я заметил, что большое изображение RSS на боковой панели Geeks - Sexy… это хорошее место для ссылки. 😉

ОБНОВЛЕНО 10 для лучшей доступности по совету Фил!

Спонсор: Если вы новичок в веб-дизайне, то вам просто необходимо создать свой собственный веб-сайт с помощью HTML и CSS, 2nd Edition. В этом простом руководстве вы узнаете, как создать веб-сайт наилучшим образом - сделав это самостоятельно!

41 комментариев

  1. 1

    Дуг, это кажется хорошим методом, но он очень недоступен.

    Рассмотрим слепого пользователя с программой чтения с экрана, пользователя с текстовым браузером или любого, кто посещает сайт без включенных CSS или изображений (например, мобильного пользователя, который ищет ссылку на ваш мобильный сайт). Никто из них не узнает об этих трех ссылках, потому что в них нет текста. Если изображения отключены, пользователь даже не увидит замещающий текст, описывающий, что там было, потому что это фоновое изображение.

    Лучше было бы разрезать изображения, связывать их, помещать в список и размещать рядом друг с другом. Или даже используйте текст для ссылок и замените текст, используя стандартную технику замены изображений. Это кажется удобным, но делает работу намного сложнее / невозможной для тех, кто не использует стандартный графический браузер.

    • 2

      Я бы мягко (поскольку у вас больше опыта) не согласен, Фил, каждая из ссылок имеет заголовок, поэтому каждая из них полностью доступна. Чтение текстовых заголовков - это возможность специальных приложений, таких как JAWS. Вот хороший пост о заголовках в ссылках и его влиянии на доступность.

      • 3

        Дуга,

        JAWS по умолчанию не читает заголовки ссылок, но вы правы, может. Зачем вам искать заголовки ссылок, если вы не знали, что они там есть, и даже если бы вы были, конечно, это упирается в проблему удобства использования, что означает, что вы даете менее способным пользователям второстепенный опыт использования вашего сайта.

        Для текстовых браузеров статья, в которой вы указываете мне, что Lynx также позволяет отображать список заголовков ссылок, но я остаюсь в том, что если вы не знали, что там была ссылка, так как текста вообще не было , зачем вам искать текст заголовка?

        Наконец, атрибуты заголовка ссылки по-прежнему не будут отображаться для тех, кто просматривает без включенных изображений или без включенного CSS.

        Так что да, ссылки с заголовками лучше, чем без них, но в данном случае это только маргинальные ссылки.

        Вот почему использование изображения, чтобы можно было прочитать замещающий текст, или замена изображения, чтобы текст был там, является гораздо более безопасным, доступным и удобным вариантом.

        • 4

          Хорошая информация, Фил. Я попытаюсь улучшить это с помощью текста, но просто скрою текст - таким образом доступный продукт, такой как JAWS, будет читать текст ссылки, и текст будет отображаться, если CSS или изображения отключены.

          Однако я не согласен с тем, что единственным доступным решением было бы разместить изображение со ссылкой.

  2. 5
    • 6
      • 7

        Это то, на что мы часто не обращаем внимания, Фил! Кроме того, обеспечение доступности вашего приложения часто также дает хорошие результаты в поисковых системах.

        Я очень ценю опыт и отзывы!

  3. 8

    Я украл это. Вот, я это сказал.

    Дуг, графика великолепна, а код настолько невероятно прост, что меня пугает (играл с CSS, и теперь я наконец «понял»).

    Подправили код в соответствии с моими потребностями, выяснили, куда поместить бит HTML, и, честно говоря, он выглядит великолепно и очистил верхнюю часть моей боковой панели, которая сводила меня с ума.

    Возможно, мне еще придется купить тебе кофе!

    • 9

      Слишком круто! Отлично выглядит там Уильям. Когда кто-то использует один из моих постов, это лучший комплимент. Благодарность!

  4. 10

    Дуга,

    Я собираюсь выразить несогласие, используя свой опыт в качестве примера. Я помню наши электронные письма, когда мой домашний адрес электронной почты изменился, и вы заметили, что мне нужно было просто выбрать новый. Должен признаться, я чертовски потратил время, «открывая» новую функцию на вашем сайте, чтобы снова зарегистрироваться. Отчасти это произошло потому, что исходная ссылка была немного более традиционной, и я смутно помнил эту. Во-вторых, из-за того, что боковая половина конверта просто изначально не казалась мне конвертом. Примерно через 5 или более минут я начал наводить указатель мыши на каждое изображение, и когда появился заголовок «Подписка по электронной почте», я понял, что занимаюсь бизнесом. Мой мозг также понял, что это за изображение ссылки.

    Но, по крайней мере, для меня боковой конверт просто не был интуитивно понятен как место для подписки на уведомления по электронной почте. И (потому что мне сказали всегда заканчивать чем-нибудь приятным) я согласен с Филом выше; метод действительно прост, и все работает отлично. Я так понимаю, ваш дизайнерский инструмент помог дать вам точные размеры трех секций; это правильное предположение? Я должен так предположить, поскольку, если бы у меня было, скажем, изображение шириной 3 пикселей, мне нужно было бы знать правильные настройки и т. Д.

    • 11

      Боб,

      Отличный отзыв! Я добавил небольшую заметку над изображением, которая помогает лучше направлять людей.

      Благодаря!
      Дуг

  5. 12
    • 13

      Уильям,

      Похоже, у вас может быть конфликт между именами классов комментариев и именами классов на боковой панели. Вы можете назвать их по-другому, чтобы прояснить конфликт. Дайте мне знать, если вам понадобится помощь!

      Дуг

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    Хороший подход, но мне нужно что-то для топографической карты, поэтому я не могу использовать прямоугольные области ... Я думаю, что мне нужно использовать карту изображений старого стиля с координатами, но я, вероятно, копну немного глубже ...

  11. 19

    Спасибо за эту информацию, Дуг. Я был здесь раньше и задавался вопросом, как вы это сделали. Мы хотели создать такую ​​карту для вставки после наших сообщений, и теперь, когда у нас есть средства, мы можем это сделать. Браво!

  12. 20
  13. 21

    Привет, Дуг,
    Я оставил предыдущий комментарий, но понял, что вообще не предлагал никакого понимания моей дилеммы. Мы адаптируем тему wordpress, чтобы помочь нам запустить наш онлайн-сериал здесь:

    http://www.phaylen.com/blog/

    Теперь вы увидите, что у нас есть навигационный баннер вверху, изображение, которое мы намеревались сопоставить, как и десятки раз раньше. / palmforehad. Никто из нас на самом деле не понимает CSS, но мы достаточно спотыкаемся и пока все делаем хорошо. Ваша статья в ТОЛЬКО ОДНОЙ из десятков представленных статей дает реальное представление о том, как легко использовать отображение изображений в CSS. Я редактировал таблицу стилей в соответствии с вашими указаниями, но понятия не имею, где разместить HTML. Все, что вы сказали, это «Добавьте свой html… Это красиво и просто», а затем я съежился, потому что подумал… «Не достаточно просто для меня!» Я не знал, что могу добавить html на любую из этих php-страниц в редакторе темы. Могу ли я разместить html в заголовке? Шаблон основного индекса? Функции? Я предполагаю, что у всех пользователей WordPress есть возможность редактировать свою тему в редакторе панели инструментов, что кажется довольно универсальным по функциональности. Если бы вы могли предложить, где разместить html, я бы с удовольствием адаптировал код oru для моей панели навигации.

    Спасибо, что поделились своими знаниями с сообществом. Я рада приготовить тебе кофе.

    • 22

      Привет, Фэй!

      Все файлы темы вашего блога доступны для редактирования через панель администратора. Если вы нажмете «Презентация», а затем «Редактор тем», вы увидите список своих файлов справа и редактор слева.

      Если вы хотите, чтобы это было на боковой панели, вероятно, у вас есть страница боковой панели. Щелкните, чтобы отредактировать его, а затем поместите предоставленный HTML-код на нужную страницу.

      Одно примечание: редактирование таблицы стилей относится к вашей странице, поэтому вам нужно будет загрузить изображение в каталог изображений темы, если вы ссылаетесь на него, как на другие изображения в вашей теме.

      Надежда, что помогает!

    • 23

      Фэй,
      Сегодня я наткнулся на этот сайт и столкнулся с той же дилеммой, что и вы. Я также хотел добавить карту изображения к изображению заголовка. Поигравшись с ним некоторое время, я понял, что это правильно. Поместите HTML-код div в файл header.php. Ставлю между и. Не уверен, что ваш шаблон имеет такую ​​точную кодировку, но поиграйте с ней в файле header.php, и вы разберетесь.

      Пол

  14. 24

    Спасибо за быстрый ответ!

    Нет, я не хотел, чтобы он был на боковой панели, он находится вверху страницы (вы можете увидеть в предоставленной мной ссылке розовую панель навигации с надписью contant, о шоу и т. Д.)

    Я все утро работаю с дашбордом, к сожалению, я не уверен, в какой файл помещаю html, как указано выше, у меня их несколько: header.php, main index.php, functions.php, footer.php. Я не уверен, куда вставлять html-код. (первая часть, которую вы предоставили, я уже вставил остаток в свою таблицу стилей) У меня есть мое изображение на веб-сайте, все готово к работе, мне просто нужно знать, где добавить html-часть кода для адаптации.

    Большое спасибо за ваше время и ответы на вопросы новичка.

    Phay

  15. 25

    … Или, может быть, кто-то мог бы написать в комментариях, в какой файл мы помещаем html-часть кода. Джентльмен, написавший несколько постов, сказал, что понял это. Мне не так повезло.

    Phaylen

  16. 26
  17. 27

    У меня чертовски много времени, чтобы найти способ встроить интерактивную карту изображений в wordpress, потому что она удаляет теги html карты. Ваш способ сработает, но карта США, очевидно, слишком сложна для этого. Я заблудился.

    Справка.

    Кажется, вспышка - единственный вариант?

    • 28

      Дэйв,

      Если вы поместите изображение в свой шаблон, все будет в порядке. Если вы поместите карту изображения в фактическое содержимое, вы можете столкнуться с проблемами фильтра. То, как я работал с этим, ужасно, но иногда я использовал iframe.

      Дуг

  18. 29

    Здравствуйте,

    кажется, что карта изображений и ссылки - это две разные вещи, они не работают вместе, как карта изображений в html

    когда я включаю расположение фона (по центру слева) для карты изображений, расположение ссылок не отслеживается.

    есть способ обойти это? я очень любитель. Спасибо.

  19. 31

    Можно ли использовать аналогичный подход для более крупной и сложной карты изображений, которую я пытаюсь использовать?

    Если вы просматриваете мой сайт, щелкните ссылки слева, и вы увидите изображение, которое я пытаюсь использовать в качестве карты изображений (под текстовым алфавитом).

    В основном, пытаюсь использовать Изображение для перехода к каждому разделу этого списка по буквам.

    Очевидно, я потратил 20 минут на создание карты с помощью GIMP, а затем WP удаляет теги карты, так что я нашел ваш сайт.

    Хотя, возможно, подумайте об использовании Flash

    Благодарю.

  20. 33

    В настоящее время я использую макет шаблона и редактирую свои собственные материалы. Я хочу добавить карту изображения, но не уверен, где ее разместить в CSS. изображение, которое я хочу составить, находится в заголовке.

  21. 34

    привет, я создал свой сайт на joomla ... я хочу использовать этот метод, чтобы сделать логотип моей страницы ссылкой на главную, мне сказали, что вы не можете сделать это с помощью joomla, но эта статья вселяет в меня надежду! была бы очень признательна за помощь по электронной почте… .спасибо

  22. 35

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

    1. Для обеспечения доступности вы не должны использовать visibility: none (или display: none, если вы считаете это), чтобы скрыть текст здесь, поскольку элемент, стилизованный под видимость: скрытый, не будет прочитан программами чтения с экрана (теми, которые соответствуют спецификации) .

    Вместо этого используйте более надежную технику замены изображения. Я предлагаю либо метод Фарка, либо Гилдер / Левин - это просто лучшие задокументированные имена для поиска в Google основных методов. Я предпочитаю G / L, так как он также работает с включенным CSS, но изображения отключены.

    2. Хотя я не вижу, чтобы это ломалось (с использованием FF3), ваша реализация позиционирования также имеет неотъемлемые риски. Абсолютно позиционированный элемент позиционируется относительно его ближайшего расположенного родителя. По сути, вы хотите явно установить контекст позиционирования, применив 'position: relative' к #subscription. Затем дочерние элементы (позиционированные ссылки) могут быть размещены внутри этого родителя. Этот метод помогает обеспечить более надежные результаты в браузерах.

    Кроме того, вы должны затем использовать объявления позиционирования «top: x» и «left: x» (где x - это значение смещения, скажем в пикселях), а не поля для обработки этого позиционирования. Опять же, я не обязательно вижу, что он ломается так, как у вас, но верхний и левый предназначены для этого, так почему бы не использовать их? Кроме того, для одного и того же элемента установлены числа с плавающей запятой и поля, которые при определенных условиях вызывают ошибку «двойного поля» в IE6 (вы тестировали это там?) - хотя есть исправление, вы полностью избегаете этой проблемы, используя верхнюю и left вместо полей для позиционирования в этом случае.

    3. Наконец, почему бы не использовать для этих ссылок семантически верный неупорядоченный список вместо бессмысленного div?

    Извините за гудение ... Я просто хотел бы поделиться, b / c я знаю по опыту, как есть много разных способов использования CSS для получения желаемого результата, но некоторые способы, безусловно, работают лучше (более надежные, кросс-браузерные), чем другие . HTH.

  23. 36
  24. 37
  25. 38

    Огромное спасибо!! Ваши инструкции сэкономили мне ЧАСЫ работы ... Я новичок в веб-разработке, и я только что пережил свой первый большой проект. Я сделал это ... клиент счастлив, даже в восторге, и я тоже!

  26. 39

    Здравствуйте, большое спасибо за публикацию! Спустя годы, он все еще помогает… приятно! Я изо всех сил пытаюсь найти ссылку на мою карту изображений в нужном месте. У меня есть баннер, и я хочу, чтобы значки социальных сетей в правом верхнем углу баннера связывались с использованием предоставленного вами кода. Он отлично работает, за исключением того, что я что-то делаю не так, потому что мои ссылки появляются в дальнем верхнем левом углу экрана, не над значками социальных сетей, а над логотипом. Я уверен, что это что-то простое, но я просто не могу понять. Думал, что поделюсь этим здесь, если у вас есть какие-либо идеи. Еще раз спасибо за публикацию!

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.