Livello di difficoltà: |
|
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".
|
| |
Effetto onmouseover su links crossbrowser
Arretrati lista "Una demo Dhtml a settimana"
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.
|
