ImageMapster с несколькими изображениями и картами

Question

Можно ли использовать ImageMapster с несколькими изображениями и картами?

В моем сценарии есть несколько изображений. Каждое изображение имеет свою собственную уникальную карту, и одновременно отображается только одно изображение. Когда щелкнули часть одного изображения, оно изменяется на другое изображение с другой картой. Я делаю это, напрямую изменяя значения «src» и «useMap» элемента. Однако ImageMapster будет работать только на первом изображении, а остальные не будут выделены. Я попытался развязать и перевязать ImageMapster до и после изменения изображения/карты, и это не помогает.

Как я могу сделать эту работу с ImageMapster?

Answer 1

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

Вспомните, как работает jQuery с введенными элементами против элементов, присутствующих при создании DOM. Для введенных элементов jQuery должен использовать метод .on(), чтобы уловить их события, да? Ну, когда вы меняете элементы DOM на лету, вы удаляете/повторно добавляете их в DOM. Поэтому плагин , который был инициализирован предыдущим элементом, теперь должен быть инициализирован вновь введенному элементу, и он должен иметь возможность использовать тактику .on() для управления этим новым элементом. Это очень многого требует плагина.

Однако все не потеряно.

jsFiddle demo

Выше jsFiddle рабочий пример, слепленный из двух собственных примеров разработчика, который показывает грубое приближение того, что вы описали в своем вопросе. Две карты изображений находятся на одной странице, но изначально они скрыты (я использую только два изображения/изображения, но может быть несколько изначально скрытых, а не только один).

Когда щелкнули первую карту изображения, в обратном вызове imagemapster onClick я скрою div, содержащий это изображение, и покажу следующее изображение div. Это действительно так просто:

var image = $('#vegetables'); 
image.mapster(
{ 
    fillOpacity: 0.4, 
    onClick: function (e) { 
     var newToolTip = defaultDipTooltip; 
     $('#statemapDIV').show(); <==================== 
     $('#veggieDIV').hide(); <==================== 
    }, 
    toolTipClose: ["tooltip-click", "area-click"], 
    areas: [ 
     { 
      key: "dip", 
      toolTip: defaultDipTooltip 
     }, 
     { 
      key: "asparagus", 
      strokeColor: "FFFFFF" 
     } 
     ] 
}); 

Я надеюсь, что это решение будет работать для вас.

Answer 2

Сколько у вас разных изображений (и изображений)?

Если они не для многих, я предварительно загрузил бы все изображения и изображения в разные DIV и спрячу их всех, кроме первого. Затем вы можете использовать .hide() и .show(), чтобы скрыть DIV, содержащий текущее изображение, и показать DIV с изображением, которое вы хотите показать. Таким образом, каждый образ может иметь собственную карту изображений, без необходимости менять DOM на лету.

Одно предупреждение: У меня была проблема с активацией imagemapster на изображениях в скрытых DIV. В IE8 при показе DIV изображение остается невидимым, если imagemapster активирован на изображении, в то время как DIV был скрыт. Возможно, это связано с некоторыми обстоятельствами, характерными для моего случая, но если функциональность IE8 важна для вас, я предлагаю вам провести некоторое тестирование, прежде чем полностью принять это решение.