帶有從一幀到另一幀鏈接的幀的Html頁面（帶有交互式地圖）

我已經下載了interactive map，我試圖將它放入框架集中。我已經創建了一個main_page.html，含有：帶有從一幀到另一幀鏈接的幀的Html頁面（帶有交互式地圖）

<html> 
<frameset cols="30%,70%" frameborder=no border=no framespacing=no> 
<frame src="map.html" name="frame_map"> 
<frame src="right.htm" name="frame_chart"> 
</frameset> 
</html>

文件map.html（我購買）具有的CSS和config.js爲地圖的工作。用於配置管腳（其可以在地圖被用於城市）的典型代碼如下：

{ 
    'shape':'circle', 
    'hover': 'Manchester', 
    'pos_X':209, 
    'pos_Y':300, 
    'diameter':8, 
    'outline':'#FFCECE', 
    'thickness':1, 
    'upColor':'#FF0000', 
    'overColor':'#FFEE88', 
    'downColor':'#00ffff', 
    'url':'http://www.html5interactivemaps.com', 
    'target':'same_window', 
    'enable':true, 
},

然而，在地圖上僅允許「same_window」或「new_window」作爲鏈接目標。我想這將擴大到右邊框上我的框架集（即frame_chart如main_page.html定義。我認爲除了應該在下面的代碼進行...... 但如何？

function addEvent(id,relationId){ 
    var _obj = $('#'+id); 
    var _Textobj = $('#'+id+','+'#'+map_config[id]['namesId']); 

    _obj.attr({'fill':map_config[id]['upColor'],'stroke':map_config['default']['borderColor']}); 
    _Textobj.attr({'cursor':'default'}); 
    if(map_config[id]['enable'] == true){ 
     if (isTouchEnabled()) { 
      //clicking effect 
      _Textobj.on('touchstart', function(e){ 
       var touch = e.originalEvent.touches[0]; 
       var x=touch.pageX+10, y=touch.pageY+15; 
       var tipw=$('#map-tip').outerWidth(), tiph=$('#map-tip').outerHeight(), 
       x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(20*2) : x 
       y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y 
       $('#'+id).css({'fill':map_config[id]['downColor']}); 
       $('#map-tip').show().html(map_config[id]['hover']); 
       $('#map-tip').css({left:x, top:y}) 
      }) 
      _Textobj.on('touchend', function(){ 
       $('#'+id).css({'fill':map_config[id]['upColor']}); 
       if(map_config[id]['target'] == 'new_window'){ 
        window.open(map_config[id]['url']); 
       }else if(map_config[id]['target'] == 'same_window'){ 
        window.parent.location.href=map_config[id]['url']; 
       } 
      }) 
     } 
     _Textobj.attr({'cursor':'pointer'}); 
     _Textobj.hover(function(){ 
      //moving in/out effect 
      $('#map-tip').show().html(map_config[id]['hover']); 
      _obj.css({'fill':map_config[id]['overColor']}) 
     },function(){ 
      $('#map-tip').hide(); 
      $('#'+id).css({'fill':map_config[id]['upColor']}); 
     }) 
     //clicking effect 
     _Textobj.mousedown(function(){ 
      $('#'+id).css({'fill':map_config[id]['downColor']}); 
     }) 
     _Textobj.mouseup(function(){ 
      $('#'+id).css({'fill':map_config[id]['overColor']}); 
      if(map_config[id]['target'] == 'new_window'){ 
       window.open(map_config[id]['url']); 
      }else if(map_config[id]['target'] == 'same_window'){ 
       window.parent.location.href=map_config[id]['url']; 
      } 
     }) 
     _Textobj.mousemove(function(e){ 
      var x=e.pageX+10, y=e.pageY+15; 
      var tipw=$('#map-tip').outerWidth(), tiph=$('#map-tip').outerHeight(), 
      x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(20*2) : x 
      y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y 
      $('#map-tip').css({left:x, top:y}) 
     }) 
    } 
}

！

在此先感謝

來源

2016-10-17 Andreuccio

試試這個

_Textobj.mouseup(function(){ 
     $('#'+id).css({'fill':map_config[id]['overColor']}); 
     if(map_config[id]['target'] == 'new_window'){ 
      window.open(map_config[id]['url']); 
     }else if(map_config[id]['target'] == 'same_window'){ 
      window.parent.location.href=map_config[id]['url']; 
     } 
     // Add to map to your frame with id frame_chart 
     else if(map_config[id]['target'] == 'frame') 
     { 
      document.getElementById('frame_chart').src = map_config[id]['url']; 
     } 

    });

然後添加 '目標'： '框架'，在配置

我希望它會幫助

來源

2016-10-17 10:09:17

謝謝你。我已經嘗試過，但它沒有工作。在地圖上點擊時沒有任何反應 – Andreuccio

您是否在配置中將目標更改爲幀？ –

是的，我有。我已經添加了'map_config'和'pin_config'的代碼。現在我的典型銷讀取： '{ '形狀'： '圓'， '懸停'： '曼徹斯特'， 'POS_X'：209， 'POS_Y'：300， '直徑'：8， 'outline'：'＃FFCECE'， 'thickness'：1, 'upColor'：'＃FF0000'， 'overColor'：'＃FFEE88'， 'downColor'：'＃00ffff'， 'url' ：'http：//www.html5interactivemaps.com'， 'target'：'frame'， 'enable'：true， }，' – Andreuccio

帶有從一幀到另一幀鏈接的幀的Html頁面（帶有交互式地圖）

回答

相關問題