Lo script che presentiamo mostra un messaggio di testo descrittivo, in una posizione fissa, al passaggio del mouse su un link.
Il codice è semplice da configurare e non richiede perticolari modifiche. È compatibile con tutti i principali browser in circolazione.
- esempio.htm
- changetext_image.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo il seguente foglio di stile tra i tag <head> della pagina:
<style type="text/css">
#divLinks {position:absolute; left:150px; top:150px; visibility:hidden;}
#divLinks a {color:#336699; font-family:verdana,arial,helvetica,sans-serif; font
-size:12px; font-weight:700;}
#divMessage {position:absolute; left:150px; width:300px; top:180px;
visibility:hidden;}
body {background-color:#ffffff;}
</style>
#divLinks
imposta le proprietà di stile del riquadro contenente i link. Deve essere nascosto per impedire che gli utenti, passando il mouse su di esso mentre la pagina si sta caricando, generino errori.
#divLinks a
imposta lo stile dei link al passaggio del mouse.
#divMessage
imposta le proprietà di stile del riquadro contenente il messaggio di testo.
Deve essere nascosto per impedire che gli utenti, passando il mouse su di esso mentre la pagina si sta caricando, generino errori.
body
imposta lo stile della pagina.
Sempre tra i tag <head> della pagina, subito sotto il foglio di stile, inseriamo il seguente codice JavaScript:
<script language="javascript" type="text/javascript">
/**********************************************************************************
ChangeText
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by Thomas Brattli
*
* Script date: 08/02/2001 (keep this date to check versions)
*********************************************************************************/
function lib_bwcheck(){ // Controllo browser (necessario)
this.ver = navigator.appVersion;
this.agent = navigator.userAgent;
this.dom = document.getElementById? 1: 0;
this.opera5 = (navigator.userAgent.indexOf("Opera")> -1 &&
document.getElementById)? 1: 0;
this.ie5 = (this.ver.indexOf("MSIE 5")> -1 && this.dom && !this.opera5)? 1:
0;
this.ie6 = (this.ver.indexOf("MSIE 6")> -1 && this.dom && !this.opera5)? 1:
0;
this.ie4 = (document.all && !this.dom && !this.opera5)? 1: 0;
this.ie = this.ie4 || this.ie5 || this.ie6;
this.mac = this.agent.indexOf("Mac")> -1
this.ns6 = (this.dom && parseInt(this.ver)>= 5) ? 1: 0;
this.ns4 = (document.layers && !this.dom)? 1: 0;
this.bw = (this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 ||
this.opera5);
return this;
}
var bw = lib_bwcheck()
if(document.layers){ //NS4 fissare il ridimensionamento...
scrX = innerwidth; scrY = innerheight;
onresize = function() {if(scrX != innerwidth || scrY !=
innerheight){history.go(0)} }
}
/****
Variabili da impostare
****/
msgFont = "arial,helvetiva"; // Il font per il messaggio
msgFontsize = 12; // Imposta la dimensione del testo in px
msgFontColor = "#000000"; // Imposta il colore del testo
msgwidth = "300"; // Imposta la larghezza del messaggio per Netscape 4
// Imposta il testo che vuoi visualizzare al passaggio del mouse
messages = new Array();
messages[0] = ""; // Questo è il testo di default che appare al verificarsi
dell'evento mouse out.
messages[1] = "Questo è il link n. 1, dovresti visitarlo veramente!";
messages[2] = "Link n. 2. È anche meglio!";
messages[3] = "Questo è il link n. 3, non è quello buono...";
messages[4] = "Forse dovresti provare questo.<br />Scriverò più testo per
mostrare che funziona correttamente anche su più linee.";
messages[5] = "<img src="changetext_image.gif" alt=""
border="0"/><br />Come puoi vedere, puoi inserire anche del codice HTML, come un'immagine.";
messages[6] = "Dulcis in fundo...";
/*******************************************************************************
*
Non devi cambiare niente qui sotto
********************************************************************************
/
// Costruttore dell'oggetto ChangeText
function makeChangeTextObj(obj){
this.css = bw.dom? document.getElementById(obj).style: bw.ie4?
document.all[obj].style: bw.ns4? document.layers[obj]: 0;
this.writeref = bw.dom? document.getElementById(obj): bw.ie4?
document.all[obj]: bw.ns4? document.layers[obj].document: 0;
this.writeIt = b_writeIt;
}
function b_writeIt(text,num){
if (bw.ns4){
this.writeref.write(text);
this.writeref.close();
}
else this.writeref.innerHTML = messages[num];
}
// La funzione mouoseover. Chiama il metodo writeIt per scrivere il testo nel
div.
function changeText(num){
if(bw.bw) oMessage.writeIt('<table width="'+msgwidth+'" border="0"
cellpadding="0" cellspacing="0"><tr><td><span style="font-size:'+msgFontsize+'px; font-family:'+msgFont+';
color:'+msgFontColor+'">'+messages[num]+'</span></td></tr></table>', num);
}
// La funzione init. Chiama l'oggetto costruttore e inizializza alcune
proprietà.
function changeTextInit(){
// Fissa il controllo del browser per opera... può essere rimosso se il
controllo del browser viene aggiornato!!
bw.opera5 = (navigator.userAgent.indexOf("Opera")> -1 &&
document.getElementById)? true: false;
if (bw.opera5) bw.ns6 = 0;
oMessage = new makeChangeTextObj('divMessagè)
oLinks = new makeChangeTextObj('divLinks')
// Imposta lo stile del layer di testo.
if(bw.dom || bw.ie4){
with(oMessage.writeref.style){fontFamily=msgFont; fontsize=msgFontsize+"px";
color=msgFontColor}
}
// Entrambi i layers sono nascosti per default per impedire che gli utenti,
passando il mouse su di essi mentre la pagina si sta caricando, generino errori.
oMessage.css.visibility = "visible";
oLinks.css.visibility = "visible";
}
// Se il browser è ok, la funzione init è chiamata al caricamento della pagina.
if (bw.bw) onload = changeTextInit;
</script>
Vediamo quali sono le variabili da personalizzare.
msgFont = "arial,helvetiva";
imposta i font del messaggio di testo.
msgFontsize = 12;
determina la dimensione del testo del messaggio.
msgFontColor = "#000000";
imposta il colore del testo del messaggio.
msgwidth = "300";
stabilisce la larghezza del messaggio per Netscape 4.
Vediamo ora come creare i messaggi di testo da visualizzare al passaggio del mouse.
Prima di tutto occorre inizializzare l'array "messages":
messages = new Array()
Dobbiamo poi immettere il testo di default, che sarà visualizzato quando il mouse lascierà un link. Inseriamolo nell'indice "0" dell'array:
messages[0] = "testo di default"
A questo punto dobbiamo creare un messaggio di testo per ogni link. Inseriamoli incrementando di volta in volta l'indice dell'array "messages" di un'unità (messages[1], messages[2] e così via).
messages[x] = "Mio messaggio di testo"
Le restanti parti del suddetto codice JavaScript non necessitano di personalizzazione e devono essere lasciate invariate.
A questo punto inseriamo il seguente codice HTML all'interno dei tag <body> della pagina:
<div id="divLinks">
<a href="https://www.html.it/" onmouseover="changeText(1)" onmouseout="changeText(0)">Link 1</a>
<a href="http://pro.html.it/" onmouseover="changeText(2)" onmouseout="changeText(0)">Link 2</a>
<a href="#" onmouseover="changeText(3)" onmouseout="changeText(0)">Link 3</a>
<a href="http://freepht.html.it/" onmouseover="changeText(4)" onmouseout="changeText(0)">Link 4</a>
<a href="#" onmouseover="changeText(5)" onmouseout="changeText(0)">Link 5</a>
<a href="http://freeasp.html.it/" onmouseover="changeText(6)" onmouseout="changeText(0)">Link 6</a>
</div>
Dobbiamo personalizzare l'interno di questo div con i nostri link.
Come si può vedere, i link devono avere la forma usuale, occorre avere però l'accortezza di inserire gli attributi "onmouseover" e "onmouseout" all'interno del tag <A>:
<a href="mio_link" onmouseover="changeText(x)" onmouseout="changeText(0)">testo_link</a>
L'argomento passato nella funzione "changeText" dovrà essere l'indice dell'array messages corrispondente al messaggio di testo desiderato.
Infine, sempre tra all'interno dei tag <body> della pagina, inseriamo il seguente codice:
<div id="divMessage">
</div>
All'interno di questi tag <DIV> possiamo inserire un testo predefinito, che sarà visualizzato in qualsiasi browser 3.x. Il testo potrà essere formattato utilizzando tag HTML ma, per garantire la compatibilità con i browser più vecchi, tale codice non dovrà comprendere layer.
Altre modifiche non sono necessarie.
