Ir para conteúdo
Fórum Script Brasil
  • 0

Como fixar uma imagem numa coordenada da tela?


Rhaone

Pergunta

Como fixar uma imagem numa coordenada da tela?

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

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...