Отображение ссылок при нажатии на картинку
Всем привет! Возник вопрос - нужно сделать скрипт, задача которого при нажатии на картинку (внутри таблицы) выводить две ссылки сверху на этой картинке.
В идеале нужно выводить по событию onMouseOver и убирать по onMouseOut. Проблема в том, что когда курсор перемещается на ссылку, она убирается. Как решить этот вопрос? И если нереально, то как реализовать первый вариант? Помогите плиз! |
<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> |
Пример: 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> |
Спасибо, Aetae! То, что нужно! А как сделать тоже самое не для div, а для класса, и менять background-image при наведении на эту картинку (ну то есть менять саму картинку)?
|
|
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. |