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 Immagini con effetto fade
Postato da webmaster il Saturday, 01 November @ 08:00:00 CET
Contributo di webmaster

Lo script che presentiamo permette, utilizzando javascript e fogli di stile, di impostare un effetto trasparenza sulle immagini. Effetto che scompare con l'evento onMouseover. Il codice è decisamente semplice da impostare ed è compatibile con tutti i browser tranne Navigator, su cui non verrà restituito nessun errore ma non verrà visualizzato l'effetto.

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

<!-- INIZIO CODICE -->

<script language="JavaScript1.2">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",50)
}
function low(which2){
clearInterval(highlighting)
if (which2.style.MozOpacity)
which2.style.MozOpacity=0.3
else if (which2.filters)
which2.filters.alpha.opacity=30
}

function highlightit(cur2){
if (cur2.style.MozOpacity cur2.style.MozOpacity=parseFloat(cur2.style.MozOpacity)+0.1
else if (cur2.filters&&cur2.filters.alpha.opacity cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
</script>

<!-- FINE CODICE -->

Nello script non è necessaria nessuna modifica. Ciò che invece si dovrà personalizzare è il tag img delle immagini su cui applicare l'effetto.

Impostiamo una semplice immagine:

<img src="immagine.gif" width="100" height="100" border="0">

Basterà inserire la riga seguente, all'interno del tag <img src...>, per applicare l'effetto all'immagine:

style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)"

Ecco quindi come sarà il risultato:

<img src="immagine.gif" width="100" height="100" border="0" style="filter:alpha(opacity=30);-moz-opacity:0.3" onMouseover="high(this)" onMouseout="low(this)">
 
Ovviamente non ci sono limiti al numero di immagini a cui applicare il fade.


 
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: 4
Voti: 4


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

Grafica





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