Интерактивная карта

[rgl]

Сделал карту коттеджного поселлка, а рядом с картой таблица с информацией о владельцах участков. При наведении мышки на строчку таблицы номер соответствующего участка подсвечивается. При наведении мышки на номер участка строчка в таблице тоже подсвечивается, и при необходимости таблица скроллится, но с задержкой в полсекунды, чтобы при при простом проведении мышки таблица не "прыгала", а нужная строчка появлялась только если мышку остановить на интересующем участке.

Вся реальная информация находится в таблице, которая видна только в закрытом разделе форума, а это только демонстрашка. Покритикуйте:

http://forum.vzaokskom.ru/maps/limber_draft.htm

[Great Rash]

100500 спанов... мне вас жаль, сколько труда...

Я бы канвас заюзать попробовал. Еще неплохо бы курсор менять что ли.

[Vlad]

Заглянул в код, аж похолодел. Надеюсь не в ручную это все делалось? Много вещей можно оптимизировать, повторяется position:absolute у <span>, а ведь его можно в стили запихнуть. Функции в mouseover тоже не нужны, отслеживать их можно глобально, а получить номер по id элемента, на который курсор наведен, только m убрать вначале надо.

[Veseloff]

Плохо, чо. Какой-то экшн случается только с текстом, а не с областью. В данной задаче это, может быть, и некритично, но на другой карте, где одна область может занимать и пол экрана это уже не сканает.

[rgl]

Заглянул в код, аж похолодел. Надеюсь не в ручную это все делалось?

Делалось так - на фоне картинки размещались циферки, для этого использовалась программа inkscape, потом файл был сохранен в формате svg и из него уже скриптом вытаскивались координаты каждого числа и выводились уже в виде html

[Great Rash]

Почему не заюзать канвас? Если уж все равно в inkscape делалось... Есть же библиотека raphael.js которая кроссбраузерно все забубенит в VML и SVG...

[satantx]

Сделайте всё во флэше

[Veseloff]

Сделайте всё во флэше

И тогда часть пользователей её не увидят

[rgl]

Почему не заюзать канвас? Если уж все равно в inkscape делалось... Есть же библиотека raphael.js которая кроссбраузерно все забубенит в VML и SVG...

Пытаюсь заюзать map и area

Возникает такая проблема - при наверении мышки на область правильно, как я того и хочу, отрабатывается onmouseover() но когда мышка попадает на текст (циферку) поверх картинки, отрабатывается onmouseout() хотя за пределы области мышка не уходит. Можно ли как-нибудь это обойти?

Во флэше не могу, во-первых, он есть на у всех (вопреки привычному мнению, что word, excel и flash есть везде). Во-вторых, я флэша не знаю, не умею. А в-третьих, в дальнейшем пользователю будет выдаваться разная информация в таблице, в зависимости от его прав. Как это сделать на php я предлавляю, но не на флэше

[Great Rash]

Можно ли как-нибудь это обойти?

Можно читайте про event bubbling, event propagation и т.п.

[swetlana]

И тогда часть пользователей её не увидят

в случае с canvas, кстати, тоже.

[Great Rash]

в случае с canvas, кстати, тоже.

Неправда, это увидят все. Raphael.js выдает кроссбраузерный код.

[swetlana]

о как!

спасибо за наводку.

[rgl]

Можно читайте про event bubbling, event propagation и т.п.

http://javascript.ru/tutorial/events/intro

Внимательно почитал, того, что нужно, не нашел.

Я могу запретить передачу ("всплывание") события от одного элемента к другому. Но как запретить ПОЯВЛЕНИЕ события?

Вот, например, у меня есть картинка, на картинку наложена карта, в тэге area прописаны обработчики onmouseover и onmouseout

На картинке находится текст (слева внизу), хочется вот чего - чтобы когда мышка попадает на этот текст (который находится внутри area,

событие onmouseout для area не наступало!

Перепробовал несколько вариантов, ничего не помогает

http://forum.vzaokskom.ru/maps/test.htm

Другими словами, можно ли сделать так, чтобы для мышки текста вообще не существовало, а пользователям он был виден?

Edited January 24, 2011 by rgl

[Great Rash]

Я понял, так как вы хотите сделать нельзя.

[rgl]

Полностью переработал.

Теперь сделал с помощью map и area

Чтобы циферки (номера участков) не мешали, картинку с настоящей картой положил вниз, поверх нее циферки-номера, еще сверху - прозрачный гиф вместе с map и area

Критикуйте.

http://forum.vzaokskom.ru/maps/limberova-interactive.php

Edited February 15, 2011 by rgl

[swetlana]

Первое, что бросается в глаза — цифры не помещаются на отведённом им участке, но при этом список справа достаточно большой. Может пересмотреть распределение места?

[rgl]

Первое, что бросается в глаза — цифры не помещаются на отведённом им участке, но при этом список справа достаточно большой. Может пересмотреть распределение места?

Достаточно много народа еще пользуется экранами 1024ч768 и когда картинка по высоте была больше, были жалобы на две полосы прокрутки, поэтому картинку пришлось уменьшить.