Карты изображений HTML все еще используются?

113

Люди все еще используют старые карты изображений HTML? Те, у которых есть:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

Или есть более новая, лучшая альтернатива?

html imagemap

— ss888
источник

1

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

— Джефф Паркер,

2

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

— ss888, 09

1

Функциональность на основе Javascript / слоев и flash заменили карты изображений практически во всем, с чем я сталкиваюсь ... Я не могу вспомнить, когда в последний раз видел такую в действующей службе. Однако, если у вас есть конкретная цель, более конкретный ответ может быть более доступным :)

— Джефф Паркер,

21

Я бы предпочел избегать Флэша в наши дни, лол.

— ss888, 09

4

Если вы ищете что-то быстрое, быстрое в выполнении и только умеренно злое, карты изображений вам подойдут. Нет широко поддерживаемой замены, которая, на мой взгляд, выполняла бы работу с той же скоростью. Теперь, если у вас было время для SVG, Canvas и вы не возражали исключить IE из списка поддерживаемых браузеров ...

— Джефф Паркер,

53

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

— JohnP
источник

Хорошо, так что карты изображений HTML по-прежнему хороши? Как насчет добавления эффектов наведения / опрокидывания?

— ss888, 09

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

— Мартин

2

вы должны масштабировать его по размеру изображения. Делаем размер вашего изображения относительно размера окна. затем всегда сравнивая это отношение ширины / высоты с соотношением изображения карты, а затем используя javascript для перезаписи координат. Обработчик события размера изображения на основе jquery - $ (window) .resize (function () {.... yourcode ...});

— skidadon

46

Они включены в спецификацию HTML5 , поэтому не станут устаревшими.

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

— капа
источник

19

Альтернативным решением для использования CSS или карт изображений было бы использование графики SVG, встроенной в HTML dom.

Одно руководство о том, как добиться эффектов наведения указателя мыши с помощью этой техники, описано в этом руководстве: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Ключевой вывод заключается в том, что элементы SVG также запускают традиционные события dom, включая onmouseover и onmouseout .

— Норман Х
источник

1

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

— user56reinstatemonica8 02

18

Да, карты изображений html хороши, особенно если вы хотите, чтобы ваша область была многоугольником. Вы также можете добавить эффекты на карту с помощью javascript. Здесь есть хороший учебник и демонстрация:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

— LostLin
источник

8

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

— Blazemonger

10

Карты изображений все еще находятся в спецификациях HTML5 и поддерживаются всеми браузерами.

Их можно адаптировать к адаптивному дизайну с помощью jQuery RWD Image Maps: https://github.com/stowball/jQuery-rwdImageMaps.

Он определяет и автоматически изменяет размер координат карты изображения.

Он также доступен для разработчиков Wordpress в виде плагина: http://wordpress.org/plugins/responsive-image-maps/

Простое и эффективное решение.

— Даниэле Б.
источник

9

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

http://dmitrybaranovskiy.github.io/raphael/

Со своего веб-сайта:

Рафаэль ['ræfeɪəl] использует Рекомендацию SVG W3C и VML в качестве основы для создания графики. Это означает, что каждый создаваемый вами графический объект также является объектом DOM, поэтому вы можете присоединить обработчики событий JavaScript или изменить их позже. Цель Raphaël - предоставить адаптер, который сделает рисование векторной графики простым и кроссбраузерным.

Хороший простой пример карты изображений:

http://dmitrybaranovskiy.github.io/raphael/australia.html

— Дэвид Ньюкомб
источник

2

Вам не потребовалось бы много времени, чтобы исправить ссылку самостоятельно, вместо того, чтобы ныть и отрицать :(

— Дэвид Ньюкомб

2

Уважаемый Дэвид, я снял голос против. Как вы хотите, чтобы я исправил ссылку, которая просто не работает? Я бы удалил http://raphaeljs.com/полностью и предоставил только пример Github.

— orschiro

6

Суть стэк-сайтов - сотрудничество. Если вы видите неработающую ссылку, исправьте ее, если сможете. Не думайте об этом как о неработающих ссылках, это неработающие указатели на ресурсы. Если ресурс переместился, обновите ссылку, чтобы она указывала на новое местоположение ресурса: это важно. Раньше у Raphaeljs был собственный сайт, но он явно переместился на GitHub. Посылаем ли мы людей обратно в Google, чтобы узнать, где он сейчас живет? Или мы поможем им уйти отсюда? Пример с Австралией - тот же пример, он просто живет где-то по-другому.

— Дэвид Ньюкомб

http://raphaeljs.com/Ссылка будет в конце концов ломаются , когда регистрация домена истекает , но есть перенаправлять на него сейчас , чтобы дать каждому (в мире) возможность обновить свои ссылки. Возможно, @orschiro вы могли бы начать с того, что написано в статье, и добавить к совместным усилиям здесь, в SO.

— Дэвид Ньюкомб

1

Понятно, спасибо Дэвид! Я обновил ответ и исправил ссылку. :-)

— orschiro 05

4

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

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

Стороннее править

Вопрос на litmus.com о поддержке карт изображений от 04/2014

Карты изображений не поддерживают теги ALT, когда изображения не загружены, текст ALT не отображается в некоторых клиентах.

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

И, что наиболее важно, iOS (iphone / ipad) не масштабирует координаты ссылки на карту изображения, когда изображение масштабируется, что разрывает ссылки. Поскольку iOS представляет собой подавляющее большинство открытий электронной почты (iPhone + iPad = 38% через http://emailclientmarketshare.com/ ), это важно.

— шпиндель79
источник

0

Да, все еще используется

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

Больше

— Srikrushna
источник

-2

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

да, у меня есть опыт, но я студент, зарегистрированный в html html5, и для начинающих я хотел бы перейти по ссылке w3chools

http://www.w3schools.com/html/html_images.asp

вы получите много от этой [страница

— Шоуа Икбал
источник