Столкнулся я тут с одной проблемой.
Клиентка захотела показать для всех картинку с персоналом, а когда указатель мышки над конкретным человеком — имя его показать под картинкой (над картинкой, не важно короче).
Вначале я подумал про image map, но почему-то мне эта идея показалась слишком сложной, старомодной и т.д.
(Отмечу, что сайт основан на Joomla и редактор JCE радостно упрощает и выбрасывает лишнее в редактируемом тексте страницы, в том числе и image map, и атрибуты id и проч.)
Посему я решил просто — отображаем картинку, у неё выставляем класс вида perons-XX, где XX выступает идентификатором для группы людей, отображённых на этой картинке, а у каждого параграфа, ответственного за конкретного человека, выставляем класс вида "persons-XX rect-X1-Y1-X2-Y2".
Вначале всё было хорошо (с помощью jQuery), но.. выяснилось, что определить координаты точки картинки, над которой сейчас находится мышка, средствами jQuery не так-то просто: offset() возвращал различные значения под разными бразуерами (отличились Chrome/Safari, Opera, FF2).
В следующий раз я решил использовать стандартные image maps, но с одним "но" — формировать их динамически. Эврика! (Я оставляю в силе JCE и клиент сам может редактировать страницы). Но, как говорится, враг подкрался незаметно: под IE7 код совершенно не хотел работать.
Все остальные браузеры, включая IE8, работали прекрасно!Дальнейшее копание показало, что IE7 совершенно не воспринимает динамически создаваемый <map />, более того, такой фокус не прокатывал:
$("<map />").attr("name", "map1");
Точнее говоря, он вроде бы строил image map, но события мыши на эти области не подключались и всё тут. Обидно, что потрачено кучу времени и что в итоге я вернулся к статическому коду (картинка и image map расписаны в тексте статьи, пришлось отключить JCE), динамически лишь события подключаются. Этот вариант работает везде!
Немного ссылок:
