Applied Information Technology - VII. Strumenti avanzati: JavaScript

[Precedente] [Indice] [Successiva]

5) Esempi

5.1) bgColor dinamico

Codice Risultato 
<FORM>
<INPUT TYPE="radio" NAME="bgcolor" 
  onClick="document.bgColor='#FFFFFF';">Bianco
<INPUT TYPE="radio" NAME="bgcolor" 
  onClick="document.bgColor='#FFEECC';">Crema
<INPUT TYPE="radio" NAME="bgcolor" 
  onClick="document.bgColor='#008800';">Verde
<INPUT TYPE="radio" NAME="bgcolor" 
  onClick="document.bgColor='#FF22FF';">Fucsia
</FORM>
Bianco Crema Verde Fucsia

5.2) Rollover

Codice Risultato 
<SCRIPT TYPE="text/javascript">
<!--
browserok =
  (((navigator.appName == "Netscape") &&
  (parseInt(navigator.appVersion) >= 3 )) ||
  ((navigator.appName == "Microsoft Internet Explorer") &&
  (parseInt(navigator.appVersion) >= 4 )));

function preload(img)
{
  var a=new Image(); a.src=img; return a;
}
// -->
</SCRIPT>

[...]

<SCRIPT TYPE="text/javascript">
<!--
if(browserok) {taston=preload("indexoff.gif"); 
               tastoh=preload("indexon.gif"); 
}
// -->
</SCRIPT>

<A HREF="../index.html" LANGUAGE="JavaScript" 
  onMouseOver="if(browserok) document['tasto'].src=tastoh.src" 
  onmouseout="if(browserok) document['tasto'].src=taston.src">
<IMG SRC="indexoff.gif" WIDTH="100" HEIGHT="20" BORDER="0" 
    ALT="Indice" ALIGN="middle" NAME="tasto"></A>
 Indice

5.3) Banner a rotazione

Codice Risultato 
[...]

<SCRIPT LANGUAGE="JavaScript" 
                  src="move.js"></SCRIPT>
</HEAD>
<BODY text="#000080" bgcolor="#FFFFFF" 
   onLoad="animate('../fp/images/questo.gif')">
<SCRIPT LANGUAGE='JavaScript'>
<!--
preloadImages('../fp/images/questo.gif',
              '../fp/images/quello.gif',
              '../fp/images/antonio.gif')//-->
</SCRIPT>

[...]

<IMG NAME="Animazione" 
     SRC="../fp/images/questo.gif" WIDTH="300" 
     HEIGHT="50" BORDER="0" ALT="Banner">

Contenuto del file move.js:

<!-- 
// Dichiarazione delle variabili globali

var whichImg = 1
var nextImage

/////////////////////////////////////////////
// Questa funzione scambia l'immagine corrente 
// per il parametro entrante newImage;
// poi chiama se stessa ogni secondo,
// passandosi una diversa newImage ogni volta 
/////////////////////////////////////////////

function animate(newImage) {
        swap('Animazione', newImage);

		switch(whichImg){
			case 1:
            nextImage = "../fp/images/quello.gif";
            whichImg = 2;
			break;

			case 2:
            nextImage = "../fp/images/antonio.gif";
            whichImg = 3;
			break;

			case 3:
            nextImage = "../fp/images/questo.gif";
            whichImg = 1;
			break;

	}

        setTimeout("animate(nextImage)", 2500)
}

function preloadImages() {
    if (document.images) {
       var imgFiles = preloadImages.arguments;
       var preloadArray = new Array();
        for (var i=0; i<imgFiles.length; i++) {
            preloadArray[i] = new Image;
            preloadArray[i].src = imgFiles[i];
        }
    }
}

function swap(id, newSrc) {
    var theImage = findImage(document, id, 0);
    if (theImage) {
        theImage.src = newSrc;
    }
}


/////////////////////////////////////////////
// La funzione findImage() localizza e
// restituisce un oggetto Image usando  
// un documento, il nome di un'immagine da trovare  
// e un indice (i tre parametri di input).
/////////////////////////////////////////////

function findImage(doc, name, j) {
    // Dichiara una variabile per 
    // contenere l'immagine
    // (if/when we find it)
    var theImage = false;
    // La proprietà images dell'oggetto 
    // documento contiene un insieme di tutte
    // le immagini che stanno in un documento.
    if (doc.images) {
        theImage = doc.images[name];
    }
    // Restituisce l'immagine 
	// se è già stata tovata
    if (theImage) {
        return theImage;
    }
    // In caso contrario, restituisce un errore
    return (false);
}


// -->
Banner
[Precedente] [Indice] [Successiva]

Per informazioni apweb@inwind.it - Ultima modifica

Valid HTML 4.01!