Testo alternativo sui link con un layer in Dhtml

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

E' molto importante fornire agli utenti una descrizione più o meno completa del contenuto di un link, il cui semplice testo cliccabile non è mai del tutto sufficiente allo scopo. E' possibile con semplice Html far comparire un testo al passaggio del mouse, semplicemente impostando l'attributo title del Tag <a>. In questo Articolo vedremo come personalizzare l'aspetto del messaggio con un semplice script Dhtml.

Oltre allo script abbiamo bisogno di un livello di tipo span a cui assegneremo l'identificativo livello ed un po di codice Css per formattarlo a dovere. Di seguito il codice completo con qualche commento allo script:

<html>
    <head>
        <title>Testo alternativo sui link con un layer</title>
        <style type="text/css">
            span
            {
                font-size: 12px;
                font-family: Verdana;
            }
            #livello
            {
                background-color: #FFFFCC;
                font-size: 10px;
                padding: 5px;
                border: Solid 1px #000000;
            }
            a
            {
                color: #0000FF;
                text-decoration: None;
            }
            a:hover
            {
                color: #FF0000;
                text-decoration: Underline;
            }
        </style>
        <script language="javascript">
            <!--
                function Mostra(testo)
                {
                    livello.innerHTML        = testo; // IMPOSTA IL TESTO NEL LIVELLO
                    livello.style.visibility = "Visible"; // MOSTRA IL LIVELLO
                    livello.style.position   = "Absolute"; // POSIZIONA IL LIVELLO IN MODALITA' ASSOLUTA
                    livello.style.left       = event.clientX + 15; // IMPOSTA LE COORDINATE IN ORIZZONTALE
                    livello.style.top        = event.clientY + 15; // IMPOSTA LE COORDINATE IN VERTICALE
                }
                function Nascondi()
                {
                    livello.style.visibility = "Hidden"; // NASCONDE IL LIVELLO
                }
            //-->
        </script>
    </head>
<body>

<a href="http://www.lukeonweb.net"
    target="_blank"
    onMouseMove="Mostra('... il giornale per Webmaster')"
    onMouseOut="Nascondi()">lukeonweb.net</a>

<br>

<a href="http://www.ducetidreams.net"
    target="_blank"
    onMouseMove="Mostra('Vivi anche tu il sogno Ducati')"
    onMouseOut="Nascondi()">Ducati Dreams CLUB</a>

<span id="livello"></span>

</body>
</html>
Alle funzioni Mostra() (chiamata all'evento onMouseMove sul link) passeremo come parametro il testo alternativo del link. La funzione Nascondi() (chiamata all'evento onMouseOut sul link) non riceve parametri.

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (106.555)

:: Breve guida a jQuery (96.818)

:: Le espressioni regolari in Javascript (84.690)

:: Gestione delle stringhe in Javascript (74.154)

:: Stampare una pagina col Dhtml (42.639)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (39.785)

:: Menu orizzontale dinamico in Dhtml (36.961)

:: Gli Array in Javascript (35.690)

:: Temporizzazioni Javascript (31.211)

:: Istruzion condizionali in Javascript: if e switch (28.629)

IN EVIDENZA
DOWNLOAD