Home + Webmaster + Script + Javascript + Bottoni + Effetto CSS Crossbrowser

Effetto CSS Crossbrowser

Questo Javascript darà un effetto non molto diffuso in rete al link quando il mouse ci passa sopra.

<html>
<head>
<title>Effetto CSS Crossbrowser</title>

<STYLE type=text/css>A {
FONT-FAMILY: Arial,Helvetica,sans-serif; FONT-SIZE: 10pt; FONT-WEIGHT: bold; LINE-HEIGHT: normal; TEXT-DECORATION: none
}
A:hover {
BACKGROUND-COLOR: #16467d; COLOR: #ff9d0f
}
</STYLE>

// Emulazione dell'effetto link hover di IE in NS.

var hoverBgColor = "#16467d";    // Copiato dall'IE una:hover definizione.
var hoverColor   = "#ff9d0f";

function hover(layer) {

var link, str;

// Crea un sub-layer copiando il link in questo e cambiando
// sfondo e colori del testo.

link = layer.document.links[0];
str = '<a href="' + link.href + '"';
if (link.target)
str += ' target= "' + link.target + '"'
str += '><font color="' + hoverColor + '">' + link.text + '</font>';

layer.hoverLayer = new Layer(layer.clip.width, layer);
layer.hoverLayer.document.open("text/html", "replace");
layer.hoverLayer.document.write(str);
layer.hoverLayer.document.close();
layer.hoverLayer.bgColor = hoverBgColor;

// Mostra il layer hover iniziale.

layer.hoverLayer.visibility =  "show";

// Metti un evento da catturare su questo layer per la visibilità del
// sub-layer.

layer.onMouseOver = hoverOn;
layer.onMouseOut  = hoverOff;
}

function hoverOn() {

this.hoverLayer.visibility = "show";
}

function hoverOff() {

this.hoverLayer.visibility = "hide";
}

</SCRIPT>
</head>
<body bgColor=#ffffff link=#990000 vLink=#990000>
<ILAYER><LAYER 
onmouseover=hover(this);><A href="http://www.risorse.net/asp" 
target=_blank>Guida ad Asp</A></LAYER></ILAYER><BR><ILAYER><LAYER 
onmouseover=hover(this);><A href="http://www.risorse.net/xml" 
target=_blank>Guida a Xml</A></LAYER></ILAYER><BR><ILAYER><LAYER onmouseover=hover(this);><A href="http://www.risorse.net/perl">Guida a Perl</A></LAYER></ILAYER><BR><ILAYER><LAYER 
onmouseover=hover(this);><A 
href="http://www.risorse.net/flash">Guida a Flash</A></LAYER></ILAYER><BR><ILAYER><LAYER 
onmouseover=hover(this);><A 
href="http://www.risorse.net/html">Guida a Html</A></LAYER></ILAYER>
</body></html>

Compatibilità: MsIE | Netscape

Javascript

Altre risorse:
Libri Javascript | Manuale Javascript

Javascript e DHTML Corso per imparare lo scripting lato client con Javascript adatto a qualsiasi livello di esperienza.

Flash MX & ActionScript Corso sul linguaggio di programmazione ActionScript per rendere interattivi i filmati Flash.