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

Вы изменили цель на кадр в config? –

Да, у меня есть. Я добавил ваш код для 'map_config' и' pin_config'. Мой типичный контактный теперь гласит: '{ 'форма': 'круг', 'парения': 'Манчестер', 'pos_X': 209, 'pos_Y': 300, 'диаметр': 8, 'план': '# FFCECE', 'толщина': 1, 'upColor': '# FF0000', 'overColor': '# FFEE88', 'downColor': '# 00ffff', 'URL' : 'http: //www.html5interactivemaps.com', 'target': 'frame', 'enable': true, }, ' – Andreuccio

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

ответ

Смежные вопросы