utentionline
searchengine
quicklinks
WebDesigner
Tutorials ASP
Tutorials XHTML
Tutorials Javascript
Tutorials HTML-CSS
Tutorials SQL
Tutorials PHP & MySQL
AJAX applicazioni web
Web Development
Template & Layout
Non solo Web :: Blog
Portfolio Lavori
Who is Yappy?
Benvenuto nella Newsletter
libririviste
Calendario motoGP 2007
newscorsi
FAQ & Domande
newscorsi
Web Designer gratuitoCorso Web Designer Gratuito per creare siti internet trucchi, consigli, esempi pratici e template per diventare un vero web designer.
Seo Extreme 2007
Al corso nazionale "Seo Extreme 2007" troverai le ultime tecniche e strategie di Posizionamento nei motori di ricerca. Parteciperai ad un corso di alto livello dedicato a chi vuole fare posizionamento...
libririviste
Web Design Facile"Web Design Facile" di Davide Vasta è una guida pratica che conduce il lettore, passo per passo attraverso la realizzazione di un sito Internet: dalla creazione di un prototipo da mostrare al cliente fino al suo sviluppo definitivo.
WebDesigner 22
Web Designer Magazine n.22. Flash in prima linea, conoscere l'ultima versione del programma Macromedia. Inserire video Flash nelle vostre pagine. In primo piano "diventare Designer di successo".
Web Marketing
Trucchi headlines efficaci 8Trucchi headlines efficaci 7
tagclouds
corso PHP lez3 Pensa se non ci avessi provato corso PHP lez1 Importare Video con Flash (par Galleria d'Arte Bargilli BLog e posizionamento nei moto HackNews Blog Logo omni-presente GP BETANDWIN.com De Espana Personalizzazione & Cookie Tutorials XHTMLsyndicate
RSS 2.0Atom feed
CreativeCommons
stampa l'articolo
segnala ad un amicoTooltips in JavaScript
[06 Giu 2004]Con questo termine intendiamo quelle schede che appaiono accanto ad un collegamento al passaggio del mouse e che si muovono accanto ad esso finchè il mouse non viene spostato altrove. Un elemento da riutilizzare sicuramente...
Con questo termine intendiamo quelle schede che appaiono accanto ad un collegamento al passaggio del mouse e che si muovono accanto ad esso finchè il mouse non viene spostato altrove, come mostrato nella pagina di esempio.
Gli elementi necessari a realizzare l'effetto sono:
[1] le immagini da utilizzare come sfondo;
[2] la pagina index.html con i collegamenti e i livelli delle tooltip;
[3] il file codice.js che contiene il codice per far apparire e muovere i livelli con le tooltip.
Scaricate le immagini e scompattatele nel vostro desktop nella cartella "tooltip" come mostrato nella figura, al suo interno verranno salvati i due file index.html e codice.js.Iniziamo ad analizzare il codice necessario a creare la pagina index.html.
<html><head>
<title>Pagina dei collegamenti</title>
<style>
p {font: 8pt Verdana,Arial,Helvetica,sans-serif;
width: 120px; margin:10px;}
td {font: 7pt Verdana,Arial,Helvetica,sans-serif;}
a {color:#660000; text-decoration:none; padding:8px;}
a:hover {background: #990000; color:#ffffff}
a:visited {border-bottom: 1px dotted #660000;}
body {padding: 10px;}
</style>
<script type="text/javascript" src="codice.js"></script>
</head>
<body>
Nella prima parte come al solito indichiamo gli stili necessari alla creazione della pagina e la formattazione dei testi quindi il collegamento al file "codice.js" che conterrà? gli elementi necessari al funzionamento.
All'interno della pagina, per velocizzare la scrittura dei collegamenti, che ovviamente è possibile scrivere anche manualmente è stato creato un Array.
<script type="text/javascript">
var sito = new Array();
sito[1]="http://www.sito1.it";
sito[2]="http://www.sito2.it";
sito[3]="http://www.sito3.it";
sito[4]="http://www.sito4.it";
sito[5]="http://www.sito5.it";
for (i=1;i<sito.length;i++){
collegamento = "<p><a onmouseover='imposta("+i+")' ";
collegamento = collegamento + "onmouseout='imposta(0)' href='" + sito[i] +"' target='_blank'>"+sito[i]+"</a></p>"; document.write(collegamento);
}
</script>
I comandi che mettono in funzione il meccanismo del tooltip sono:
:: onmouseover='imposta("+i+")'
che permette di "accendere" il tooltip relativo al collegamento selezionato;
:: onmouseout='imposta(0)'
che al contrario disattiva il tooltip precedentemente attivato.
Nella pagina ora mancano proprio i tooltip, nell'esempio li avete visti in azione; si tratta semplicemente di livelli opportunamente occultati all'interno della pagina ...
Da notare che ogni livello è stato associato il nome "tooltip" ed un numero.
<div id="tooltip1" style="position: absolute; top: -200px; width: 250px">
<img src="img/1.gif" height="124" width="220">
<div style="position: absolute; left: 7px; top: 7px; width: 110px; height: 53px;">
<table cellspacing=0 cellpadding=0 width="100%" border=0>
<tr><td><b>speed<b></td><td><b>time</b></td></tr>
<tr><td>56k:</td><td>125 min.</td></tr>
<tr><td>128k:</td><td>65 min.</td></tr>
<tr><td>DSL(768k):</td><td>12 min.</td></tr>
</table></div>
</div>
Realizziamo un livello per ogni collegamento presente, fino al livello "tooltip5". Ovviamente per motivi di spazio non li abbiamo riportati tutti.
<div id="tooltip5" style="position: absolute; top: -200px; width: 250px">
<img src="img/5.gif" height="124" width="220">
<div style="position: absolute; left: 63px; top: 7px; width: 110px; height: 53px;">
<table cellspacing=0 cellpadding=0 width="100%" border=0>
<tr><td><b>speed<b></td><td><b>time</b></td></tr>
<tr><td>56k:</td><td>125 min.</td></tr>
<tr><td>128k:</td><td>65 min.</td></tr>
<tr><td>DSL(768k):</td><td>12 min.</td></tr>
</table></div>
</div>
Osservazione: Nel caso in particolare questi livelli/tooltip contengono un'immagine e una tabella più piccola posizionata al suo interno in modo da non coprire l'immagine. Ovviamente potete modificare il testo e la grafica in funzione delle vostre esigenze a patto di nominare opportunamente il livello esterno.
L'elemento conclusivo della pagina è il comando che attiva il controllo sul movimento del mouse e del controllo sui livelli. Il valore passato al suo interno corrisponde al numero di collegamenti/tooltip realizzati.
<script type="text/javascript">
inizializza(5);
</script>
</body>
</html>
Osservazione: Tutte le volte che avete a che fare con i livelli e con il loro spostamento è necessario che la funzione javascript che li attivi sia alla fine del documento, in modo che il browser legga le istruzioni del movimento solo dopo aver posizionato e definito correttamente i livelli.
L'ultimo elemento da definire è proprio il documento javascript "codice.js" che andremo a salvare all'interno della cartella di lavoro. Nella prima parte sono come al solito sistemate le dichiarazioni delle variabili da utilizzare all'interno del sistema.
- il vettore tooltip per conservare le caratteristiche dei vari livelli;
- le variabili booleane (contengono true o false) per definire il browser utilizzato dall'utente;
- la variabile corrente che conserva il numero del tooltip attivo ovvero "0";
- le variabili mousex e mousex che contengono la posizione del mouse all'interno dello schermo.
// Variabili globali per l'utilizzo su vari browser
var tooltip=new Array();
var ie4 = document.all;
var ns4 = document.layers;
var ns6 = document.getElementById;
var corrente;
var mousex,mousey;
La funzione inizializza memorizza le caratteristiche DOM delle singole tooltip in funzione del browser dell'utente. Ricordiamo che la variabile locale num contiene il numero di livelli creati; il valore viene passato dal documento principale "index.html".
// Funzione di inizializzazione
function inizializza(num) {
var i;
corrente = 0;
// dichiarazione degli oggetti tooltip
for (i=1;i<=num;i++) {
if (ie4) eval("tooltip["+i+"] = document.all.tooltip"+i+";");
if (ns4) eval("tooltip["+i+"] = document.tooltip"+i+";");
if (ns6) eval("tooltip["+i+"] = document.getElementById('tooltip"+i+"').style;");
}
// Gestione degli eventi
if (ns4) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = MouseHandler;
}
La parte del codice per la gestione degli eventi, attiva il controllo della posizione del mouse all'interno dello schermo. Questa funzione si attiva ogni volta che il mouse cambia posizione sullo schermo.
La funzione imposta() al contrario è attivata al passaggio del mouse sui collegamenti. Come nel caso precedente la variabile numero contiene il valore passato dal collegamento attivato dall'utente.
// Funzione di impostazione del tooltip attivo
function imposta(numero) {
// Nasconde il tooltip correntemente visibile
if (numero==0) {
var sel = eval("tooltip["+corrente+"]");
sel.left = -400;
}
// Impostazione nuovo tooltip
corrente = numero;
}
Se il valore passato, e memorizzato nella variabile numero è uguale a zero (if (numero==0)) allora prendiamo il tooltip attivo e lo posizioniamo al di fuori dello schermo (sel.left = -400).
Quindi nella variabile corrente memorizziamo il nuovo valore.
La funzione MouseHandler invece se la variabile corrente è uguale a zero disattiva il controllo (if (corrente==0) return), altrimenti procede alla lettura delle coordinate del mouse in funzione del browser utilizzato.
// Gestore dell'evento MOUSEMOVE
function MouseHandler(evento) {
var selezionato;
// Se nessun tooltip deve essere visualizzato, esce dal flusso
if (corrente==0) return;
// Lettura delle coordinate del mouse
if (ie4) {
mousex = window.event.clientX + document.body.scrollLeft;
mousey = window.event.clientY + document.body.scrollTop;
} else {
mousex = evento.pageX;
mousey = evento.pageY;
}
// Spostamento del tooltip relativo alla voce desiderata
selezionato = eval("tooltip["+corrente+"]");
selezionato.left = mousex - 10;
selezionato.top = mousey + 10;
}
Quindi procede al posizionamento del livello corrente attraverso le sue caratteristiche left e top.
Il codice ora è completo, non avete che da salvare i documenti realizzati e controllare il risultato.
- Glossario:
- DOM (document object model)
- Modello ad oggetti del documento, la sua definizione varia leggermente in funzione del browser.
Lo scopo è quello di trovare efficacemente un oggetto nel documento HTML, al fine di modificarne le sue caratteristiche.
Nel nostro esempio difatti abbiamo la necessità? di spostare e nascondere i "tooltip".
