Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   OnMouseOver/Out (https://javascript.ru/forum/misc/8836-onmouseover-out.html)

MegaGoblin 15.04.2010 16:16

OnMouseOver/Out
 
есть картинка, необходимо что бы при на ведении на неё
или по центру экрана, или около курсора выводилось некое описание.

а onmouseout уберал это описание.

Заранее спасибо

micscr 15.04.2010 16:22

картинка.onmouseover = function(){описание.Покажись();}
картинка.onmouseout = function(){описание.Спрячься();}

:)
где описание.Спрячься(); что-то типа:
document.getElementById('opis').style.display = 'none';

MegaGoblin 16.04.2010 11:01

Цитата:

Сообщение от micscr (Сообщение 51747)
картинка.onmouseover = function(){описание.Покажись();}
картинка.onmouseout = function(){описание.Спрячься();}

вот я и не понимаю что писать в описаниях функции=) а организовывать событие я умею=)

micscr 16.04.2010 11:35

Ну если из подсказанного выше не ясно то дополнительные вопросы:
1) Картинка такая одна или несколько?
2) Где хранишь сам текст подсказки?

Skipp 16.04.2010 11:39

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

Skipp 16.04.2010 11:44

function show_message(intext)
{
	var vis = self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
	if(!document.getElementById('message'))
	{
	var message = document.createElement('div');
	message.style.position="absolute";
	message.style.top=vis+200+"px";
	message.style.left="40%";
	message.style.width="20%";
	message.style.backgroundColor="#EEE";
	message.style.border="1px solid #000";
	message.style.textAlign="center";
	message.setAttribute("id", "message"); 
	document.body.appendChild(message);
	var text =	document.createElement('div');
	var input =	document.createElement('div');
	input.style.height="26px";
	text.borderBottom="1px solid #000";
	message.appendChild(text);
	text.style.padding="5px";
	text.innerHTML=intext;
	var button = document.createElement('input');
	button.setAttribute("type", "button"); 
	button.setAttribute("value", "OK");
	button.style.height="26px";
	button.style.border="0px";
	button.style.backgroundColor="#777";
	button.style.color="#fff";
	button.style.cursor="pointer";
	button.onclick = function()
	{
		input.removeChild(button);
		message.removeChild(input);
		message.removeChild(text);
		document.body.removeChild(message);
	}
	input.appendChild(button);
	message.appendChild(input);
	}
}


Нашёл тут свой старенький скрипт, мучай на здоровье=)

micscr 16.04.2010 12:10

Цитата:

Сообщение от Skipp (Сообщение 51819)
Нашёл тут свой старенький скрипт, мучай на здоровье=)

Или мучайся на здоровье? :D

p.s. Спугнешь этой кодинкой ТС.

Skipp 16.04.2010 12:28

Да нормально пусть вникает=) А мучатся всегда приходиться, когда учишься только.

MegaGoblin 16.04.2010 22:34

Skipp,
text.innerHTML=intext;

ни как не могу понять что делается этой стройчкой, для чего этот innerHTML? =) читал-читал про него, но так и не понял=)

micscr,
картинок несколько)
ну а описание допустип в отдельно файле)

п.с. не испугать новичка не понятным кодом, ток наооборот это привлекает=)

SkyLight 17.04.2010 13:38

Цитата:

ни как не могу понять что делается этой стройчкой, для чего этот innerHTML?
Плохо разбирались, значит. Вы бы хоть поиском воспользовались, что ли?

А если у вас описание в отдельном файле, то и запрашивайте этот файл AJAX'ом по событию.

А вообще поищите сначала готовые хинты, их полно в сети, задача у вас далеко не оригинальная.


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