如何到达对象值(Map-Areas)

时间:2016-07-22 07:23:18

标签: javascript

我创建了一个对象地图区域,可以使用图片动态更改地图区域。现在我有一个功能,您应该将其重定向到另一个地图区域。按某个区域时,我有一个确认窗口。按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);  

  })
}

1 个答案:

答案 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
  }
}