Oggetti e proprieta' del documento

Il documento che segue permette,usando le frecce,di visitare una serie di gallerie frattali che vengono mostrate in una finestra a parte.


<head>
<SCRIPT language="Javascript">
var cc = 0;
var max_img=3;
var win2 = window.open("","new");
function change_img(direction) {
        if (direction == "next") {
                cc++;
                if (cc > max_img) {cc = 1;}   // test for last image
        } else if (direction == "prev") {
                cc--;
                if (cc < 1) {cc = max_img;}      // test for first image
        }


   if (cc == 1) {
    win2.location.href = "http://home.att.net/~Paul.N.Lee/FotD/FotD.html";
  }
  if (cc == 2) {
    win2.location.href = "http://sprott.physics.wisc.edu/fractals.htm";
  }
  if (cc == 3) {
    win2.location.href = "http://www.concentric.net/~srooke/";
  }  

        return false;
}
</SCRIPT>
</head>
<body>
<a href="#" target="_self"  onClick="change_img('prev')">
<img src="http://www.ba.infn.it/www/images/prev.gif" border="0" 
alt="Galleria Precedente" WIDTH="55" HEIGHT="31"></a>

<a href="#" target="_self"  onClick="change_img('next')">
<img src="http://www.ba.infn.it/www/images/next.gif" border="0" 
alt="Prossima Galleria" WIDTH="55" HEIGHT="31"></a>
</body>

In questo secondo esempio faremo uso dei frames creando una lista di link a gallerie frattali . Muovendoci sopra il puntatore e' possibile avere un esempio di immagine contenuto nella galleria e una descrizione della stessa. Cliccando sul link la galleria stessa compare nella finestra accanto. In questo caso e' necessario copiare tre files. Il primo contiene la definizione dei 3 frames:


<html>
<head>
<title>Navigational bar with frame</title>
</head>
<frameset rows="30%,70%" frameborder=no scrolling=no>
<frame src=blank.html name="descrizione" border=0 >
<frameset cols="10%,70%" frameborder=no scrolling=no>
<frame src=menu.html name="menu">
<frame src=blank.html name="sito">
</frameset>
</frameset>
</html>

Salvate questo file con un nome qualsiasi ad es. navbar.html Questo file richiede due altri documenti:
menu.html


<head>
<title>Elenco di siti con immagini frattali</title>
<script language="JavaScript">
<!-- hide


function on(numero){
        parent.descrizione.document.clear();
        parent.descrizione.document.writeln('<BODY><h2>');
        parent.descrizione.document.writeln('');
        if(numero == "1")
         {
        parent.descrizione.document.writeln('<img src=/www/images/webb.gif width=70 height=70 ><br>');
        parent.descrizione.document.writeln('L\'incredibile galleria di Sharon Webb');
        }
        if(numero == "2")
         {
        parent.descrizione.document.writeln('<img src=/www/fracday0.gif width=70 height=70 ><br>');
        parent.descrizione.document.writeln('La collezione di attrattori strani del prof. Sprott');
        }
        if(numero == "3")
         {
        parent.descrizione.document.writeln('<img src=/www/images/rooke.gif width=70 height=70 ><br>');
        parent.descrizione.document.writeln('Qui le immagini sono generate a caso ed evolvono seguendo un algoritmo genetico');
        }
        parent.descrizione.document.writeln('</h2></BODY>');
}

function off(){
       parent.descrizione.location.href = "blank.html";
}

// -->
</script>
</head>
<body>
<h3>Muovi il puntatore sui link! </h3>
<table>
<tr><td><a href=http://www.fractalus.com/sharon/ target="sito"
onMouseOver="on('1')" 
  onMouseOut="off()">
Sharon
</a>
<tr><td><a href=http://sprott.physics.wisc.edu/fractals.htm target="sito"
onMouseOver="on('2')" 
  onMouseOut="off()">
Sprott
</a>
<tr><td><a href=http://www.concentric.net/~srooke/ target="sito"
onMouseOver="on('3')" 
  onMouseOut="off()">
Rooke
</a>
</table>
</body>

e blank.html con la sola riga:

<html> </html>

INDIETRO a Seminario su HTHM dinamico

Maintained by Giuseppe Zito: info@zitogiuseppe.com
Last revised