为什么 maphilight 库不能使用图像映射和 handlebar.js
why maphilight library is not working with image maps and handlebar.js
这是我的fiddle。
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");
}
我正在尝试制作一个带有图像和图像映射的电子新闻纸网站。
当我使用 maphilight
库来突出显示带有 handlebar.js
的图像映射时,它不起作用。
我正在尝试使用:
$('.map').maphilight();
请给我一个解决方案。
因为没有人回答我的问题,我自己解决了。我犯了一个愚蠢的错误,我必须使用
.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 编辑问题。
这是我的fiddle。 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");
}
我正在尝试制作一个带有图像和图像映射的电子新闻纸网站。
当我使用 maphilight
库来突出显示带有 handlebar.js
的图像映射时,它不起作用。
我正在尝试使用:
$('.map').maphilight();
请给我一个解决方案。
因为没有人回答我的问题,我自己解决了。我犯了一个愚蠢的错误,我必须使用
.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 编辑问题。