Всплывающее изображение imagemap
Подскажите пожалуйста как можно сделать в стандартной imagemap всплывающие изображения. При наведении на область карты должно всплывать изображение, для каждой области свое.
|
Собственно, у <area> есть onmouseover и onmouseout, дерзайте!
|
Цитата:
|
Не как не получается. Может кто помочь?
Есть 100 областей карты изображений 1,2,3,... Есть 100 картинок 1,2,3,... Надо при наведении на область 1 вывести картинку 1, на область 2 вывести картинку 2 и т.д. чтобы картинка всплывала правей и выше курсора |
Раз уж на area можно повесить обработчики, имеются нужные картинки, а главное - event, то уж при вдумчивом чтении мануалов все получится. Не надо требовать от людей целиком решить Вашу задачу. Они это могут, но не уже ли трудно сначала поэкспериментировать самому? Вот когда даже эксперименты ни к чему не приведут, тогда уж и просите помощи с кодом, приведя при этом плоды ваших экспериментов.
|
Цитата:
|
Ну вот можно почитать, например, про то, как с помощью event получать координаты мыши. Скажем, здесь. А всплывающие изображения делать в DIV с position: absolute. Да и вообще, задача более чем обычная, а известный всем поисковик даст информации просто море.
|
Вот так сидишь, читаешь форум, и учишься потихоньку, так глядишь и JavaScript изучишь, вобщем за задачу спасибо.
Eли лень делать самому делать скрипт, то вот код, единственное я не стал разбираться с координатами для всплывания картинки. Изображения возьми свои. P.S. Учебником выступили статьи этого сайта. <style type="text/css"> img {border: 0;} #newDiv { position: absolute; margin-left: 90px; margin-top: 90px; } </style> <div id="body"> <map name="Img" id="Img"> <area nohref="nohref" id="ar_1" alt="тут ссылки нет" title="тут ссылки нет" shape="rect" coords="0,0,50,50"/> </map> <a href=""><img src="img/user_1.jpg" alt="9" usemap="#Img" width="300"></a> </div> <script> var body = document.getElementById("body"); var first = body.getElementsByTagName("map")[0]; function f_createElement() { var newDiv = document.createElement("div"); newDiv.innerHTML = "<img src='img/user_1.jpg' width='500' />"; newDiv.id = "newDiv"; body.insertBefore(newDiv, first); } function f_removeElement() { var newDiv = document.getElementById("newDiv"); newDiv.parentNode.removeChild(newDiv); } document.getElementById("Img").onmouseover = f_createElement; document.getElementById("Img").onmouseout = f_removeElement; </script> |
Цитата:
Я в ваш код не смотрел внимательно, но вот эта функция - mouseShowHandler, только определена, и нигде не вызывается. |
Цитата:
Я просто несколько вариантов выдумывал, да вот в одном из них(финальном) использовал, спасибо что сообщили, а навожу людей на ложный след:yes: |
Часовой пояс GMT +3, время: 15:00. |