ho realizzato un effetto fade su link ( bottoni con background-color e bordo uguali allo sfondo ) molto carino, togliendo l'impiccio di utilizzare JAVA nelle pagine web del sito di un amico ( www.teatropirandello.it/stagione.html e simili ).
ho inviato il codice stamattina, quindi il mio amico non lo ha ancora cambiato...
al link sotto potete vedere il risultato di ciò che ho fatto in mattinata.
http://www.ateicos.com/prove/fade.html
come vedete il codice funziona perfettamente,
sia su Internet Explorer 5, Netscape 7 e Opera 7;
è un riadattamento di un codice che sfumava un testo cliccando su un bottone.
il problema che non sono riuscito a risolvere riguarda il codice javascript.
codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title> TeatroPirandello.it </title>
<style type="text/css" >
.link1 { font-size:11px; font-family:Verdana; color:#FFFFFF; background-color:#979585; border:0px dashed #979585; text-align:left; }
</style>
<script language="JavaScript1.2">
<!--
window.defaultStatus = " TeatroPirandello.it ";
r = 51; g = 51; b = 0;
ri = 255; gi = 255; bi = 255;
var num = new Object;
var rc = new Object;
var gc = new Object;
var bc = new Object;
var oby = new Object;
while ( num < 8 ) { rc[num] = r; gc[num] = g; bc[num] = b; }
function f1() { if ( ( rc[1] < ri ) || ( gc[1] < gi ) || ( bc[1] < bi ) ) { bc[1] += 11; gc[1] += 11; rc[1] += 11; document.getElementById("l1").style.color="rgb("+ rc[1] +","+ gc[1] +","+ bc[1] +")";setTimeout("f1()",40); } };
function f2() { if ( ( rc[2] < ri ) || ( gc[2] < gi ) || ( bc[2] < bi ) ) { bc[2] += 11; gc[2] += 11; rc[2] += 11; document.getElementById("l2").style.color="rgb("+ rc[2] +","+ gc[2] +","+ bc[2] +")";setTimeout("f2()",40); } };
function f3() { if ( ( rc[3] < ri ) || ( gc[3] < gi ) || ( bc[3] < bi ) ) { bc[3] += 11; gc[3] += 11; rc[3] += 11; document.getElementById("l3").style.color="rgb("+ rc[3] +","+ gc[3] +","+ bc[3] +")";setTimeout("f3()",40); } };
function f4() { if ( ( rc[4] < ri ) || ( gc[4] < gi ) || ( bc[4] < bi ) ) { bc[4] += 11; gc[4] += 11; rc[4] += 11; document.getElementById("l4").style.color="rgb("+ rc[4] +","+ gc[4] +","+ bc[4] +")";setTimeout("f4()",40); } };
function f5() { if ( ( rc[5] < ri ) || ( gc[5] < gi ) || ( bc[5] < bi ) ) { bc[5] += 11; gc[5] += 11; rc[5] += 11; document.getElementById("l5").style.color="rgb("+ rc[5] +","+ gc[5] +","+ bc[5] +")";setTimeout("f5()",40); } };
function f6() { if ( ( rc[6] < ri ) || ( gc[6] < gi ) || ( bc[6] < bi ) ) { bc[6] += 11; gc[6] += 11; rc[6] += 11; document.getElementById("l6").style.color="rgb("+ rc[6] +","+ gc[6] +","+ bc[6] +")";setTimeout("f6()",40); } };
function f7() { if ( ( rc[7] < ri ) || ( gc[7] < gi ) || ( bc[7] < bi ) ) { bc[7] += 11; gc[7] += 11; rc[7] += 11; document.getElementById("l7").style.color="rgb("+ rc[7] +","+ gc[7] +","+ bc[7] +")";setTimeout("f7()",40); } };
function f8() { if ( ( rc[8] < ri ) || ( gc[8] < gi ) || ( bc[8] < bi ) ) { bc[8] += 11; gc[8] += 11; rc[8] += 11; document.getElementById("l8").style.color="rgb("+ rc[8] +","+ gc[8] +","+ bc[8] +")";setTimeout("f8()",40); } };
function c(obj,num) { obj.style.color="rgb(51,51,0)"; rc[num] = r; gc[num] = g; bc[num] = b; };
//-->
</script>
</head>
<body bgcolor="#979585" >
<button title=" torna alla home page "
onMouseOver="c(l1,1);" onMouseOut="f1()" id="l1" class="link1" onClick="document.location='index.htm'" >Home</button>
<button title=" la storia del Teatro Pirandello "
onMouseOver="c(l2,2);" onMouseOut="f2()" id="l2" class="link1" onClick="document.location='storia.htm'" >La Storia</button>
<button title=" la stagione corrente "
onMouseOver="c(l3,3);" onMouseOut="f3()" id="l3" class="link1" onClick="document.location='stagione.htm'" >La Stagione</button>
<button title=" le stagioni passati al Teatro "
onMouseOver="c(l4,4);" onMouseOut="f4()" id="l4" class="link1" onClick="document.location='stagioni.htm'" >Trascorse</button>
<button title=" la vita di Luigi PIRANDELLO "
onMouseOver="c(l5,5);" onMouseOut="f5()" id="l5" class="link1" onClick="document.location='pirandello.htm'" >Pirandello</button>
<button title=" le immagini del Teatro "
onMouseOver="c(l6,6);" onMouseOut="f6()" id="l6" class="link1" onClick="document.location='immagini.htm'" >Le Immagini</button>
<button title=" i pareri lasciati dai visitatori "
onMouseOver="c(l7,7);" onMouseOut="f7()" id="l7" class="link1" onClick="document.location='http://pub.alxnet.com/guestbook?id=2157619'" >Pareri</button>
<button title=" giuseppe.pirrera@teatropirandello.it "
onMouseOver="c(l8,8);" onMouseOut="f8()" id="l8" class="link1" onClick="document.location='mailto:giuseppe.pirrera@teatropirandello.it'" >Contatti</button>
</body>
</html>
come potete notare m'è toccato scrivere 8 funzioni al posto di una.
ho la funzione
codice:
document.getElementById("l1").style.ecc....
non riesco a trasformare la funzione in
ed a inserire la seguente istruzione:
codice:
document.getElementById(obj).style.ecc...
mi da sempre errore, che l'oggetto non è dichiarato, che non è possibile attribuire alcuni valori all'oggetto ecc...
in più l'istruzione timeout va in tilt se faccio la chiamata
sapreste aiutarmi?
ps: mi scuso con i forumisti per la larghezza della pagina
Rispondi quotando
