帶有頁面的HTML頁面，其中包含從一幀到另一幀的鏈接（帶有交互式地圖）
[英]Html page with frames with links from one frame to another (with interactive map)
問題描述
我已經下載了以下交互式地圖 ，並嘗試將其放入框架中。 我創建了一個main_page.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”作為鏈接的目標。 我希望將其擴展到我的框架集上的正確框架（即main_page.html中定義的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})
})
}
}
提前致謝！
1 個解決方案
解決方案1
1 2016-10-17 10:09:17
嘗試這個
_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'];
}
});
然后在配置中添加'target'：'frame'
希望對您有所幫助
html將內容從一幀移動到另一幀
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.