Effetto onmouseover su links crossbrowser

Arretrati lista "Una demo Dhtml a settimana"

di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

I Css (Cascade Style Sheets - www.risore.net/css) hanno aggiunto molte potenzialità al linguaggio Html ed i Web masters che riescono a sfruttarli al meglio possono manipolare perfettamente il layout di un sito Web in modo altamente professionale e veloce.
Purtroppo Netscape sembra avere implementato a modo suo le specifiche del W3C (di cui Netscape è membro) e ha reso, in questo senso, la vita più difficile a tutti i realizzatori di siti Internet.
Per fortuna Dhtml ci viene incontro e grazie alla sua elasticità ha reso possibile la compatibilità di alcuni effetti tipici dei Css. Ad esempio l'effetto on mouse over su links, con cambi di colore del text-background, può essere ottenuto in modo crossbrowser con alcuni accorgimenti in Javascript. Vediamo come:

<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: #ffcccc; COLOR: #660066
}
</STYLE>

Questa prima parte di Css definisce le caratteristiche del testo, mentre con A:hover si imposta l'effetto on mouse over, che però non verrà letto da Netscape. Quest'ultimo browser infatti interprerà la sintassi scripting:

<SCRIPT language=JavaScript>
// Emulazione dell'effetto link hover di IE in NS.

var hoverBgColor = "#ffcccc"; // Copiato dall'IE una:hover definizione.
var hoverColor = "#660066";

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>

Nelle variabili:

var hoverBgColor = "#ffcccc";
var hoverColor = "#660066";

vengono stabiliti rispettivamente il colore del background e del testo quando il mouse passa sopra il link (onmouseover). Il resto del codice serve a modificare il layer che conterrà il collegamento ipertestuale. E' importante infatti, ai fini di un risultato positivo, racchiudere il testo linkato tra <layer><ilayer> e </layer></ilayer>. Come su può notare infatti:

<FONT face=Arial,Helvetica size=2><ILAYER><LAYER onmouseover=hover(this);><A href="http://www.risorse.net/css" target=_blank>Cascade Style Sheetes</A></LAYER></ILAYER>

Chiudiamo questa lettera nella speranza che almeno i due principali browsers possano trovare degli accordi per limitare gli stravolgimenti sintattici a cui devono ricorrere i Web masters più perspicaci.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/1999/dicembre/18.asp?print=ok