Ciao a tutti,

sto guardando alcuni esempi assieme alla guida jQuery del sito per creare una funzione che visualizzi un tooltip contenente un'immagine al passaggio del mouse su un link.



*HTML (solo body)
Codice PHP:
<body>
        <div id="header">
            <h1>PROVA</h1>
        </div>
        <div id="container">
            <div id="work">
                <ul>[*]
                        [url="http://www.gazzetta.it"]TEST[/url]
                    [*]
                        [url="http://www.gazzetta.it"]TEST2[/url]
                    
                    [/list]
            </div>
            <div id="footer"> - FOOTER -</div>
        </div>
        
    </body> 
*CSS (una parte)
Codice PHP:
#header {
    position: absolute;
    width: 100%;
    height: 200px;
    top: 0px;
    background-color: black;
}

#container {
    position: absolute;
    width: 100%;
    top: 200px;
    left: 0px;
    height: 100%;
    background-color: red;
    margin: 0 auto;
}
#work{
    position:absolute;
    left:0px;
    height:100%;
    top:0px;
    width:600px;
    background-color:#c0c0c0;
    
}
#footer{
    position:absolute;
    width:100%;
    height:150px;
    bottom:0px;
    background-color:#804040;
    clear:both;
    
}

img {
    border: none;
}

ul, li {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
    max-width:200px;
    display: block;
    margin-right: 10px;
    background-color: white;
}

/*  */
#screenshot {
    float:right;
    position: relative;
    overflow:visible;
    border: 1px solid #ccc;
    background: #333;
    padding: 5px;
    display: none;
    color: #fff;
} 
*SCRIPT

Codice PHP:
this.Preview = function() {

    $("#work li ").hover(
            function(e) {
                
                this.t = this.title;
                this.title = "";
                
                
                var aTitle=$("a.screenshot").attr("title");

                this.p = $(this).width();
                /*
                  var pos=$(this).position(); 
                  var posL=$(this).position();
*/                

                var c = (this.t != "") ? "
" + this.t : "";
                $("#work").append(
                        "<div id='screenshot'><img src='" + this.rel
                                + "' alt='url preview' />" + aTitle + "</div>");
                $("#screenshot")
                
                .css("top", "50px").fadeIn("slow");

            }, function() {
                this.title = this.t;
                $("#screenshot").remove();
            });

};


$(document).ready(function() {
    Preview();
}); 
Lo script così ovviamente non funziona perchè ho modificato l'elemento su cui viene attivato "hover" (al posto di "#work li" c'era "a.screenshot").
Quello che non riesco a fare è leggere gli attributi del tag "a.screenshot" per poter completare il metodo append con "rel" e "title".

La variabile aTitle dovrebbe contenere l'attributo "title" del tag "a" o sbaglio qualcosa?


Attendo consigli!

Grazie