Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Magazine di tecnologie
Magazine di viaggio e turismo
Magazine di musica e spettacoli
Negozio di Informatica
Basilicata turismo
Food e territori
Agenzia di comunicazione turistica e Digital PR

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
 

Rotazione di immagini con descrizione

Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: Ms Ie, Opera
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Uno degli aspetti più interessanti di Dynamic Html, è indubbiamente la capacità di mettere in movimento immagini e testo con relativa semplicità. La demo di questa settimana, mostrerà infatti, come far muovere 7 differenti immagini in modo tale da disegnare un cerchio. Altra capacità di questo script, è la possibilità di associare una descrizione a ogni 'pulsante' grazie al gestore degli eventi 'onmouseover'. Prima di cominciare però, vediamo di spiegare brevemente cosa sono questi 'gestori degli eventi'. Gli eventi, sono le azioni compiute dall'utente. Il gestore serve appunto per amministrare ciò che il visitatore compie nella 'sessione di lavoro'. In questa demo è utilizzato OnMouseOver, ossia quando il mouse sfiora un oggetto nel documento. Altri possono sostituirlo e alcuni di questi verranno utilizzati nelle demo delle prossime settimane. Ma ritornando al presente script, vediamo come impostarlo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Demo dhtml - www.risorse.net</title>

<!-- DHTML Amazing Navigator
by Uri Kerbel, August 1998
e-mail: uri@kalbi.demon.co.uk
Site : http://www.kalbi.demon.co.uk -->

Fino a qui, nulla di particolare, questa porzione di codice serve solo per contattare l'autore dello script (se voleste...)

<!-- Now we begin the script... -->

<script language="JavaScript">

//First we need to check whether the user is using IE4 or not. You may use
this function to direct users to another page
//if they are not using IE4 or higher.

var RunningIE4
RunningIE4 = (msieversion() >=4);

// if the user is not running IE4 or higher you could direct them to another page
// or perform different operations on the current page. I've chosen to simply pop
// up an alert box warning them that the page is not displayed correctly on their system

if(!RunningIE4)
alert("Please note that this script is intended for visitors using IE4, as it will only run correctly on this platform. Unfortunately, as you are using another browser you will not experience any animation when viewing this page.");

function msieversion() {
var ua = window.navigator.userAgent
var msie = ua.indexOf ( "MSIE " )
if ( msie > 0 ) // is Microsoft Internet Explorer; return version number
return parseInt ( ua.substring ( msie+5, ua.indexOf ( ".", msie ) ) )
else
return 0 // is other browser
}

function checkForIE4 () {
if (RunningIE4 == true) {
return true ;
} else {
alert("Sorry, but this page can only be viewed using IE4!")
return false
}
}

</script>

Questo JavaScript iniziale, serve per individuare il browser del client (noi che facciamo richiesta della pagina al server) e filtrare coloro che non utilizzano Internet Explorer. Importanti, tra le altre, sono le righe:

alert("Please note that this script is intended for visitors using IE4, as
it will only run correctly on this platform. Unfortunately, as you are using
another browser you will not experience any animation when viewing this
page.");

che avvertono i limiti di questo script e avvisano di utilizzare il browser di casa Redmond.

Il codice che seguirà, ci sarà utile per fare in modo che le immagini, se presenti nella cache, vengano caricate da lì invece che dal server (più lento del nostro hard disk)

<script language="JavaScript">
<!--

// first we preload the images into cache

// ensure that the browser supports this function
if (document.images) {
//load the images into cache
logoimg = new Image();
logoimg.src = "images/kerlogo2.gif"
img0 = new Image();
img0.src = "galileo_piccolo.gif";
img1 = new Image();
img1.src = "galileo_piccolo.gif";
img2 = new Image();
img2.src = "galileo_piccolo.gif";
img3 = new Image();
img3.src = "galileo_piccolo.gif";
img4 = new Image();
img4.src = "galileo_piccolo.gif";
img5 = new Image();
img5.src = "galileo_piccolo.gif";
img6 = new Image();
img6.src = "galileo_piccolo.gif"
img7 = new Image();
img7.src = "galileo_piccolo.gif"
}

La parte che segue, fa sempre parte dello script precendente, ed è di vitale importanza per la corretta funzionalità della demo. Particolarmente utili, sono le righe:

numPics = 7;
xstart = 180;
ystart = 100;

le quali servono:
la prima indica il numero delle immagini che ruotano (nel nostro caso 7)
la seconda la distanza in pixel dalla sinistra del documento
la terza la distanza in pixel dal top del documento

// now we can start the animation script

numPics = 7;
xstart = 180;
ystart = 100;

var handle; // used as a handle to the animation loop
var angle = 0; // the angle of rotation in radians
var r = 98; // the radius of the circle
var inc = Math.PI/180; // The angle is incremented by this each time through the loop

picAngles = new Array(numPics); // an array to store the current angles of the images
picAngles[0] = 0; // initialise the initial image angle

// get the images into their starting positions according to the number of images used
for (i=1;i<picAngles.length;i++)
picAngles[i] = picAngles[i-1] + ( (2*Math.PI) / picAngles.length );


// Start the movement off if the user is using IE4
function StartMoving() {
if (RunningIE4 == true) {
handle = window.setInterval("ScrollPics()",10);
}
}

// The function to scroll the picture across the screen
function ScrollPics() {

var objectName;

for(i=0;i<picAngles.length;i++) {
objectName = 'pic' + i;

picAngles[i] += inc; // increment the angle of the current image
document.all(objectName).style.left = (r * Math.cos(picAngles[i])) +
xstart;
document.all(objectName).style.top = (r * Math.sin(picAngles[i])) +
ystart;
}

}


// -->
</script>

</head>>

Una volta messe le basi per far avviare l'animazione, basta richiamarla all'interno dei tag <body></body>:

<body onload="StartMoving()">
<p>
<a href="siteanimator.htm" target="_self"><img id="pic0"
src="galileo_piccolo.gif" alt="Magazine" border="0" width="87" height="21"
style="position:absolute;"
onMouseOver="popupDescrip.style.visibility='visible';popupText.innerText='Ma
gazine'"></a>

<a href="colors.htm" target="_self"><img id="pic1" src="galileo_piccolo.gif"
alt="DHTML" border="0" width="87"
height="21" style="position:absolute;z-index:2;"
onMouseOver="popupDescrip.style.visibility='visible';popupText.innerText='Dy
namic HTML store'"></a>

<a href="navigation.htm" target="_self"><img id="pic2"
src="galileo_piccolo.gif" alt="Mercatino"
border="0" width="87" height="21"
style="position:absolute;"
onMouseOver="popupDescrip.style.visibility='visible';popupText.innerText='Me
rcatino Informatico'"></a>

<a href="applets.htm#text" target="_self"><img id="pic3"
src="galileo_piccolo.gif"
alt="Archivio di demo" border="0" width="87" height="21"
style="position:absolute;z-index:3;"
onMouseOver="popupDescrip.style.visibility='visible';popupText.innerText='Ar
chivio di demo DHTML'"></a>

<a href="applets.htm#interact" target="_self"><img id="pic4"
src="galileo_piccolo.gif"
alt="Articoli dinamici" border="0" width="87" height="21"
style="position:absolute;"
onMouseOver="popupDescrip.style.visibility='visible';popupText.innerText='Te
oria su DHTML'"></a>

<a href="aquarium.htm" target="_self"><img id="pic5"
src="galileo_piccolo.gif" alt="Links" border="0" width="87"
height="21" style="position:absolute;z-index:4;"
onMouseOver="popupDescrip.style.visibility='visible';popupText.innerText='Li
nks a altri siti dinamici'"></a>

<a href="applets.htm#clocks" target="_self"><img id="pic6"
src="galileo_piccolo.gif"
alt="...altro" border="0" width="87" height="21"
style="position:absolute;"
onMouseOver="popupDescrip.style.visibility='visible';popupText.innerText='..
.e tanto altro'"></a>

<a href="../index.htm" target="_top"><img src="kerlogo2.gif"
alt="Galileo" border="0" width="340" height="106"
style="position:absolute;left:190;top:40;"
onMouseOver="popupDescrip.style.visibility='visible';popupText.innerText='Ga
lileo'"></a>

Per questa parte, bisogna dire ancora alcune cose: All'interno del tag <body> è contenuta la stringa onload="StartMoving()" che serve per far avviare l'animazione all'avventuo caricamento della pagina. Se si vuole modificare la descrizione delle immagini, le righe di codice da modificare sono quelle contenute all'interno del gestore 'onmouseover'; ad esempio:

onMouseOver="popupDescrip.style.visibility='visible';popupText.innerText='Links a altri siti dinamici'"

Avrete notato che le descrizioni dei pulsanti sono contenute in una tabella con sfondo blu. Se cio' non vi aggrada, potete cambiarle modificando le restanti righe di codice contenute nel tag <body>, proprio alla fine del documento:

<span id="popupDescrip"
style="position:absolute;left:370;top:145;visibility:hidden;">
<table border="3" bgcolor="#0000FF" bordercolor="#C0C0C0"
bordercolordark="#008080" bordercolorlight="#C0C0C0" width="30%">
<tr>
<td align="center" width="90%"><p align="center"><font
color="#FFFFFF"><span
id="popupText"><strong></strong></span></font></p>
</td>
</tr>
</table>
</span>

</body></html>

 

 
 
Home > dhtml > teoria > 1999 > maggio > ...   © 1999-2018 Risorse.net, tutti i diritti riservati