HTML-страница с фреймами со ссылками с одного фрейма на другой (с интерактивной картой)

Я скачал следующую интерактивную карту и пытаюсь втиснуть ее в набор фреймов. Я создал 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" в качестве целей для ссылок. Я хотел бы, чтобы это было расширено до нужного кадра в моем наборе кадров (т.е. 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})
        })
    }   
}

Заранее спасибо!

Источник

1 ответ

Попробуй это

_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' в config

Надеюсь, это поможет

Источник
Другие вопросы по тегам