Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Всплывающее изображение imagemap (https://javascript.ru/forum/dom-window/8122-vsplyvayushhee-izobrazhenie-imagemap.html)

Pinot 09.03.2010 15:07

Всплывающее изображение imagemap
 
Подскажите пожалуйста как можно сделать в стандартной imagemap всплывающие изображения. При наведении на область карты должно всплывать изображение, для каждой области свое.

subzey 09.03.2010 15:16

Собственно, у <area> есть onmouseover и onmouseout, дерзайте!

Pinot 09.03.2010 20:34

Цитата:

Сообщение от subzey (Сообщение 47218)
Собственно, у <area> есть onmouseover и onmouseout, дерзайте!

Я знаю что есть, но вопрос как вызвать всплывающую картинку при наведении курсора.

Pinot 21.03.2010 21:14

Не как не получается. Может кто помочь?
Есть 100 областей карты изображений 1,2,3,...
Есть 100 картинок 1,2,3,...
Надо при наведении на область 1 вывести картинку 1, на область 2 вывести картинку 2 и т.д. чтобы картинка всплывала правей и выше курсора

SkyLight 22.03.2010 13:00

Раз уж на area можно повесить обработчики, имеются нужные картинки, а главное - event, то уж при вдумчивом чтении мануалов все получится. Не надо требовать от людей целиком решить Вашу задачу. Они это могут, но не уже ли трудно сначала поэкспериментировать самому? Вот когда даже эксперименты ни к чему не приведут, тогда уж и просите помощи с кодом, приведя при этом плоды ваших экспериментов.

Pinot 22.03.2010 17:32

Цитата:

Сообщение от SkyLight (Сообщение 48579)
Раз уж на area можно повесить обработчики, имеются нужные картинки, а главное - event, то уж при вдумчивом чтении мануалов все получится. Не надо требовать от людей целиком решить Вашу задачу. Они это могут, но не уже ли трудно сначала поэкспериментировать самому? Вот когда даже эксперименты ни к чему не приведут, тогда уж и просите помощи с кодом, приведя при этом плоды ваших экспериментов.

Я не чего не требую!!! Не можете помочь, например дать нужную ссылку, проезжайте мимо.

SkyLight 22.03.2010 18:23

Ну вот можно почитать, например, про то, как с помощью event получать координаты мыши. Скажем, здесь. А всплывающие изображения делать в DIV с position: absolute. Да и вообще, задача более чем обычная, а известный всем поисковик даст информации просто море.

kibal4iw 26.03.2010 16:50

Вот так сидишь, читаешь форум, и учишься потихоньку, так глядишь и 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>

Shaci 26.03.2010 20:39

Цитата:

Сообщение от kibal4iw (Сообщение 49205)
Вот так сидишь, читаешь форум, и учишься потихоньку, так глядишь и JavaScript изучишь, вобщем за задачу спасибо.

что правда, то правда
Я в ваш код не смотрел внимательно, но вот эта функция - mouseShowHandler, только определена, и нигде не вызывается.

kibal4iw 26.03.2010 21:42

Цитата:

Сообщение от Shaci (Сообщение 49228)
Я в ваш код не смотрел внимательно, но вот эта функция - mouseShowHandler, только определена, и нигде не вызывается.

Да она там и ненужна:)
Я просто несколько вариантов выдумывал, да вот в одном из них(финальном) использовал, спасибо что сообщили, а навожу людей на ложный след:yes:


Часовой пояс GMT +3, время: 05:21.