为啥 maphilight 库不能使用图像映射和 handlebar.js

Posted

技术标签:

【中文标题】为啥 maphilight 库不能使用图像映射和 handlebar.js【英文标题】:why maphilight library is not working with image maps and handlebar.js为什么 maphilight 库不能使用图像映射和 handlebar.js 【发布时间】:2018-01-05 09:00:10 【问题描述】:

这是我的小提琴。 https://jsfiddle.net/vsjtfhkk/

$(function() 
  $('img[usemap]').maphilight()
);

// Define our data object
var context = 
  "url": "http://1jpg-site.orionhub.org:8000/1.jpg",
  "class": "img-responsive center-block map",
  "map": [
    "shape": "rect",
    "coords": "2,1,106,116",
    "function": "article1()"
  , 
    "shape": "rect",
    "coords": "111,2,464,114"
  , 
    "shape": "rect",
    "coords": "476,9,586,116"
  , 
    "shape": "rect",
    "coords": "4,118,588,136"
  , 
    "shape": "poly",
    "coords": "3,143,588,143,585,442,354,447,347,338,0,336"
  , 
    "shape": "rect",
    "coords": "2,340,351,503"
  , 
    "shape": "rect",
    "coords": "3,508,352,735"
  , 
    "shape": "rect",
    "coords": "354,450,588,733"
  ]
;
var context1 = 
  "url": "paper\\pages\\17062016\\2.jpg",
  "class": "img-responsive center-block map",
  "map": [
    "shape": "rect",
    "coords": "2,1,106,116"
  , 
    "shape": "rect",
    "coords": "111,2,464,114"
  , 
    "shape": "rect",
    "coords": "476,9,586,116"
  , 
    "shape": "rect",
    "coords": "4,118,588,136"
  , 
    "shape": "poly",
    "coords": "3,143,588,143,585,442,354,447,347,338,0,336"
  , 
    "shape": "rect",
    "coords": "2,340,351,503"
  , 
    "shape": "rect",
    "coords": "3,508,352,735"
  , 
    "shape": "rect",
    "coords": "354,450,588,733"
  ]
;

function page1() 
  var source = $("#image-template").html();
  var template = Handlebars.compile(source);
  // Pass our data to the template
  var theCompiledHtml = template(context);

  // Add the compiled html to the page
  $('.content-placeholder').html(theCompiledHtml);


function page2() 
  var source = $("#image-template").html();
  var template = Handlebars.compile(source);
  // Pass our data to the template
  var theCompiledHtml = template(context1);

  // Add the compiled html to the page
  $('.content-placeholder').html(theCompiledHtml);


function article1() 
  alert("yes i am passed");

我正在尝试制作一个带有图像和图像地图的 eNewsPaper 网站。

当我使用maphilight 库来突出显示带有handlebar.js 的图像映射时,它不起作用。

我正在尝试使用:

$('.map').maphilight();

请给我一个解决方案。

【问题讨论】:

【参考方案1】:

因为没有人回答我的问题,我自己解决了。只是我犯的一个愚蠢的错误,我必须使用

.maphilight();

函数范围内的函数。 这是正确的使用方法

function page1() 
    var source = $("#image-template").html();
    var template = Handlebars.compile(source);
    // Pass our data to the template
    var theCompiledHtml = template(context);

    // Add the compiled html to the page
    $('.content-placeholder').html(theCompiledHtml);
    $('.map').maphilight();
    $('#prev').addClass("disabled");
    $('#prev').removeClass("active");
    $('#2').removeClass("active");
    $('#3').removeClass("active");
    $('#next').removeClass("active");
    $('#1').addClass("active");



不是这个。

$(function() 
  $('img[usemap]').maphilight()
);

感谢@jwpfox 编辑问题。

【讨论】:

以上是关于为啥 maphilight 库不能使用图像映射和 handlebar.js的主要内容,如果未能解决你的问题,请参考以下文章

映射图像 onClick 事件加上 maphilight 悬停

使用 maphilight,imagemap 区域应该覆盖绝对定位的图像

Maphilight() 在放大/缩小图像地图后停止正常工作

需要具有多个翻转热点的图像映射的最佳答案

在 Bootstrap modal 内的图像中添加 maphilight

jQuery maphilight 通过单击将区域设置为 alwaysOn