Как добавить карту изображений в css?

#html #css #imagemap

#HTML #css #карта изображений

Вопрос:

У меня вопрос относительно карты изображений. Теперь у меня есть изображение на моей странице .xhtml, которое использует карту изображений примерно так

 <img src="images/friends.png" usemap="#guys" />
<map name="guys">
            <area shape="rect" coords="6,1,12,14" alt="Jason"
                href="http://www.jason.com" />
            <area shape="rect" coords="19,2,38,15" alt="jay"
                href="http://www.jay.com" />
        </map>
  

есть ли способ, которым я могу добавить содержимое названия карты в css? возможно ли это?

Спасибо

Комментарии:

1. С какой стати вы используете карту изображений?

2. Я обновил свой вопрос тегом img. Если вы можете помочь мне с css, это было бы здорово. Спасибо, Оскар

3. Вы спрашиваете, можете ли вы настроить таргетинг на <map> с помощью CSS?

4. ДА. Я также обновил свой вопрос тегом image, если вы можете помочь мне с некоторыми другими технологиями.

5. Что вы имеете в виду под «добавить содержимое названия карты в css»? Какой функциональности вы пытаетесь достичь?

Ответ №1:

Карты изображений — это пережиток ушедшей эпохи. Материал Html 5 canvas — это то, что нужно, если вы можете выйти за эти рамки. Если вы не можете, то то, что мы делали в прошлом, это наложение абсолютно позиционированных, отображаемых блоками пустых тегов привязки поверх изображения. Работает так же или лучше, чем карта изображений, особенно если вы используете его для таких вещей, как всплывающие окна на карте.

Комментарии:

1. Почему размещение якорей над изображением лучше, чем просто использование imagemap? В лучшем случае это делает то же самое, и, насколько я знаю, вы были бы ограничены точками доступа прямоугольной формы, в отличие от imagemap. Безусловно, есть способы добиться того же самого без imagemap — вы можете сохранить свою собственную таблицу векторных данных и сами решать, что делать при нажатии или наведении курсора мыши — но почему бы просто не использовать встроенную конструкцию, если она уже выполняет то, что вам нужно? Это просто и работает с любым браузером.