INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Testo alternativo sui link con un layer in Dhtml

Autore: Luca Ruggiero | Tell a Friend

Corso Java
Impara a programmare col linguaggio OOP della Sun.

Corso Javascript e DHTML
Impara a creare controlli ed animazioni!

Corso Web Design
Disegno di siti Web con HTML, CSS e Dynamic HTML.

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.

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Breve guida a jQuery Effetto ombra su testo con Photoshop Guadagna col tuo sito grazie a TradeD... Guida XHTML Riscrivere le URL con Asp Riavviare IIS HTTP 500 internal server error Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Introduzione ad Ajax ed Asp con Jscri... Referenze dei Tag Html Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript
HOT LINKS
Servizi per Webmaster E-Commerce News Manager Newsletter Corsi online eBooks PC Guadagna col sito Hosting 20 euro Reg. domini Email gratis FAX via email Tlefonare col PC ADSL Alice ADSL FastWeb