Ho un immagine e un link che "quando ci passo sopra con il mouse(al link)" mi deve aumentare l'opacità dell'immagine gradualmente(effetto fadeIn).
Mentre quando vado via col mouse dal link(onmouseout) mi deve oscurare l'immagine sempre in modo graduale(effetto fadeOut).
Il problema è che se faccio piu link, con foto diverse per ogni link, le immagini non si oscurano in modo graduale ma iniziano a sfasare e o si illuminano subito oppure fa effetti strani tipo lampeggiano x un po'. Chi mi darebbe una mano?????
Grazie in anticipo!
Piccolo esempio:
codice:<html> <head> <title>Prova generale</title> <script lan="javascript"> var duration = 1000,c=0,steps = 20,changeImd,ciao="",chisono=""; function changer(idImg){ changeImg = document.getElementById("chiSiamo"); ciao=idImg; //per vedere se sono DENTRO IL LINK o FUORI col mouse if(ciao=="out"){fadeOut();} //se sono FUORI l'effetto è di oscuramento della foto if(ciao!="out"){fadeIn(); changeImg.src = idImg + ".jpg";} //altrimenti aumento l'opacità } function setOpacity(level) { changeImg.style.opacity = level; changeImg.filters.alpha.opacity = level * 100; } function fadeIn(){ for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + i + ")", i * duration); } } function fadeOut() { for (i = 0; i <= 1; i += (1 / steps)) { setTimeout("setOpacity(" + (1 - i) + ")", i * duration); } } </script> </head> <body> <div> <ul> [img]background.jpg[/img] [*]immagine [/list] </div> </body> </html>
Rispondi quotando
