Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   подправте скрипт (https://javascript.ru/forum/misc/23818-podpravte-skript.html)

zloctb 07.12.2011 15:21

подправте скрипт
 
пРошу вашей помощи!Задача такая:
нужно чтобы при наведении курсора на картинку всплывала подсказка!
Конечно ,я могу навесить на каждую отдельную картинку обработчик и тогда се буде ок,но хочется написать толковый код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>

<style>
li{list-style:none;float:left;margin:20px;position:relative}
div{position:absolute;display:none;
top:50px;left:50px;
background:black;}
</style>




</head>

<body>

<ul>
<li><img src="1.jpg" width=100px height=100px /><div id="one1">Кликнув по картинке выше, вы попадете на сайт Nike. Покрутите колесико мышки вниз. Правда, прикольно? Это вариант так называемого эффекта Parallax. Он не так уж давно применяется в веб, но его уже можно встретить на десятках сайтов. На днях в статье о дружественном духе сайтов Дежурка публиковала пример дизайна персонажей от Турбомилк, где они используют палаллакс в более привычном варианте. А вот на сайте Silverback эффект заметен только в момент, когда пользователь изменяет размер окна браузера. Кому интересны научные стороны вопроса – загляните одним глазком в статью о параллаксе на Википедии, коротко и ёмко, как и всегда.</div></li>
<li><img src="2.jpg" width=100px height=100px /><div id="one2">КЯн Лунн написал отличнейший туториал о том, как воссоздать эффект параллакса с сайта Найк. Смотрим здесь.</div></li>
<li><img src="3.jpg" width=100px height=100px /><div id="one3">И этот впечатляющий эффект не так уж и сложно повторить! Штука эта называется Dragdealer. Это JavaScript компонент, ориентированный на управление мышкой и имеющий воистину неограниченное количество вариантов развития и применения. Отличный подарок для программистов JavaScript..</div></li>
<script>
im=document.getElementsByTagName('img')
for(i=0;i<im.length;i++){
im[i].onmouseover=function(){
	document.getElementById('one'+i+1).style.display='block'
}
im[i].onmouseout=function(){
	document.getElementById('one'+i+1).style.display='none'
}
}
</script>
</body>
</html>

ksa 07.12.2011 15:36

Пример сделал - однозначно молодец. :yes:
Как вариант...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Документ без названия</title>
<style>
li{list-style:none;float:left;margin:20px;position:relative}
div{
	position:absolute;display:none;
	top:50px;left:50px;
	background:black;
	color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li><img src="1.jpg" width=100px height=100px /><div id="one1">Кликнув по картинке выше, вы попадете на сайт Nike. Покрутите колесико мышки вниз. Правда, прикольно? Это вариант так называемого эффекта Parallax. Он не так уж давно применяется в веб, но его уже можно встретить на десятках сайтов. На днях в статье о дружественном духе сайтов Дежурка публиковала пример дизайна персонажей от Турбомилк, где они используют палаллакс в более привычном варианте. А вот на сайте Silverback эффект заметен только в момент, когда пользователь изменяет размер окна браузера. Кому интересны научные стороны вопроса – загляните одним глазком в статью о параллаксе на Википедии, коротко и ёмко, как и всегда.</div></li>
<li><img src="2.jpg" width=100px height=100px /><div id="one2">КЯн Лунн написал отличнейший туториал о том, как воссоздать эффект параллакса с сайта Найк. Смотрим здесь.</div></li>
<li><img src="3.jpg" width=100px height=100px /><div id="one3">И этот впечатляющий эффект не так уж и сложно повторить! Штука эта называется Dragdealer. Это JavaScript компонент, ориентированный на управление мышкой и имеющий воистину неограниченное количество вариантов развития и применения. Отличный подарок для программистов JavaScript..</div></li>
<script>
var im=document.getElementsByTagName('img');
var i;
for(i=0;i<im.length;i++) {
	im[i].onmouseover=function(){
		this.nextSibling.style.display='block';
	};
	im[i].onmouseout=function(){
		this.nextSibling.style.display='none';
	};
}
</script>
</body>
</html>

zloctb 07.12.2011 15:42

пасиб за робочий ответ!!
у меня теперь паника))
вроде учил nextSibling не поддерж новыми браузерами ,а нада nextElementSibling:(

ksa 07.12.2011 15:46

zloctb, я посмотрел свой примерчик

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Документ без названия</title>
<style>
li{list-style:none;float:left;margin:20px;position:relative}
div{
	position:absolute;display:none;
	top:50px;left:50px;
	background:black;
	color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li><img src="http://javascript.ru/forum/images/smilies/smile.gif" width=100px height=100px /><div id="one1">Кликнув по картинке выше, вы попадете на сайт Nike. Покрутите колесико мышки вниз. Правда, прикольно? Это вариант так называемого эффекта Parallax. Он не так уж давно применяется в веб, но его уже можно встретить на десятках сайтов. На днях в статье о дружественном духе сайтов Дежурка публиковала пример дизайна персонажей от Турбомилк, где они используют палаллакс в более привычном варианте. А вот на сайте Silverback эффект заметен только в момент, когда пользователь изменяет размер окна браузера. Кому интересны научные стороны вопроса – загляните одним глазком в статью о параллаксе на Википедии, коротко и ёмко, как и всегда.</div></li>
<li><img src="http://javascript.ru/forum/images/smilies/wink.gif" width=100px height=100px /><div id="one2">КЯн Лунн написал отличнейший туториал о том, как воссоздать эффект параллакса с сайта Найк. Смотрим здесь.</div></li>
<li><img src="http://javascript.ru/forum/images/smilies/laugh.gif" width=100px height=100px /><div id="one3">И этот впечатляющий эффект не так уж и сложно повторить! Штука эта называется Dragdealer. Это JavaScript компонент, ориентированный на управление мышкой и имеющий воистину неограниченное количество вариантов развития и применения. Отличный подарок для программистов JavaScript..</div></li>
<script>
(function () {
	var im=document.getElementsByTagName('img');
	var i;
	for(i=0;i<im.length;i++) {
		im[i].onmouseover=function(){
			this.nextSibling.style.display='block';
		};
		im[i].onmouseout=function(){
			this.nextSibling.style.display='none';
		};
	};
})();
</script>
</body>
</html>


В ИЕ8, ФФ, Опере и Хроме - всё работает... :)

zloctb 07.12.2011 15:51

Ну теперь понятно стало новые браузеры поддерж и nextElementSibling и nextSibling!Пасиб :)

devote 07.12.2011 15:52

ksa,
ну а если между тегом img и div будет хотя бы перевод строк, тогда не заработает. По крайней не везде будет работать. Поэтому и нужно юзать nextElementSibling но он не поддерживается в старых браузерах.

ksa 07.12.2011 15:54

Цитата:

Сообщение от devote
если между тегом img и div будет хотя бы перевод строк, тогда не заработает

Ну почему не заработает... Просто нужно будет делать некий поиск "нужного" следующего элемента... ;)
Ну а там по накатаной дорожке... :)

devote 07.12.2011 15:55

Цитата:

Сообщение от ksa
Ну почему не заработает...

ответ:
Цитата:

Сообщение от ksa
Просто нужно будет делать некий поиск "нужного" следующего элемента...

Сам же и ответил, nextSibling выдает все элементы, в том числе и элемент #text поэтому и нужно его выкидывать.


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