Использование IMG-карты для отображения больших изображений

Я пользуюсь IMG-картой, в которой много мелких фотографий. Когда я наводил курсор на каждое изображение, он отображает большее изображение. Как мне это сделать? Я не против использования javascript, css и т. Д., Пока это работает. Просьба привести пример.Использование IMG-карты для отображения больших изображений

HTML OF IMG MAP

<img src="img.jpg" alt="Main Photo - Please View With Images On" 
usemap="#Map" class="center" style="width:900px;" border="0" /> 
<map name="Map" id="Map"> 
<area class="1" shape="rect" coords="4,3,225,150" /> 
<area class="2" shape="rect" coords="2,152,221,303" /> 
<area class="3" shape="rect" coords="3,303,221,452" /> 
</map>

Каждый класс будет иметь другое изображение, чтобы увидеть больше.

источник

2012-06-21 L84

Возможное повторение http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map – Exor

предлагает получить плагин всплывающей подсказки, который можно легко найти в google. Храните URL-адрес изображения в каждой области в атрибуте данных, передайте его плагину – charlietfl

@charlietfl - Я попытался использовать qTip 2, но имеет проблему, см. Http://stackoverflow.com/questions/11131941/qtip-2- and-images – L84

Я думаю, вы хотите что-то вроде приведенной ниже скрипки. Код, написанный очень грубым & может быть оптимизирован. Просто проверьте, хотите ли вы это или что-то еще.

Демо:http://jsfiddle.net/3GF6s/3/

источник

2012-06-21 06:39:04 SVS

Спасибо за помощь. Кажется, что он работает, но имеет несколько сбоев. Он будет мерцать и выключать, если у вас нет мыши правильно. – L84

Yup! Я знаю, как сказано, что код написан грубо. Вы можете стилизовать его в соответствии с вашими потребностями. – SVS

Вот способ сделать это с ImageMapster:

http://jsfiddle.net/zSBL5/

Чтобы сделать эту работу с помощью встроенного в подсказке API вам нужно сделать несколько вещей. Сначала нужно добавить атрибут в каждой области, как это:

<area data-key="2,all" shape="rect" coords="0,90,82,170" 
    href="http://www.shelterness.com/pictures/amazing-diy-photo-tiles-1-500x373.jpg" />

Примечание data-key. Это «mapKey» ImageMapster. Единственная причина, по которой нам нужна эта ситуация, - создать единую группу областей, называемую «все», которая может использоваться для отображения одной и той же всплывающей подсказки для каждой области. Каждая область будет иметь такой атрибут, но с другим номером, например. data-key="3,all", data-key="4,all" и т. Д.

Тогда вот код для связывания imagemapster:

$('img').mapster({ 
    toolTipContainer: $('#tooltip-container'), 
    mapKey: 'data-key', 
    areas: [ { 
     key: 'all', 
     toolTip: true 
    }], 
    showToolTip: true, 
    onShowToolTip: function(data) { 
     if (this.href && this.href!='#') { 
      data.toolTip.html('<img src="'+this.href+'">'); 
     } 
    }});

Вот что означает, что каждый вариант:

1) toolTipContainer должен содержать HTML для шаблона, чтобы показать всплывающую подсказку. В скрипке вы увидите, что я добавил скрытый div с идентификатором «tooltip-container»

2) mapKey - это имя атрибута, добавленного в каждую область. Этот атрибут может содержать одно или несколько значений, разделенных запятыми. Imagemapster объединяет области для выделения, которые разделяют первое значение, поэтому используйте разные, если вам не нужно группировать какие-либо области. Второе значение должно быть одинаковым для каждой области, я использую это для активации всплывающих подсказок для всех областей.

3) areas - это массив информации форматирования, специфичной для конкретной области. Обычно вы используете это, чтобы контролировать, как отображаются эффекты подсветки для каждой области. В вашем случае я просто использую его для активации всплывающих подсказок для всех областей. Ключ all соответствует каждой области, так как все они имеют это как второй ключ, а toolTip: true позволяет всплывающие подсказки. Обычно вы скажете toolTip: "some text specific to this area:", и этот текст будет показан только в контейнере подсказок по умолчанию. В вашем случае мы хотим показать изображение, и я хочу захватить URL-адрес изображения из самой области, поэтому мне нужно обработать его в функции, когда будет показана всплывающая подсказка.

4) showToolTip говорит, что включает всплывающие подсказки для всей карты.

5) onShowToolTip определяет функцию, которая вызывается всякий раз, когда отображается всплывающая подсказка. Отсюда вы можете перехватить его и изменить содержимое, чтобы отобразить изображение из этой области.

Это должно быть проще, но API-интерфейс всплывающей подсказки в imagemapster действительно разработан вокруг очень простой модели, где у вас есть только жесткий код для каждой области. Это временное решение для захвата URL-адреса из href каждой области.

источник

2012-06-21 11:23:31

Использование IMG-карты для отображения больших изображений

ответ

Смежные вопросы