Fading roll-over
Copia ed incolla Codice
Fading roll-over <!-- javascripts by http://www.bravenet.com --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document --> <head> <style> .tds { background-color: #004891; height: 20px; text-align: center; border: 1px solid white; font-size: 14px; filter:alpha(opacity=45); -moz-opacity:45%; cursor: hand; } A:link {font: bold 12px arial; color: #ffffff; text-decoration: none;} A:visited {font: bold 12px arial; color: #ffffff; text-decoration: none;} A:hover {font: bold 12px arial; color: #E9F0F8; text-decoration: underline;} </style> <script language="JavaScript"> <!-- hiding function locktrueie(myform){myform.ie.checked=true;} function lockfalsenet(myform){myform.nets.checked=true;} function goToURL() { window.location = "http://www.javascriptsource.com"; } function nochange(mycheckbox) { if (mycheckbox.checked == true){mycheckbox.checked = false;}else{mycheckbox.checked = true;} } nOpac = 50 nPlus = 2 nMin = 1 speed = 30 timer = null; timer2 = null; var ie5=(document.all && document.getElementById); var ns6=(!document.all && document.getElementById); function fadeImg2(teller) { apl[teller][1] = "Up"; changes(); } function fadeImgend2(teller) { apl[teller][1] = "Down"; setTimeout("changes()",50); } function changes() { next_loop = true; for (i=0;i<apl.length;i++) { obj = link_table.rows[i].cells[0]; opacity = apl[i][0] if (apl[i][1] == "Up") { opacity += nPlus; apl[i][0] = opacity; if (apl[i][0] > 105) {apl[i][1] = "";} else {next_loop = false;} nOpac = opacity; } else { if (apl[i][1] == "Down") { opacity -= nMin; apl[i][0] = opacity; if (apl[i][0] < 45) {apl[i][1] = "";} else {next_loop = false;} nOpac = opacity; } } if(ie5){ obj.style.filter="alpha(opacity="+opacity+")"; } if(ns6){ obj.style.MozOpacity = opacity + '%'; } } if (next_loop == false) { timer = setTimeout("changes()",speed); } else { clearTimeout(timer); } } //for each link option you need to make a new Array; var apl = new Array(); apl[0] = new Array(45,""); apl[1] = new Array(45,""); apl[2] = new Array(45,""); apl[3] = new Array(45,""); apl[4] = new Array(45,""); apl[5] = new Array(45,""); //expl: apl[6] = new Array(45,""); // End --> </script> </head> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <body> <table cellpadding=0 cellspacing=0 name=link_table id=link_table> <tr> <td class="tds" onmouseover="fadeImg2(0)" onmouseout="fadeImgend2(0)" onclick="window.location='#';" style="border: 1px solid white; color: white; background-color: #004891; width:100px; text-align:center;";><a href="http://www.bravenet.com">Home</a></td> </tr> <tr> <td class="tds" onmouseover="fadeImg2(1)" onmouseout="fadeImgend2(1)" onclick="window.location='#';" style="border: 1px solid white; color: white;background-color: #004891; width:100px; text-align:center;";><a href="http://www.bravenet.com/webtools/index.php">Tools</td> </tr> <tr> <td class="tds" onmouseover="fadeImg2(2)" onmouseout="fadeImgend2(2)" onclick="window.location='#';" style="border: 1px solid white; color: white;background-color: #004891; width:100px; text-align:center;";><a href="http://www.bravenet.com/webhosting/index.php">Hosting</td> </tr> <tr> <td class="tds" onmouseover="fadeImg2(3)" onmouseout="fadeImgend2(3)" onclick="window.location='#';" style="border: 1px solid white; color: white; background-color: #004891; width:100px; text-align:center;";><a href="http://www.bravenet.com/webhosting/index.php">Domains</td> </tr> <tr> <td class="tds" onmouseover="fadeImg2(4)" onmouseout="fadeImgend2(4)" onclick="window.location='#';" style="border: 1px solid white; color: white; background-color: #004891; width:100px; text-align:center;";><a href="http://www.bravenet.com/resources/index.php">Resources</td> </tr> <tr> <td class="tds" onmouseover="fadeImg2(5)" onmouseout="fadeImgend2(5)" onclick="window.location='#';" style="border: 1px solid white; color: white; background-color: #004891; width:100px; text-align:center;";><a href="http://www.bravenet.com/help/index.php">Help</td> </tr> </table>