hola foreros.
Tengo este código que muestra una imagen al pasar el ratón por un link, OK. Quiero que la imagen se muestre no al lado sino en una capa determinada.
<body.......
<div class="menu">
<ul id="nav">
<li class="current"><a href="#">Nombre</a></li>
<li><a href="#">Favoritos</a>
<ul>
<li><a href="#" target="_blank" title="Tutorial">Tutorial </a><li>
<li><a href="#">Favoritos-II</a>
<ul>
<LI><a href="#" class="screenshot" rel="img.gif" title="txt">Favorito-II</a></li>
...... />
Código CSS.
body { background-position: left top; background-image: url("img/fondopagina2.gif");
background-repeat: repeat-x; background-color: rgb(200, 231, 255); width: 100%;}
.menu {..................resto código............ }
/* Menu para mostrar imagen en el link */
#screenshot {
position:absolute; top:50px; left:150px; z-index:3;
border:4px solid #ff6347; /*borde rojo*/
background:#ffff99; /*amarillo clarito de fondo*/
padding:8px;
display:none;
color:#00080;
}
Código javascript.
this.screenshotPreview = function(){
xOffset = 60;
yOffset = 60;
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "<br/>" + this.t : "";
$("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
$(document).ready(function(){
screenshotPreview();
});
Qué me falta para que se muestre en una posición determinada y no al lado del link
Se puede poner también? target="_blank"en CSS o en Javasript
Gracias.:cool: