<a href="http://yandex.ru" id="a1" onmouseover="hl('a2')" onmouseout="unhl('a2')">Ссылка 1</a>
<a href="http://google.com" id="a2" onmouseover="hl('a1')" onmouseout="unhl('a1')">Ссылка 2</a>
<script type="text/javascript">
function hl(n)
{
document.getElementById(n).style.textDecoration = 'underline';
}
function unhl(o)
{
document.getElementById(n).style.textDecoration = 'none';
}
</script>
Выделение ссылки при наведении на другую
Возможно как-нибудь сделать так, чтобы одна ссылка выделялась,
когда пользователь наводит мышку на другую ссылку?
когда пользователь наводит мышку на другую ссылку?
Конечно, можно использовать и свойство style, но как использовать уже существующие стили для ссылки, заданные через атрибут class??
Задавать стиль через свойство "className"
Работает, если сделать вот таким образом
my.css
Для каждой ссылки сделан свой div.
Можно ли без изменения класса div обойтись?
Идеально было бы использовать уже заданный для ссылки класс и лишь как то передовать события hover link и т.п.
Код:
<html><head>
<title>All</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="CSE HTML Validator Халявной Версии">
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript">
<!--
function test_over(id)
{
aobj = document.getElementById(id);
aobj.className="auxi";
}
function test_out(id)
{
aobj = document.getElementById(id);
aobj.className="test";
}
-->
</script>
</head>
<body>
<div class="test" id="oned">
<a href="#" onmouseover="test_over('twod');" onmouseout="test_out('twod');" id="ONE1">ссылка 1</a>
</div>
<div class="test" id="twod">
<a href="#" onmouseover="test_over('oned');" onmouseout="test_out('oned');" id="TWO1">ссылка 2</a>
</div>
</body>
</html>
<title>All</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="CSE HTML Validator Халявной Версии">
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript">
<!--
function test_over(id)
{
aobj = document.getElementById(id);
aobj.className="auxi";
}
function test_out(id)
{
aobj = document.getElementById(id);
aobj.className="test";
}
-->
</script>
</head>
<body>
<div class="test" id="oned">
<a href="#" onmouseover="test_over('twod');" onmouseout="test_out('twod');" id="ONE1">ссылка 1</a>
</div>
<div class="test" id="twod">
<a href="#" onmouseover="test_over('oned');" onmouseout="test_out('oned');" id="TWO1">ссылка 2</a>
</div>
</body>
</html>
my.css
Код:
.test a {outline: none;}
.test a:link { color: #556368; text-decoration: none;}
.test a:visited { color: #556368; text-decoration: none;}
.test a:hover { color: #c90103; text-decoration: none; }
.test a:active { color: #c90103; text-decoration: none;}
.auxi a {outline: none;
color: #c90103;text-decoration: none;}
.test a:link { color: #556368; text-decoration: none;}
.test a:visited { color: #556368; text-decoration: none;}
.test a:hover { color: #c90103; text-decoration: none; }
.test a:active { color: #c90103; text-decoration: none;}
.auxi a {outline: none;
color: #c90103;text-decoration: none;}
Для каждой ссылки сделан свой div.
Можно ли без изменения класса div обойтись?
Идеально было бы использовать уже заданный для ссылки класс и лишь как то передовать события hover link и т.п.
сделать классы и задавать их непосредственно ссылкам. Еще как вариант можно вызывать события программно.
Точно !))
А может можно еще проще?
Например программно вызвать событие onmouseover?
А может можно еще проще?
Например программно вызвать событие onmouseover?
Проще точно не будет - программный вызов события штука объемная. Сейчас к сожалению полностью воспроизвести способ не смогу. Копайте в сторону document.createEvent() и DOM2 Events.
Вот некоторые ссылки - хотя информации там не очень много
http://www.sql.ru/forum/actualthread.aspx?tid=584919
http://wdh.suncloud.ru/dhtml02.htm#mcreateevent
http://www.howtocreate.co.uk/tutorials/javascript/domevents
Вот некоторые ссылки - хотя информации там не очень много
http://www.sql.ru/forum/actualthread.aspx?tid=584919
http://wdh.suncloud.ru/dhtml02.htm#mcreateevent
http://www.howtocreate.co.uk/tutorials/javascript/domevents
Код:
<div onmouseover="decortext.style.textDecoration='underline'" onmouseout="decortext.style.textDecoration='none'"> текст для наведения мыши </div>
<div id='decortext'> текст для подчёркивания при наведении на "текст для наведения мыши" </div>
<div id='decortext'> текст для подчёркивания при наведении на "текст для наведения мыши" </div>
Трупов подымают опять, mike. Это беда.
