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 Bordo sulle immagini al passaggio del mouse
Postato da webmaster il Friday, 31 October @ 08:00:00 CET
Contributo di webmaster

La presenza di menu grafici all'interno di pagine web č una consuetudine consolidata. Utilizzando un numero basso di colori e dimensioni ridotte si ottengono immagini di peso irrisorio e impatto estetico interessante. Le cose si complicano quando all'immagine si vuole aggiungere un effetto onmouseover. Con questo intendiamo il classico bottone che si anima al passaggio del mouse per poi tornare all'aspetto originale.

Lo script seguente ha un effetto simile ma ottenuto con codice differente, molto semplice ed intuitivo. Da un punto di vista tecnico lo script utilizza massicciamente le proprietā dei fogli di stile. Prima di tutto va impostato il foglio di stile nell'intestazione del documento (<head>):

<style>
.borderimage { border:2px solid white;}
</style>

.borderimage determina lo spessore in pixel (px) del bordo e il color (white) che deve avere quando non attivato dal passaggio del mouse. Provate a modificare il colore da white a black per verificarne il risultato. Impostato il foglio di stile inseriamo, sempre tra i tag <head>, il seguente codice:

<script language="JavaScript1.2">
function borderit(which,color){
if (document.all||document.getElementById){
which.style.borderColor=color
}
}
</script>

Fatto questo dobbiamo inserire dei riferimento all'interno delle immagini sulle quali vogliamo creare l'effetto onmouseover.

<img src="immagine.gif" class="borderimage" onMouseover="borderit(this,'red')" onMouseout="borderit(this,'white')"/>

Si tratta di un normale tag html per l'inserimento di immagini al quale abbiamo aggiunto il richiamo alla classe "borderimage" (impostata nell'head del documento) e i due gestori di eventi:

onMouseover="borderit(this,'red')"

Quando il mouse passa sull'immagine viene attivata la funzione "borderit" che dā al bordo un colore rosso (red)

onMouseout="borderit(this,'white')"

Quando il mouse esce dall'area dell'immagine viene nuovamente attivata la funzione "borderit" che dā al bordo un colore bianco (white). Modificando i colori si possono ottenere risultati differenti. Ovviamente alle immagini si possono associare link secondo le regole classiche dell'html:

<a href="http://www.altervista.org"><img src="nomefile.gif" class="borderimage" onMouseover="borderit(this,'red')" onMouseout="borderit(this,'white')"/></a>


 
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: 2


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.04 Secondi

Theme by

© Oceanoweb