Tra le caratteristiche introdotte dai fogli di stile, una delle più interessanti e suggestive è certamente la possibilità di personalizzare i link testuali delle pagine Web. Si intendono in questa sede i normali link di testo creati con un banale ancoraggio ipertestuale:
<a href="http://www.html.it">HTML.it</A>
Se non è previsto altrimenti i link testuali risultano sottolineati e di colori standard in base al sistema operativo ed al browser.
Come accennato in apertura, i fogli di stile consentono di personalizzare l'effetto link e attivarlo con particolari effetti al passaggio del mouse. Per una panoramica sugli effetti possibli con i CSS rimandiamo alla pagina specifica:
Anche se ufficialmente standardizzati dal W3C, i fogli di stile sono pienamente supportati solo da MsIe 4 e successivo, e solo in parte da Netscape. Gli effetti sui link, in particolare, generano pienamente i propri effetti in MsIe, ma si limitano ad un'assenza della sottolineatura in Netscape. In ultima analisi i visitatori che accedono alla pagina con Netscape avranno una visione diversa da coloro che accedono con MsIe.
Javascript ha una soluzione a tale problematica ed in questo esempio mostreremo come, attraverso un uso congiunto di script e CSS, si possa raggiungere un effetto linkover compatibile con entrambi i browser.
L'esempio si compone di 1 file:
esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Questo file simula una normale pagina HTML, all'interno della quale si intende rendere attivi i link, i quali quando attivati dal puntatore del mouse, cambiano colore da blue a nero su uno sfondo giallo.
Innanzitutto è necessario impostare il codice all'interno del campo <head>. Si comincia con lo stabilire lo stile e gli attributi delle proprietà:
<style type=text/css>
a {text-decoration: none; font-size: 15px; font-size:16px; font-family:arial}
a:hover {background-color: yellow; color: black}
</style>
Questo codice priva i link della sottolineatura (text-decoration: none) e stabilisce per MsIe che quando il link viene attivato (A:hover) il suo colore di background diventi giallo (yellow) e il colore del link nero (black). Per ottenere l'effetto Linkover in Internet Explorer è sufficiente questo breve codice, ma non cosi' per Netscape, che si limitrebbe solo a privare i link dalla sottolineatura e nulla di più.
Perchè l'effetto si produca su entrambi i browser è necessario aggiungere sintassi Javascript. Vediamo insieme quale:
<script type="text/javascript" language="javascript">
<!--
//-->
</script>
var hoverBgColor = "yellow";
var hoverColor = "black";
function hover(layer) {
var link, str;
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;
layer.hoverLayer.visibility = "show";
layer.onMouseOver = hoverOn;
layer.onMouseOut = hoverOff;
}
function hoverOn() {
this.hoverLayer.visibility = "show";
}
function hoverOff() {
this.hoverLayer.visibility = "hide";
}
</script>
Le due righe di codice:
var hoverBgColor = "yellow";
var hoverColor = "black";
stabiliscono rispettivamente il colore di background (yellow) e del testo del link (black).
Null'altro va modificato nella sintassi dello script perchè questo produca i suoi effetti.
Impostati i fogli di stile e il codice Javascript all'interno dei campi <head> è necessario agire sui singoli link della pagina, nel modo seguente:
<ilayer>
<layer onmouseover=hover(this);><a href="https://www.html.it/">HTML.it</a></layer>
</ilayer>
Internet Explorer produrrà, comunque, gli effetti su tutti i link della pagina (perchè il CSS incorporato agisce su tutto il documento), mentre Netscape esclusivamente su quelli marcati come ILAYER.
Confidiamo che prima o poi gli sviluppatori possano ottenere effetti simili con identico codice, senza continui espedienti e acrobazie tecniche.
