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
Rispondi quotando
