Чи все ще використовуються HTML-карти зображень?

113

Чи користуються люди старими HTML-картами зображень? Ті, з якими:

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

Або є нова, краща альтернатива?

html imagemap

— ss888
джерело

1

Коли ви запитуєте, чи є щось краще чи ні, вам слід дати засоби для порівняння. Краще в який спосіб, або з якою метою? У нашому розпорядженні є більш потужні інструменти, ніж карти зображень, і більш складні ...

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

2

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

— ss888

1

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

— Jeff Parker

21

Я вважаю за краще уникати Flash у цей день та вік, хаха.

— ss888

4

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

— Jeff Parker

53

Так, люди все ще використовують карти зображень. Альтернативою може бути позиціонування елементів, що використовують абсолютне позиціонування та CSS, але це не обов'язково краще. Це також не дозволяє мати форми, як на картах зображень

— JohnP
джерело

Гаразд, так HTML-карти зображень все ще хороші? Як щодо додавання ефектів наведення / перевертання?

— ss888

моя головна проблема з картами зображень полягає в тому, що на відміну від зображень, з якими вони асоціюються, вони не масштабуються до розміру браузера чи екрана. Я сподіваюся, що ОП досліджує формати SVG

— Мартін

2

ви повинні масштабувати його за розміром зображення. Визначення розміру зображення щодо розміру вікна. то завжди порівнюючи це співвідношення ширини / висоти із співвідношенням карти зображення, а потім використовуючи javascript для перезапису координат. Обробник події розміру зображення на основі jquery - це $ (window) .resize (function () {.... yourcode ...});

— skidadon

46

Вони знаходяться в специфікації HTML5 , тому вони не будуть застарілими.

Ви все ще можете вільно ними користуватися, вони, безумовно, все ще мають своє місце у веб-розробці. Або я можу сказати, існують ті рідкісні випадки, коли найкраще щось вирішити за допомогою карти зображень.

— капа
джерело

19

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

Один підручник про те, як досягти ефектів миші за допомогою цієї методики, описаний у цьому підручнику: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Ключовим фактором є те, що елементи SVG також запускають традиційні події, включаючи onmouseover та onmouseout .

— Норман Н
джерело

1

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

— user56reinstatemonica8

18

Так, HTML-карти зображень хороші, особливо якщо ви хочете, щоб ваш район був багатокутником. Ви можете додати до карти ефекти ефекту перекидання, а також за допомогою JavaScript. Тут є хороший підручник і демонстрація:

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

— LostLin
джерело

8

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

— Blazemonger

10

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

Вони можуть бути адаптовані до адаптивного дизайну за допомогою карти зображень jQuery RWD: https://github.com/stowball/jQuery-rwdImageMaps

Він виявляє та автоматично змінює розмір координат карти зображень.

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

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

— Даніеле Б
джерело

9

Так, я все ще використовую карти зображень, проте в моєму останньому проекті використовувався Рафаель. Було досить легко щось підняти і запустити.

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

З їх веб-сайту:

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

Гарний простий приклад карти зображення:

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

— Девід Ньюкомб
джерело

2

Вам не знадобилося б багато, аби виправити посилання самостійно, замість стогону та схильності :(

— Девід Ньюкомб

2

Шановний Давиде, я зняв протиріччя. Як ти хочеш, щоб я виправив посилання, яке просто перерване? Я б видалив http://raphaeljs.com/повністю і лише надам приклад Github.

— orschiro

6

Суть стекових сайтів - співпраця. Якщо ви бачите зламане посилання, тоді виправте його, якщо можете. Не думайте про це з точки зору розірваних зв’язків, вони порушені вказівники на ресурси. Якщо ресурс перемістився, то оновіть посилання, щоб воно вказувало на нове місцезнаходження ресурсу: це важливо. Рафаеліс раніше мав власний сайт, але він, очевидно, перейшов на GitHub. Чи повертаємо ми людей до Google, щоб знайти, де він зараз живе? Або ми допомагаємо їм піти звідси? Приклад Австралії - той самий приклад, він просто живе десь іншим.

— Девід Ньюкомб

http://raphaeljs.com/Посилання буде в кінці кінців ламаються , коли реєстрація домену закінчується , але є перенаправляти на нього зараз , щоб дати кожному (в світі) можливість оновити свої посилання. Можливо, @orschiro ви могли б почати з того, що є у статті, і додати до спільних зусиль тут, на SO.

— Девід Ньюкомб

1

Зрозуміли, дякую Давидові! Я оновив відповідь і зафіксував посилання. :-)

— orschiro

4

Хоча я рідко бачу їх використання на сучасних веб-сайтах, вони, мабуть, використовуються моїми клієнтами у своїх електронних кампаніях. Однак я помітив і підтвердив, що в мобільних пристроях є деякі проблеми масштабування системи координат.

** Я знаю, що цей потік старий, я просто робив додаткові дослідження цього питання щодо недавньої проблеми електронної пошти, і думав, що це може допомогти комусь іншому.

Редакція третьої сторони

Питання про підтримку карти litmus.com щодо карти зображень - з 04/2014

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

Використання графічної карти зазвичай призводить до використання великих зображень, що може спричинити проблеми із завантаженням та перешкоджати швидкості завантаження (особливо важливо для користувачів мобільних пристроїв).

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

— веретено79
джерело

0

Так, він все ще використовувався

Карта зображень дозволяє користувачеві здійснювати гіперпосилання на багато сторінок, натискаючи різні частини зображення. Просто за допомогою карти зображень ми створюємо списки координат, що відносяться до певної області одного зображення та надаємо гіперпосилання в інше місце. Використовуючи це в межах одного зображення, ми надаємо кілька посилань.

Більше

— Шрікрушна
джерело

-2

Карта зображень є досить цікавим варіантом у html та html5 вони все ще використовуються, і я особисто це люблю, тому я знаходжу Issuse на мобільних пристроях, моя проблема стосується масштабування

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

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

ви отримаєте багато з цієї сторінки

— Шоу Ікбал
джерело