Newsgroup: it.comp.lang.javascript
Titolo: Immagini animate

Sto creando una pagina web e pensavo di inserire un frame di controllo
con delle immagini che rimandano ai relativi link. Quando il mouse punta
su di un'immagine vorrei che l'immagine cambi, ma non mi riesce di
riprodurre l'effetto.
Chi mi manda il codice per farlo?
C'è un sito con tanti esempi?
Grazie,
                    Bruno TB

Bruno - Prince of Saiyans - Di Nardo ha scritto:

Dipende da che cambiamento vuoi fare, se ad esempio, ti basta che l'immagine
(ad esempio un rettangolo blu) diventi gialla (praticamente due immagini
completamente uguali in dimensione ...) puoi guardare quello che ho creato
nella home page del sito 
www.altavalle.com
 ... ho infatti inserito dei
"similtasti" con sfondo blu e scritta interna gialla che, al passaggio del
puntatore del mouse, cambia i suoi colori diventando scritta nera su sfondo
giallo ... in ogni caso eccoti lo script:
Prima la parte riguardante lo scriopt:
<script language="JavaScript">
<!--
browserName=navigator.appName;
browserVer=parseInt(navigator.appVersion);
if(browserVer >=3)
        version="3";
else
        version="2";
if (version=="3")
{
menu1_on=new Image(19,10);
menu1_on.src="disegno_on.gif";
menu1_off=new Image(19,10);
menu1_off.src="disegno_off.gif";
}
function rollIn(imgName)
{
        if (version=="3")
        {
                document[imgName].src=eval(imgName + "on.src");
        }
}
function rollOut(imgName)
{
        if (version=="3")
        {
                document[imgName].src=eval(imgName + "off.src");
        }
}
// -->
</script>
Poi quello che serve per effettuare l'animazione (se così la possiamo
chiamare):
<A HREF = "...url..." onMouseover = "rollIn('menu1_') ;
window.status='Inserire la scritta da visualizzare sulla status bar ...' ;
return true" onMouseout = "rollOut('menu1_') ; window.status=' ' ;return
true"><IMG BORDER = 0 NAME ="menu1_" SRC = "disegno_off.gif" ALT =
"....."></A>
Dove:
disegno_on.gif = disegno che deve visualizzarsi quando non vi è il puntatore
sopra (nel mio esempio, il tasto con sfondo blu e scritta gialla)
disegno_off.gif = disegno che deve essere caricato al passaggio del
puntatore (nell'esempio sfondo giallo con scritte nere)
La descrizione potrà sembrare un pochettino confusa comunque, se visiti il
sito 
www.altavalle.com
, lo vedrai in azione e ne capirai il funzionamento.

                     Bruno TB
Ho risolto questo problema, ma ne è sorto un altro: allego il listato
<SCRIPT LANGUAGE="JavaScript">
var browser=false;
if((navigator.appName=="Netscape")&&(parseInt(navigator.appVersion)>=3))
browser=true;
if (browser){
var object=new Array();
object['Storia']=  new objectdata(132,40,"Storia1.gif","Storia0.gif","La
storia e le origini del Karate");
object['Tecniche']=  new
objectdata(144,40,"Tecniche1.gif","Tecniche0.gif","Le tecniche di base e
quelle avanzate");
object['Kata']=  new objectdata(144,40,"Kata1.gif","Kata0.gif","Descrizione
di alcuni kata");
object['Immagini']=  new
objectdata(144,40,"Immagini1.gif","Immagini0.gif","Archivio immagini");
object['Allenamento']=  new
objectdata(144,40,"Allenamento1.gif","Allenamento0.gif","L'allenamento e la
preparazione di base");
object['Main']=  new objectdata(50,40,"Main1.gif","Main0.gif","Torna alla
pagina principale");
     }
function objectdata(hsize,vsize,replaceimg,restoreimg,mess)
{if(browser)
      {
   this.mess=mess;
   this.simg=new Image(hsize,vsize);
   this.simg.src=replaceimg;
   this.rimg=new Image(hsize,vsize);
   this.rimg.src=restoreimg;
      }
}
function ReplaceOrig(name)
{if(browser)
 {window.status=object[name].mess;
  document.images[name].src=object[name].simg.src;
 }
}
function RestoreOrig(name)
{if(browser)
 {window.status="";
  document.images[name].src=object[name].rimg.src;
 }
}
</SCRIPT>
</head>
<body bgcolor="#FFFFFF">
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td width="16%">
 <A HREF="Storia.html" OnMouseOver="ReplaceOrig('Storia');return true;"
OnMouseOut="RestoreOrig('Storia');">
 <img src="file:///C:/Html/Storia0.gif" width="132" height="40">
 </a></td>
        <td width="16%">
 <A HREF="Tecniche.html" OnMouseOver="ReplaceOrig('Tecniche');return true;"
OnMouseOut="RestoreOrig('Tecniche');">
 <img src="file:///C:/Html/Tecniche0.gif" width="144" height="40">
 </a></td>
        <td width="17%">
 <A HREF="Kata.html" OnMouseOver="ReplaceOrig('Kata');return true;"
OnMouseOut="RestoreOrig('Kata');">
 <img src="file:///C:/Html/Kata0.gif" width="144" height="40">
 </a></td>
        <td width="17%">
 <A HREF="Immagini.html" OnMouseOver="ReplaceOrig('Immagini');return true;"
OnMouseOut="RestoreOrig('Immagini');">
 <img src="file:///C:/Html/Immagini0.gif" width="144" height="40">
 </a></td>
        <td width="17%">
 <A HREF="Allenamento.html" OnMouseOver="ReplaceOrig('Allenamento');return
true;" OnMouseOut="RestoreOrig('Allenamento');">
 <img src="file:///C:/Html/Allenamento0.gif" width="144" height="40">
 </a></td>
        <td width="17%">
 <A HREF="home.html" OnMouseOver="ReplaceOrig('Main');return true;"
OnMouseOut="RestoreOrig('Main');">
 <img src="file:///C:/Html/Main0.gif" width="50" height="40">
 </a></td>
   </tr>
</table>
Appena il puntatore va sull'immagine ricevo questo messaggio:
document.images[name] as no properties.
Che devo fare?