Форум

Yadooumne! · #1 (**permalink**) 05.10.2008, 11:30

Ребята, помогите мне, пожалуйста!
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";              
            }
         }
     }

ZoNT · #2 (**permalink**) 05.10.2008, 12:29

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"}
}

Yadooumne! · #3 (**permalink**) 05.10.2008, 13:16

ZoNT,
гений! Спасибо!

Kolyaj · #4 (**permalink**) 06.10.2008, 17:42

В css:

Код:

#menu a img {
  display: none;
}
#menu a:hover img {
  display: block;
}

Yadooumne! · #5 (**permalink**) 09.10.2008, 23:10

Kolyaj,
а ты проверь, как это работает в IE 6 и все поймешь )

Octane · #6 (**permalink**) 09.10.2008, 23:25

IE6 поддерживает :hover для гиперссылок, поэтому должно работать, правда надо записать так:

#menu a:link img, #menu a:visited img {
display: none;
}
#menu a:hover img {
display: block;
}

Yadooumne! · #7 (**permalink**) 09.10.2008, 23:32

Octane,
приведенный тобой пример ничем не отличается от приведенного выше. И это в моем конкретном случае не работало.

Octane · #8 (**permalink**) 09.10.2008, 23:43

Сообщение от Yadooumne!

ничем не отличается

Для IE важно описывать состояния ссылки :link и :visited.

Yadooumne! · #9 (**permalink**) 12.10.2008, 17:19

Octane,
респект за стремление помочь. Но еще раз скажу, что это не правильно, и это не работает в IE 6. Могу показать пример, если уж совсем не верится.

Octane · #10 (**permalink**) 12.10.2008, 18:07

Если у Вас не работает, еще не значит, что это не правильно. Возможно что-то Вы делаете не правильно или это какая-то особенность браузера. Раз уж мы задаем для тега <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>

Форум

Справочник

Discord чат

Курсы javascript