Что является хорошей альтернативой использованию генератора карт изображений? [закрытый]

У меня есть большое изображение, и я хочу сделать некоторые разделы изображения кликабельными. Я также хочу указать форму кликабельной области (квадрат, круг, пользовательский). Не полагаясь на Javascript, как я могу использовать CSS и HTML для создания интерактивной карты изображений? С hoverable "горячими точками" и выделяя областями без полагаться на производить координаты SVG. Все онлайн-генераторы карт изображений, которые я нашел с помощью Google, не доставляли то, что я воспринимаю как стандартную базовую функцию любого инструмент ссылок.

29
html imagemap

8 ответов

почему бы вам не использовать комбинацию HTML/CSS вместо этого? Карты изображений устарели.

регистрация здесь: http://jsfiddle.net/jsWdj/ пример

это btw также оптимизирована поисковая система:)

исходный код следующим образом:

.image-map {
  background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
  width: 275px;
  height: 95px;
  display: block;
  position: relative;
  margin-top:10px;
  float: left;
}

.image-map > a.map {
  position: absolute;
  display: block;
  border: 1px solid green;
}

<div class="image-map">
    <a class="map" rel="G" style="top: 0px; left: 0px; width: 70px; height: 95px;" href="#"></a>
    <a class="map" rel="o" style="top: 0px; left: 70px; width: 50px; height: 95px" href="#"></a>
    <a class="map" rel="o" style="top: 0px; left: 120px; width: 50px; height: 95px" href="#"></a>
    <a class="map" rel="g" style="top: 0px; left: 170px; width: 40px; height: 95px" href="#"></a>
    <a class="map" rel="l" style="top: 0px; left: 210px; width: 20px; height: 95px" href="#"></a>
    <a class="map" rel="e" style="top: 0px; left: 230px; width: 40px; height: 95px" href="#"></a>
</div>

EDIT:

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

конечно, он не может делать полигоны, у него могут быть проблемы с ручным масштабированием страницы, но лично Я чувствую, что карты изображений устаревшего хотя все еще на спецификации html5. (В настоящее время имеет смысл попытаться воспроизвести их с помощью HTML5 canvas)

однако я думаю, что целевая аудитория по этому вопросу не согласна со мной.

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

-35

Это, на мой взгляд, лучший для онлайн (в автономном режиме, однако dreamweaver лучше): http://www.maschek.hu/imagemap/imgmap

20

GIMP (программа обработки графических изображений) делает довольно хорошую работу... http://www.makeuseof.com/tag/create-image-map-gimp/

18

вы можете использовать онлайн-инструмент, как онлайн-карта изображений

7

этот сервис является лучшим в онлайн-редактировании карт изображений, которые я нашел до сих пор:http://www.image-maps.com/

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

ответ от Мебиуса не ошибочен, но в некоторых случаях вы должны использовать imagemaps, даже если он кажется немного старым и ржавым. Например, в информационном бюллетене, где вы не можете использовать HTML/CSS, чтобы делать то, что хотите.

3

есть также Mappa -http://mappatool.com/.

Он поддерживает только полигоны, но они, безусловно, не самое сложное :)

3

Я нашел Adobe Dreamweaver довольно хорошим в этом. Однако, это не бесплатно.

2

Это хороший инструмент, если вы генерируете только полигональную карту изображений: http://niceutils.com/developer/imagemap-generator

-1