У меня большое изображение, и я хочу сделать определенные части изображения доступными для просмотра. Я также хочу указать форму области, которой можно щелкнуть (квадрат, круг, обычай). Не полагаясь на 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-изображения по-прежнему использовать? и просмотреть наиболее проголосовавший ответ только для справки.
Ответ 2
Этот, на мой взгляд, лучший для онлайн (в то время как Dreamweaver лучше): http://www.maschek.hu/imagemap/imgmap
Ответ 3
GIMP (программа графического манипулирования изображениями) выполняет довольно хорошую работу... http://www.makeuseof.com/tag/create-image-map-gimp/
Ответ 4
вы можете использовать онлайн-инструмент, например онлайн-карту изображений
Ответ 5
Эта услуга является лучшей в редактировании карты онлайн-изображения, которую я нашел до сих пор: http://www.image-maps.com/
... но на самом деле он немного слаб, и я лично не использую его больше. Я переключился на GIMP, и это действительно очень хорошо.
Ответ от mobius не является ошибочным, но в некоторых случаях вы должны использовать imagemaps, даже если он кажется немного старым и ржавым. Например, в информационном бюллетене, где вы не можете использовать HTML/CSS, чтобы делать то, что вы хотите.
Ответ 6
Существует также Mappa - http://mappatool.com/.
Он поддерживает только полигоны, но они, безусловно, самые сложные части:)
Ответ 7
Я нашел, что Adobe Dreamweaver неплохо справляется. Однако это не бесплатно.
Ответ 8
Это хороший инструмент, если вы создаете только карту многоугольных изображений: http://niceutils.com/developer/imagemap-generator