Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.03.2010, 15:07
Новичок на форуме
Отправить личное сообщение для Pinot Посмотреть профиль Найти все сообщения от Pinot
 
Регистрация: 09.03.2010
Сообщений: 4

Всплывающее изображение imagemap
Подскажите пожалуйста как можно сделать в стандартной imagemap всплывающие изображения. При наведении на область карты должно всплывать изображение, для каждой области свое.
Ответить с цитированием
  #2 (permalink)  
Старый 09.03.2010, 15:16
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Собственно, у <area> есть onmouseover и onmouseout, дерзайте!
Ответить с цитированием
  #3 (permalink)  
Старый 09.03.2010, 20:34
Новичок на форуме
Отправить личное сообщение для Pinot Посмотреть профиль Найти все сообщения от Pinot
 
Регистрация: 09.03.2010
Сообщений: 4

Сообщение от subzey Посмотреть сообщение
Собственно, у <area> есть onmouseover и onmouseout, дерзайте!
Я знаю что есть, но вопрос как вызвать всплывающую картинку при наведении курсора.
Ответить с цитированием
  #4 (permalink)  
Старый 21.03.2010, 21:14
Новичок на форуме
Отправить личное сообщение для Pinot Посмотреть профиль Найти все сообщения от Pinot
 
Регистрация: 09.03.2010
Сообщений: 4

Не как не получается. Может кто помочь?
Есть 100 областей карты изображений 1,2,3,...
Есть 100 картинок 1,2,3,...
Надо при наведении на область 1 вывести картинку 1, на область 2 вывести картинку 2 и т.д. чтобы картинка всплывала правей и выше курсора
Ответить с цитированием
  #5 (permalink)  
Старый 22.03.2010, 13:00
Аватар для SkyLight
Злюка-бобер
Отправить личное сообщение для SkyLight Посмотреть профиль Найти все сообщения от SkyLight
 
Регистрация: 21.03.2010
Сообщений: 438

Раз уж на area можно повесить обработчики, имеются нужные картинки, а главное - event, то уж при вдумчивом чтении мануалов все получится. Не надо требовать от людей целиком решить Вашу задачу. Они это могут, но не уже ли трудно сначала поэкспериментировать самому? Вот когда даже эксперименты ни к чему не приведут, тогда уж и просите помощи с кодом, приведя при этом плоды ваших экспериментов.
Ответить с цитированием
  #6 (permalink)  
Старый 22.03.2010, 17:32
Новичок на форуме
Отправить личное сообщение для Pinot Посмотреть профиль Найти все сообщения от Pinot
 
Регистрация: 09.03.2010
Сообщений: 4

Сообщение от SkyLight Посмотреть сообщение
Раз уж на area можно повесить обработчики, имеются нужные картинки, а главное - event, то уж при вдумчивом чтении мануалов все получится. Не надо требовать от людей целиком решить Вашу задачу. Они это могут, но не уже ли трудно сначала поэкспериментировать самому? Вот когда даже эксперименты ни к чему не приведут, тогда уж и просите помощи с кодом, приведя при этом плоды ваших экспериментов.
Я не чего не требую!!! Не можете помочь, например дать нужную ссылку, проезжайте мимо.
Ответить с цитированием
  #7 (permalink)  
Старый 22.03.2010, 18:23
Аватар для SkyLight
Злюка-бобер
Отправить личное сообщение для SkyLight Посмотреть профиль Найти все сообщения от SkyLight
 
Регистрация: 21.03.2010
Сообщений: 438

Ну вот можно почитать, например, про то, как с помощью event получать координаты мыши. Скажем, здесь. А всплывающие изображения делать в DIV с position: absolute. Да и вообще, задача более чем обычная, а известный всем поисковик даст информации просто море.
Ответить с цитированием
  #8 (permalink)  
Старый 26.03.2010, 16:50
Интересующийся
Отправить личное сообщение для kibal4iw Посмотреть профиль Найти все сообщения от kibal4iw
 
Регистрация: 14.05.2009
Сообщений: 10

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

Последний раз редактировалось kibal4iw, 26.03.2010 в 21:43.
Ответить с цитированием
  #9 (permalink)  
Старый 26.03.2010, 20:39
Аватар для Shaci
:-/
Отправить личное сообщение для Shaci Посмотреть профиль Найти все сообщения от Shaci
 
Регистрация: 28.09.2009
Сообщений: 1,126

Сообщение от kibal4iw Посмотреть сообщение
Вот так сидишь, читаешь форум, и учишься потихоньку, так глядишь и JavaScript изучишь, вобщем за задачу спасибо.
что правда, то правда
Я в ваш код не смотрел внимательно, но вот эта функция - mouseShowHandler, только определена, и нигде не вызывается.
Ответить с цитированием
  #10 (permalink)  
Старый 26.03.2010, 21:42
Интересующийся
Отправить личное сообщение для kibal4iw Посмотреть профиль Найти все сообщения от kibal4iw
 
Регистрация: 14.05.2009
Сообщений: 10

Сообщение от Shaci Посмотреть сообщение
Я в ваш код не смотрел внимательно, но вот эта функция - mouseShowHandler, только определена, и нигде не вызывается.
Да она там и ненужна
Я просто несколько вариантов выдумывал, да вот в одном из них(финальном) использовал, спасибо что сообщили, а навожу людей на ложный след
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
фоновое изображение через fileUpload i8th Events/DOM/Window 4 25.02.2010 11:53
Как предварительно загруженное изображение сделать бэкграундом? hrundel Общие вопросы Javascript 1 02.08.2009 12:45
Можно ли приобразовать исходный текст изображения в само изображение )) human AJAX и COMET 7 20.03.2009 17:46
Изображение не растягивать dovee Общие вопросы Javascript 1 10.02.2009 07:20
всплывающее Javascript меню Dekker8 Events/DOM/Window 0 21.11.2008 21:45