Здраствуйте! Возникла потребность в плавном затухании/"зажигании" фона ссылок при маусовере, при этом в зависимости от класса css (селектора) в котором находится ссылка параметры затухания (цвет, скорость...) должны быть разные, и желательная реализация посредством прозрачности (ссылки будут находится на текстурном фоне). Ну и кроссбраузерность конечно требуецо...
Полноценного скрипта, удовлетворяющего потребности я так и не нашел. Кое что нашел http://forum.vingrad.ru/index.php?act=Print&client=printer&f=10&t=60704, но там проблема с совместимостью + нет зависимости от класса. Есть и такой вариант:
| Код | <html> <head> <title>WOweb.ru - Scripts - JavaScript - Fading Link</title> <META http-equiv="Content-Type" content="text/html; charset=windows-1251"> <META NAME="description" CONTENT="Коллекции CGI, PHP, JavaScript скриптов, Java апплеты, огромное количество документации по разным языкам программирования, анимированные гифы, фоны, полезные программы, форум, ссылки по теме."> <META NAME="keywords" CONTENT="perl scripts, perl, cgi scripts, cgi, перл, java, java scripts, веб-программирование, web-programming, html, каталог ссылок, документация по веб-программированию, cgi скрипты, java скрипты, игры, java апплеты, апплеты, гифы, скрипты, скрипт, книги по веб-программированию, форум по perl, CGI, Perl, script, HTML">
<Style> A:Link{ Color: white; Text-decoration: underline} A:Visited{ Color: white; Text-decoration: underline} A:Hover{ Color: white; Text-decoration: none} td, body {font-family: verdana, arial, helvetica; font-size:11px;} </Style>
<!-- HEAD START HERE -->
<script LANGUAGE="JavaScript"><!--
document.onmouseover = domouseover; document.onmouseout = domouseout;
function domouseover() { if(document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") > -1) { var linkName = srcElement.name; fadein(linkName); } } }
function domouseout() { if (document.all){ srcElement = window.event.srcElement; if (srcElement.className.indexOf("fade") > -1) { var linkName = srcElement.name; fadeout(linkName); } } }
function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; }
hexa = new makearray(16); for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f";
function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16];}
function setbgColor(r, g, b, element) { var hr = hex(r); var hg = hex(g); var hb = hex(b); element.style.color = "#"+hr+hg+hb; }
function fade(sr, sg, sb, er, eg, eb, step, direction, element){ for(var i = 0; i <= step; i++) { setTimeout("setbgColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" +step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); } } function fadeout(element) { fade(255,150,0, 255,255,255, 30, 1, element); } function fadein(element) { fade(255,255,255, 255,150,0, 23, 1, element); } //--></SCRIPT>
<!-- HEAD END HERE -->
</head> <body bgcolor="#EDEDED" text="#000000" link="#FFFFFF" topmargin="0" leftmargin="0"> <center>
<!-- BODY START HERE -->
<TABLE ALIGN=CENTER WIDTH="8%" BORDER="0" BGCOLOR="#400040"> <TR> <TD><center><a href="http://www.woweb.ru" name="fading_link_1" class="fade">WOweb.ru</a> </TD> </TR> </TABLE>
<!-- BODY END HERE -->
</body> </html>
|
Но в мозилле он не работает, да и ослик ругается на "активное содержимое". И опять же нет зависимости от класса. Пожалуйста, помогите, думаю такой скриптец будет интересен многим! Я JS знаю на уровне "о, вот это js, а вот тут можно изменить чекбокс на радио" Спасибо за внимание! |