我创建了一个对象地图区域,可以使用图片动态更改地图区域。现在我有一个功能,您应该将其重定向到另一个地图区域。按某个区域时,我有一个确认窗口。按yes或no后,它应该将您重定向到特定的地图。但是如何?
// Object Map-Area
var _images = {
homepage: {
path: 'homepage.jpg',
areas: [{
coords: '45,143,106,158',
text: 'Homepage',
clickHandler: doSomething
}]
},
}
//DOM-Elements
image.areas.forEach(function(area) {
var areaElem = document.createElement('AREA');
areaElem.coords = area.coords;
areaElem.setAttribute('link', area.goto);
areaElem.setAttribute("title", area.text);
areaElem.setAttribute("shape", "rect");
//click handler and click listener
areaElem.addEventListener('click', onArea_click);
areaElem.addEventListener('click', area.clickHandler);
_map.appendChild(areaElem);
})
}
function onArea_click(domEvent) {
//update cuurent imageid with current link
_currentImageId = domEvent.target.getAttribute('link');
refreshImage();
}
function doSomething(e){
var areaClicked= e.target;
var r = confirm("Data will get lost!");
if (r == true) {
// I know I need something like in the function onArea_click
//Now how can I redirect to map homepage ?
} else {
//or to a different one?
}
// There is missing code but it's not important for what I need now because then the code will get sooo long.
编辑:这里是整个refreshImage函数。
function refreshImage() {
var image = _images[_currentImageId];
_image.src = image.path;
_map.innerHTML = "";
image.areas.forEach(function(area) {
var areaElem = document.createElement('AREA');
areaElem.coords = area.coords;
areaElem.setAttribute('link', area.goto);
areaElem.setAttribute("title", area.text);
areaElem.setAttribute("shape", "rect");
areaElem.addEventListener('click', onArea_click);
areaElem.addEventListener('click', area.clickHandler);
_map.appendChild(areaElem);
})
}
答案 0 :(得分:0)
function doSomething(e) {
var areaClicked= e.target;
var r = confirm("Data will get lost!");
if (r == true) {
_currentImageId = e.target.getAttribute('link'); // or "homepage"
refreshImage();
} else {
// do nothing; they don't want to lose any data
}
}