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