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

Links agitati con onmouseover

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

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

Dopo due numeri consecutivi della mailing list "Una demo Dhtml a settimana", lasciamo l'argomento dedicato ai sistemi di advertising con questa tecnologia e vediamo un esempio un po' più soft. Come creare dei link che al passaggio del mouse, vengano agitati.
E' bene sapere che, anche se l'esempio è compatibile solo con Ms Ie ed Opera, Netscape (la 4.x) non restituisce alcun tipo di errore. Vediamo insieme la sintassi:

<style>
.shakelink {
font-family:arial;
font-size:12pt;
position:relative
}
</style>


Innanzitutto il Css per i link che avranno l'effetto agitato. Poi possiamo inserire il Javascript per ottenere l'animazione:

<script language="javascript1.2">
//configure shake degree (where larger # equals greater shake)
var rector=3

///////DONE EDITTING///////////
var stopit=0
var a=1

function init(which){
stopit=0
shake=which
shake.style.left=0
shake.style.top=0
}

function rattlelink(){
if ((!document.all&&!document.getElementById)||stopit==1)
return
if (a==1){
shake.style.top=parseInt(shake.style.top)+rector
}
else if (a==2){
shake.style.left=parseInt(shake.style.left)+rector
}
else if (a==3){
shake.style.top=parseInt(shake.style.top)-rector
}
else{
shake.style.left=parseInt(shake.style.left)-rector
}
if (a<4)
a++
else
a=1
setTimeout("rattlelink()",50)
}

function stoprattle(which){
stopit=1
which.style.left=0
which.style.top=0
}
</script>


Come dicono i commenti inseriti, l'unica variabile da modificare è

var rector=3

Maggiore è il numero che andremo ad inserire, più grande sarà l'area della pagina occupata dal movimento del link durante l'effetto shaker.

Ora non ci resta che inserire il semplice link con il richiamo al Javascript appena analizzato:

<div align="center"><FONT FACE=ARIAL>Per testare questa demo Dhtml, passa il mouse sopra <a href="http://www.risorse.net" class="shakelink" onMouseOver="init(this);rattlelink()" onMouseOut="stoprattle(this)">questo link</a>.</font></div>

E' indispensabile ricordarsi di inserire anche il layer

<div>....</div>

Per far funzionare l'esempio.
A Martedì prossimo!

Per qualsiasi dubbio, puoi scrivere sul Forum di Risorse.net, all'indirizzo www.risorse.net/community/forum

L A   C O M U N I T A `   D I   R I S O R S E . N E T
Per accedere alle sezioni protette di Risorse.net (Forum, Newsgroup, sezione password dell'archivio Dhtml ecc.) devi essere iscritto alla Comunità. L'iscrizione è gratuita e viene garantita la tutela della privacy (675/96). Visita www.risorse.net/community.
 

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