Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Отображение ссылок при нажатии на картинку (https://javascript.ru/forum/events/18306-otobrazhenie-ssylok-pri-nazhatii-na-kartinku.html)

deNSe_01 25.06.2011 17:35

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

walik 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 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 26.06.2011 18:58

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

trikadin 27.06.2011 01:58

Выучить CSS.

Learn it)

deNSe_01 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')
}

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


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