Обновление по onResize зацикливается в IE
 

пкмосква.рф

Есть карта, на ней хочется показывать полупрозрачные зоны!

Пока удалось реализовать сменой картинок, как по ссылке выше - и теперь в iframe загружается изображение карты, а сверху накладываются полупрозрачные gif с изображением области (экономит 2 МБ)!

Проблемы:

1. Размер фрейма задать в процентах не получается, видимо из-за его пложенности в div "content". Процентом задаётся ширина, а высота высчитывается JS относительно ширины и устанавливается при загрузке страницы, но при изменении масштаба или размера окна браузера = ширина меняется, а высота остаётся неизменной!

пробывал обновлять страницу при изменении размера onResize='window.location.reload() - в IE зацикливается обновление, возможно нужно просто дописать в функцию контроль зацикливания, как лучше это сделать? (Хочется перерисовывать, а не перезагружать страницу)

2. Если есть идеи того, как карту реализовать иначе, например просто img со сдвигом рисунка на рисунок? - у меня не получилось, сдвиг работает почти до конца границы соседнего рисунка, но остаётся ещё 1em до края, изображения накладываются неточно, пришлось делать в ифрейме. Возможно можно сдвинуть изображения, если они не вертикально стоят, а горизонтально, как сделать? Я не знаю из-за чего возникает эта разница и невозможность доконца сдвинуть изображение, может это возможно?

3. Может работали уже и ту же задачу проще реализовать с помощью google.maps или Яндекс.карт?

Извините, что так длинно. Я ещё начинающий и поиск по форуму и интернету мне не очень помогает в этом вопросе, объём необходимых знаний явно больше моего

Всем спасибо!

reload() было заменено на повторный вызов функции назначающей размеры <iframe>

// function kartu(i){document.getElementById('img1').src=i} - этот скрипт раньше менял одно изображение на другое
// Изменение размеров фрейма-карты, при изменении масштаба или размеров окна браузера - 'onload='
// После изменения размеров фрейма, обновляет его содержимое, дабы перерисовать заново - 'onresize='

onload=onresize=function reload(){var e=document.getElementById('iframe');e.height=e.clientWidth*0.4833;}

и обновляющей его содержимое

НО в данной реализации многое не устраивает, например быстродействие

У меня пока нет удобных средств отслеживать обращения браузера к файлам и измерять их время, онлайн тесты не хочется использовать

Когда напишу тесты, буду оптимизировать загрузку страниц

(ещё скрипт файлом вставить неудалось, но это видимо только на локальном сервере)

Извините за бестактность, а карты от Yandex/Google/... совсем не подходят? У них вроде есть всё, что надо для решения таких задач?

Я тут задал этот вопрос, с картами меньше работал, если говорите, что всё есть, сейчас проверю...

Мне казалось, что произвольные области сложно нарисовать там

Я только начинаю учить js, мне намного больше интересно самому что-то делать

Проверил - у меня мне больше нравится)

В Яндексе точек больно много нужно сделать будет, чтобы скругление получить, кроме того код карт у Я уж больно мне ненравится, большой!

В Google не нашёл области как выделять...

Кроме того, я планирую прокрутку у себя сделать, похожую на Яндекс.. если терпения хватит

(Паталогически не люблю готовых решений, максимум подглядеть могу, когда своё уже сделаю)