Форум

deNSe_01 · #1 (**permalink**) 25.06.2011, 17:35

Всем привет! Возник вопрос - нужно сделать скрипт, задача которого при нажатии на картинку (внутри таблицы) выводить две ссылки сверху на этой картинке.
В идеале нужно выводить по событию onMouseOver и убирать по onMouseOut. Проблема в том, что когда курсор перемещается на ссылку, она убирается. Как решить этот вопрос? И если нереально, то как реализовать первый вариант? Помогите плиз!

walik · #2 (**permalink**) 25.06.2011, 17:56

<html>
<head>
<script>
window.onload = function() {	
	showLinks = function() {
		clearTimeout(window.t);
		document.getElementById('links').style.display = 'inline';
	}
	
	hideLinks = function() {
		window.t = setTimeout(function() {
			document.getElementById('links').style.display = 'none';
		}, 1000);
	}
	
	document.getElementById('image').onmouseover = showLinks;
	document.getElementById('image').onmouseout = hideLinks;
	
	document.getElementById('links').onmouseover = showLinks;
	document.getElementById('links').onmouseout = hideLinks;
}
</script>
<style>
#links {
	display: none;
}
</style>
</head>
<body>
<span id="links"><a href="#">Bla bla bla</a> | <a href="#">Bla2 bla 2 bla2</a></span><br /><br />
<img id="image" src="http://javascript.ru/forum/images/smilies/smile.gif" height="100" width="100" />
</body>
</html>

Aetae · #3 (**permalink**) 25.06.2011, 18:04

Пример: no ie6

<style>
div{width:336px;height:76px;background-image:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif)}
div a{display:none}
div:hover a{display:inline}
</style>

<div>
  <a href="#">ссылка</a>
</div>

deNSe_01 · #4 (**permalink**) 26.06.2011, 18:58

Спасибо, Aetae! То, что нужно! А как сделать тоже самое не для div, а для класса, и менять background-image при наведении на эту картинку (ну то есть менять саму картинку)?

trikadin · #5 (**permalink**) 27.06.2011, 01:58

Выучить CSS.

Learn it)

deNSe_01 · #6 (**permalink**) 27.06.2011, 10:39

trikadin, в css я и в самом деле полный нуб, поэтому и спрашиваю.
Перешёл по ссылке, порылся но ничего не нашёл. Вот мой код:

.hLink
{
      background-image:url('images/frame.png');
}

.hLink a
{     
      display:none;
}

.hLink:hover a
{
      display:inline;
      background-image:url('images/frame_h.png')
}

Цель см. выше. Так какая здесь ошибка?

Форум

Справочник

Discord чат

Курсы javascript