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

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

Ответы

Ответ 1

Почему бы вам не использовать комбинацию 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-изображения по-прежнему использовать? и просмотреть наиболее проголосовавший ответ только для справки.

Ответ 5

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

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

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

Ответ 6

Существует также Mappa - http://mappatool.com/.

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

Ответ 7

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