Как изменить Google Doc, отображаемый на странице PHP, когда пользователь щелкает область карты через ImageMapster?

Question

Как изменить Google Doc, отображаемый на странице PHP, когда пользователь щелкает область карты через ImageMapster?

Я новичок в js и php, и мне очень жаль, если я не вижу ничего очевидного. Вот ситуация, за которой следует вопрос:

У меня отображается map1.png, и когда пользователь наводит курсор на область этого изображения, отображается соответствующая область второго изображения (map2.png). Я получил это работает с помощью imagemapster. Вот код:

    $(document).ready(function ()
{
$('#areas').mapster({
singleSelect : false,
clickNavigate: true,
render_highlight : { altImage : 'Images/map2.png' },
mapKey: 'module',
fill : true, altImage : 'Images/map2.png',
fillOpacity : 1,
});
});

и вот разметка для изображения:

<img id="areas" src="Images/map.png" width="927" height="704" alt="Mapa pedagógico" usemap="#areas">

и для одной из множества областей нанесены на карту:

<map name="areas">
<area module="social" shape="circle" coords="463,461,63" href="programmation-noob-social.html" alt="social"/>

Вот такая вещь: http://www.eloquatranslations.com/mapa-pedagogico.php

Обратите внимание, что на странице также отображается таблица Google. Я хочу найти способ изменить этот документ Google, когда пользователь нажимает одну из областей изображения. Каждая область карты img должна соответствовать отдельной таблице.

Спасибо за любые советы.

0

google-docs javascript jquery php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Решено!

Я дал шоу id для iframe, и опустошил ЦСИ тег, поэтому он может быть заполнен моим сценарием.

<iframe id="show" width="100%" height="610" src=""></iframe>

В сценарии js я использовал по щелчку функция, которая создает переменную, которая будет установлена второй функцией findDoc. Эта функция создает переменную findDoc на основе data.key и помещает это в шоу iframe, в ЦСИ тег.

$(document).ready(function (){
$('#areas').mapster({
onClick : findDoc,
singleSelect : true,
clickNavigate: false,
render_highlight : { altImage : 'Images/map2.png' },
mapKey: 'module',
fill : true, altImage : 'Images/map2.png',
fillOpacity : 1
});
});
function findDoc(data){
var srcBegin = 'https://docs.google.com/spreadsheets/d/';
var srcEnd = '/pubhtml?widget=true&amp;headers=false';
var srcMid = data.key;
$('#show').attr('src',(srcBegin+srcMid+srcEnd));
}

Затем я установил модуль ключи в каждой области карты для соответствующего идентификатора Google Doc:

<area module="1q7tRr6IkCDjS_mmDRWCj-ViExIPQn8imOu6MTiwKyWw" shape="circle" coords="463,461,63" href="#" alt="social"/>

И это прекрасно работает.

Для настоящих программистов это может показаться простым … Для меня было очень приятно запустить его! 🙂

0