Childnode в функции
Ребята, помогите мне, пожалуйста!
Html вот такой: <a>Пункт меню<img></a> Img по умолчанию имеет display: none; Скрипт должен по наведению мыши показывать img, по убиранию мыши его скрывать. НА данный момент скрипт по убиранию мыши скрывает саму A. Как добраться до IMG???? Перепробовал около 50 разных вариантов, уже всю голову сломал. Помогите, пожалуйста! if (document.all&&document.getElementById)
{
navRoot = document.getElementById("menu").getElementsByTagName("a");
for (i=0; i<navRoot.length; i++)
{
node = document.getElementById("menu").getElementsByTagName("a")[i];
node.onmouseover=function()
{
this.style.display="block";
}
node.onmouseout=function()
{
this.style.display="none";
}
}
}
|
var navRoot = document.getElementById("menu").getElementsByTagName("a");
for(var i=0,l=navRoot.length;i<l;i++){
navRoot[i].onmouseover=function(){this.lastChild.style.display="block"}
navRoot[i].onmouseout=function(){this.lastChild.style.display="none"}
}
|
ZoNT,
гений! Спасибо! |
В css:
Код:
#menu a img { |
Kolyaj,
а ты проверь, как это работает в IE 6 и все поймешь ) |
IE6 поддерживает :hover для гиперссылок, поэтому должно работать, правда надо записать так:
#menu a:link img, #menu a:visited img {
display: none;
}
#menu a:hover img {
display: block;
}
|
Octane,
приведенный тобой пример ничем не отличается от приведенного выше. И это в моем конкретном случае не работало. |
Цитата:
|
Octane,
респект за стремление помочь. Но еще раз скажу, что это не правильно, и это не работает в IE 6. Могу показать пример, если уж совсем не верится. |
Если у Вас не работает, еще не значит, что это не правильно. Возможно что-то Вы делаете не правильно или это какая-то особенность браузера. Раз уж мы задаем для тега <img> способ отображения block, то и родительский контейнер должен быть блочного типа. А так же необходимо указать размеры.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
a:link, a:visited {
display: block;
}
a:link img, a:visited img {
display: none;
}
a:hover, a:hover img {
display: block;
width: 90px;
height: 90px;
}
</style>
</head>
<body>
<div>
<a href="http://localhost/">
<img src="some-image.ext" alt="" />
link
</a>
</div>
</body>
</html>
А еще лучше будет сделать это изображение фоновым рисунком ссылки, чтобы вообще не использовать тег <img> |
| Часовой пояс GMT +3, время: 05:46. |