Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Grafica Effetto Growing
Postato da webmaster il Sunday, 30 April @ 00:00:00 CEST
Contributo di webmaster

Questo script ridimensiona in modo dinamico un'immagine, portandola da una dimensione minuscola fino ad una dimensione definita. Un effetto visivo di sicuro impatto che può catturare l'attenzione del visitatore. Di facile personalizzazione, nel richiamo html, il numero di passaggi e l'intervallo di tempo della transizione possono essere impostati.

Il codice javascript va inserito tra i tags <head> della pagina:

<!-- INIZIO CODICE -->

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var ival, imgname, total, steps, maxx, maxy, currentx, currenty, dx, dy;
function zoomImg(imgname, total, steps, maxx, maxy) {
total = total * 1000;
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
stepx = maxx / steps;
stepy = maxy / steps;
inttime = total / steps;
functionRef = "resizeImg('"+imgname+"', "+stepx+", "+stepy+", "+maxx+", "+maxy+")";
ival = setInterval(functionRef, inttime);
}
function resizeImg(imgname, dx, dy, maxx, maxy) {
objref = eval("document.getElementById('"+imgname+"')");
currentx = objref.width;
currenty = objref.height;
if ((currentx<maxx-dx) && (currenty<maxy-dy)) {
objref.height = currenty + dy;
objref.width = currentx + dx;
}
else {
clearInterval(ival);
objref.height = maxy;
objref.width = maxx;
}
}
// End -->
</SCRIPT>

<!-- FINE CODICE -->

  Il passo successivo è quello di inserire l'evento onLoad nel tag <body> della pagina web, richiamando la funzione zoomImg:

<BODY onLoad="zoomImg('growimg', 10, 50, 800, 600)">

Il secondo valore della funzione zoomImg imposta la variabile total che definisce la velocità della transizione. Nell'esempio è impostato a 10, diminuendo questo valore si avrà un tempo di transizione inferiore.

Il valore successivo indica il numero di passaggi che l'immagine deve fare prima di raggiungere le sue dimensioni finali. Nell'esempio è impostato a 50.

Gli ultimi due valori definiscono le dimensioni finali dell'immagine espresse in pixels. Nell'esempio sono impostate a 800 per la larghezza e a 600 per l'altezza.

Per ultimo inseriamo il tag img nel punto esatto in cui vogliamo visualizzare l'immagine.

<img src="pic.jpg" name="growimg" id="growimg" height="2" width="3">


 
Links Correlati
· Indice Grafica
· Inoltre Grafica
· News by webmaster


Articolo più letto relativo a Grafica:
Immagine che si illumina al passaggio del mouse

Valutazione Articolo
Average Score: 5
Voti: 8


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

GraficaJavascript





Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.07 Secondi

Theme by

© Oceanoweb