подправте скрипт
пРошу вашей помощи!Задача такая:
нужно чтобы при наведении курсора на картинку всплывала подсказка! Конечно ,я могу навесить на каждую отдельную картинку обработчик и тогда се буде ок,но хочется написать толковый код <!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> |
Пример сделал - однозначно молодец. :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> |
пасиб за робочий ответ!!
у меня теперь паника)) вроде учил nextSibling не поддерж новыми браузерами ,а нада nextElementSibling:( |
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, ФФ, Опере и Хроме - всё работает... :) |
Ну теперь понятно стало новые браузеры поддерж и nextElementSibling и nextSibling!Пасиб :)
|
ksa,
ну а если между тегом img и div будет хотя бы перевод строк, тогда не заработает. По крайней не везде будет работать. Поэтому и нужно юзать nextElementSibling но он не поддерживается в старых браузерах. |
Цитата:
Ну а там по накатаной дорожке... :) |
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 02:07. |