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".
 

Testo rotante in 3D

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

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

Il tridimensionale è sempre stato un campo poco sfruttato nel Web publishing. Esperimenti vari, come ad esempio il Vrml, non hanno ottenuto i risultati sperati. Dhtml non è certo la tecnologia adatta per sfruttare appieno le potenzialità offerte da questo ambiente, ma, vista la sua flessibilità e la sua semplicità, può essere d'aiuto per piccole animazioni tridimensionali. Nell'esempio di oggi, un semplice testo verrà visualizzato in 3D inserendo la stessa scritta in tre direzioni, per simulare l'altezza, la larghezza e la profondità. Vediamo il codice da utilizzare:

<SCRIPT LANGUAGE="VBScript">
<!--
' Sets initial variables and letter starting positions

Sub Window_OnLoad()
call SG1.Scale(0.50, 0.50, 0.50)
call SG2.Scale(0.50, 0.50, 0.50)
call SG3.Scale(0.50, 0.50, 0.50)
call SG4.Scale(0.50, 0.50, 0.50)
call SG1.Rotate(0, 0, 0)
call SG2.Rotate(90, 0, 0)
call SG3.Rotate(0, 90, 0)
RotateAll
end sub

' sets rotation speed and behavior as well as creating loop

Sub RotateAll
Call SG1.Rotate(4,6,2)
Call SG2.Rotate(4,6,2)
Call SG3.Rotate(4,6,2)
Call SG4.Rotate(4,6,2)
FILK = Window.SetTimeOut("Call RotateAll", 50, "VBSCript")
End Sub
-->
</SCRIPT>


In questa prima parte di sintassi Vb Script (www.risorse.net/vbscript) non va modificato nulla. Ricordiamo che il linguaggio di Microsoft è compatibile solo con Internet Explorer, ecco perché l'esempio non è compatibile con Netscape o Opera.

<OBJECT id=SG4 STYLE="POSITION:ABSOLUTE; HEIGHT: 600; LEFT: 15%; TOP: 15%; WIDTH: 600; ZINDEX: 0" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
<PARAM NAME="Line0001" VALUE="SetLineStyle(0)">
<PARAM NAME="Line0002" VALUE="SetFillColor(64, 64, 255)">
<PARAM NAME="Line0003" VALUE="SetFillStyle(1)">
<PARAM NAME="Line0004" VALUE="SetFont('Arial', 380, 700, 0, 0, 0)">
<PARAM NAME="Line0005" VALUE="Text('.net', -95, 87)">
</OBJECT>

<!--Object creates green outline around solid E, structured graphic using text set to no fill -->

<OBJECT id=SG1 STYLE="POSITION:ABSOLUTE; HEIGHT: 600; LEFT: 15%; TOP: 15%; WIDTH: 600; ZINDEX: 0" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
<PARAM NAME="Line0001" VALUE="SetLineStyle(1)">
<PARAM NAME="Line0002" VALUE="SetLineColor(0, 255, 255)">
<PARAM NAME="Line0003" VALUE="SetFillStyle(0)">
<PARAM NAME="Line0004" VALUE="SetFont('Arial', 380, 700, 0, 0, 0)">
<PARAM NAME="Line0005" VALUE="Text('.net', -95, 87)">
</OBJECT>

<!-- Object creates pink E that loops around -->

<OBJECT id=SG3 STYLE="POSITION:ABSOLUTE; HEIGHT: 600; LEFT: 15%; TOP: 15%; WIDTH: 600; ZINDEX: 1" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
<PARAM NAME="Line0001" VALUE="SetLineStyle(1)">
<PARAM NAME="Line0002" VALUE="SetLineColor(255, 0, 255)">
<PARAM NAME="Line0003" VALUE="SetFillStyle(0)">
<PARAM NAME="Line0004" VALUE="SetFont('Arial', 380, 700, 0, 0, 0)">
<PARAM NAME="Line0005" VALUE="Text('.net', -95, 87)">
</OBJECT>

<!--Creates yellow "E" at 90 degrees to others.-->

<OBJECT id=SG2 STYLE="POSITION:ABSOLUTE; HEIGHT: 400; LEFT: 15%; TOP: 15%; WIDTH: 400; ZINDEX: 2" CLASSID ="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">
<PARAM NAME="Line0001" VALUE="SetLineStyle(1)">
<PARAM NAME="Line0002" VALUE="SetLineColor(255, 255, 0)">
<PARAM NAME="Line0003" VALUE="SetFillStyle(0)">
<PARAM NAME="Line0004" VALUE="SetFont('Arial', 380, 700, 0, 0, 0)">
<PARAM NAME="Line0005" VALUE="Text('.net', -95, 0)">
</OBJECT>


In questi parametri sono contenute informazioni importanti, come la dimensione e la posizione del riquadro con il testo 3D, i caratteri da visualizzare, il tipo di font da usare ecc. Vediamo come personalizzare l'esempio. Tutte le informazioni sono ripetute quattro volte, quindi, per rendere omogenea l'effetto della demo, si consiglia di modificare ogni valore nei quattro punti in cui appare. Per esempio, la dimensione e la posizione del riquadro è contenuta nelle righe:

<OBJECT id=SG4 STYLE="POSITION:ABSOLUTE; HEIGHT: 600; LEFT: 15%; TOP: 15%; WIDTH: 600; ZINDEX: 0" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">

e

<OBJECT id=SG1 STYLE="POSITION:ABSOLUTE; HEIGHT: 600; LEFT: 15%; TOP: 15%; WIDTH: 600; ZINDEX: 0" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">

ed ancora:

<OBJECT id=SG3 STYLE="POSITION:ABSOLUTE; HEIGHT: 600; LEFT: 15%; TOP: 15%; WIDTH: 600; ZINDEX: 1" CLASSID = "CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">

ed infine:

<OBJECT id=SG2 STYLE="POSITION:ABSOLUTE; HEIGHT: 400; LEFT: 15%; TOP: 15%; WIDTH: 400; ZINDEX: 2" CLASSID ="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6">

Le parti più importanti che si possono modificare però, sono il testo ed il tipo di font da utilizzare per la visualizzazione dello stesso. Entrambi sono contenuti in due parametri, posti uno sotto l'altro. Ecco quali:

<PARAM NAME="Line0004" VALUE="SetFont('Arial', 380, 700, 0, 0, 0)">
<PARAM NAME="Line0005" VALUE="Text('.net', -95, 0)">


Queste due righe sono ripetute quattro volte all'interno dello script. Ti congliamo di modificarle tutte e quattro le volte.

N.B.: Per la realizzazione dei tuoi siti Web, Risorse.net ti offre una nuova sezione, ideale soprattutto per i Web designers. Un grande archivio di True Type Fonts, con articoli ad hoc per la comprensione e l'utilizzo degli stessi. Clicca qui per visitarla: www.risorse.net/font.
 

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