I have downloaded the following interactive map, and I am trying to fit that into a frameset.
I have created a main_page.html, containing:
<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>
The file map.html (which I purchased) has css and config.js for the map to work.
The typical code for configuring a pin (which can be used for cities in the map) is the following:
{
'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,
},
However, the map only allows 'same_window', or 'new_window' as targets for links. I would like that to be extended to the right frame on my frame set (i.e. frame_chart as defined in the main_page.html.
I believe the addition should be made in the following code...but how?
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})
})
}
}
Thanks in advance!
Try this
Then add 'target':'frame', in config
I hope it will help