Pessoal, eu sou leigo em Javascript e eu tenho uma função que faz quase tudo que preciso, exceto pelo fato dela mostrar a imagem onde o cursor está, quando eu queria numa posição fixa da tela;
A função abaixo só precisa de uma pequena mudança pelos amigos mais experts no assunto.
Sei que parece um abuso da minha parte, mas quebra este galho para mim, ok?
Detalhes:
1) Eu tenho uma enorme lista de links que transcendem a página que estou;
2) Cada link aponta para uma foto;
3) Quando eu passo o cursor por cima de um dos links, a imagem é mostrada na posição do cursor;
4) Só falta ela ser mostrada numa posição fixa, digamos no topo da tela à direita.
Muito grato.
<!--- Bubblepic - Inicio --->
xOffset = 0; // pos horiz par rapport au curseur
yOffset = 100; // pos vertical par rapport au curseur
dirDefo = "";
function bubblepicchange(tab_im, tab_leg) {
numim = parseInt($("#bubblepic").attr("currimgnum"));
var img = new Image();
$(img).load(function () {
if(tab_leg.length>1) {
var c = (tab_leg[numim] != "") ? tab_leg[numim] + "<br/>" : "";
$("#bubblepic SPAN").html( c + "<img src='"+ dirDefo+tab_im[numim] +"' alt=''/>" );
}
else
$("#bubblepic IMG").attr( 'src', dirDefo+tab_im[numim] );
$("#bubblepic").children('EM').height( $("#bubblepic").children('SPAN').innerHeight() )
.width( $("#bubblepic").children('SPAN').innerWidth() );
numim = ( (numim+1)<tab_im.length ) ? numim+1 : 0 ;
$("#bubblepic").attr( "currimgnum", numim );
if( $("#bubblepic").attr('timer')!='' )
clearTimeout( $("#bubblepic").attr('timer') );
$("#bubblepic").attr('timer',
setTimeout(function(){
bubblepicchange(tab_im, tab_leg);
},1300)
);
})
.attr( 'src', dirDefo+tab_im[numim] );
}
$(document).ready(function(){
$("a.bubblepic").each(function() {
$(this).attr('t',this.title);
this.title ='';
})
.hover(function(e){
if( $(this).attr('t').indexOf('§') > -1 )
var tab_leg = $(this).attr('t').split('§');
else var tab_leg = new Array( $(this).attr('t') );
var c = (tab_leg[0] != "") ? tab_leg[0]+"<br/>" : "";
var tab_im = this.rel.split('§');
$("body").append("<p id='bubblepic'><em></em><span>"+c+"<img src='../images/chargement.gif' alt=''/></span></p>");
$("#bubblepic")
.css("top",(e.pageY - xOffset) + "px")
.css("left","200px")
.fadeIn("fast")
.attr("currimgnum",0);
$("#bubblepic").children('EM').height( $("#bubblepic").children('SPAN').innerHeight() )
.width( $("#bubblepic").children('SPAN').innerWidth() );
var img = new Image();
$(img).load(function () {
bubblepicchange(tab_im, tab_leg);
})
.attr( 'src', dirDefo+tab_im[0] );
},
function(){
if( $("#bubblepic").attr('timer')!='' )
clearTimeout( $("#bubblepic").attr('timer') );
$("#bubblepic").remove();
})
.mousemove(function(e){
$("#bubblepic")
.css("top",(e.pageY - xOffset) + "px")
.css("left","200px");
});
/*
.each( function() {
tab = $(this).attr('rel').split('§');
$.preloadImages( dirDefo+tab[0] ); // on précharge que les 1ères images tab[0] sinon trop lourd!
}); */
$.preloadImages( '../images/chargement.gif' );
});
<!--- Bubblepic - Fim --->
