1. TugaTech » Programação, Scripts e Webmasters » Programação, Scripts e Webmasters

Siga-nos

Realize o Login na sua conta ou Registe-se para participar.

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

#1 [Dúvida]Detalhes imagens - em Qui 7 Abr 2011 - 23:02

MoisesPT

Designer
avatar
Esta pergunta é mais para o DJPRMF, pois a dúvida que tenho é sobre algo que está aqui no fórum:

No lado direito do logotipo do fórum, "Tuga Tech" , estão uns icones(Adicionar aos favoritos, pagina inicial,blog,RSS,etc...)

Quando se passa o cursor em qualquer um dos icones aparece um detalhe da image, num rectângulo cinzento, será que me podem dar uma ajudinha, de como fazer algo assim em websites?


Wink

Ver perfil do usuário http://vmoisesp.pt https://www.facebook.com/vmoisesp mhyper_mhyst
conectado

#2 Re: [Dúvida]Detalhes imagens - em Qui 7 Abr 2011 - 23:40

DJPRMF

Administrador
avatar
Boas,
para esse efeito utilizei códigos jquery de tooltips.

Veja alguns aqui:
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

Alguma duvida basta dizer escrever Very Happy
Cumps


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

#3 Re: [Dúvida]Detalhes imagens - em Sex 8 Abr 2011 - 0:16

MoisesPT

Designer
avatar
Também é necessário jQuery?

Ver perfil do usuário http://vmoisesp.pt https://www.facebook.com/vmoisesp mhyper_mhyst
conectado

#4 Re: [Dúvida]Detalhes imagens - em Sex 8 Abr 2011 - 0:51

DJPRMF

Administrador
avatar
@MoisesPT escreveu:Também é necessário jQuery?

Sim deve adicionar o script jquery.. .Smile


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

#5 Re: [Dúvida]Detalhes imagens - em Sex 8 Abr 2011 - 1:05

MoisesPT

Designer
avatar
Quer voltar a ajudar-me, mas desta vez na configuração de tooltips? Razz

Ver perfil do usuário http://vmoisesp.pt https://www.facebook.com/vmoisesp mhyper_mhyst
conectado

#6 Re: [Dúvida]Detalhes imagens - em Sex 8 Abr 2011 - 11:23

DJPRMF

Administrador
avatar
@MoisesPT escreveu:Quer voltar a ajudar-me, mas desta vez na configuração de tooltips? Razz

Claro.. Very Happy
No que necessita de ajuda mais especificamente?

Cumps


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

#7 Re: [Dúvida]Detalhes imagens - em Sex 8 Abr 2011 - 13:17

MoisesPT

Designer
avatar
Queria que me ajudasse, nunca consigo emplementar bem os códigos jQuery..Esta é a tool tip

http://www.queness.com/post/92/create-a-simple-cssjavascript-tooltip-with-jquery

Ver perfil do usuário http://vmoisesp.pt https://www.facebook.com/vmoisesp mhyper_mhyst
conectado

#8 Re: [Dúvida]Detalhes imagens - em Sex 8 Abr 2011 - 14:10

DJPRMF

Administrador
avatar
Vamos por partes então:
Adicionou o javascript e o css na head do seu documento HTML?

Código:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
 
    //Select all anchor tag with rel set to tooltip
    $('a[rel=tooltip]').mouseover(function(e) {
       
        //Grab the title attribute's value and assign it to a variable
        var tip = $(this).attr('title');   
       
        //Remove the title attribute's to avoid the native tooltip from the browser
        $(this).attr('title','');
       
        //Append the tooltip template and its value
        $(this).append('<div id="tooltip"><div class="tipHeader"></div><div class="tipBody">' + tip + '</div><div class="tipFooter"></div></div>');   
       
        //Set the X and Y axis of the tooltip
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
       
        //Show the tooltip with faceIn effect
        $('#tooltip').fadeIn('500');
        $('#tooltip').fadeTo('10',0.8);
       
    }).mousemove(function(e) {
   
        //Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
        $('#tooltip').css('top', e.pageY + 10 );
        $('#tooltip').css('left', e.pageX + 20 );
       
    }).mouseout(function() {
   
        //Put back the title attribute's value
        $(this).attr('title',$('.tipBody').html());
   
        //Remove the appended tooltip template
        $(this).children('div#tooltip').remove();
       
    });
 
});
 
</script>
 
<style>
body {font-family:arial;font-size:12px;text-align:center;}
div#paragraph {width:300px;margin:0 auto;text-align:left}
a {color:#aaa;text-decoration:none;cursor:pointer;cursor:hand}
a:hover {color:#000;text-decoration:none;}
 
/* Tooltip */
 
#tooltip {
    position:absolute;
    z-index:9999;
    color:#fff;
    font-size:10px;
    width:180px;
   
}
 
#tooltip .tipHeader {
    height:8px;
    background:url(images/tipHeader.gif) no-repeat;
}
 
/* IE hack */
*html #tooltip .tipHeader {margin-bottom:-6px;}
 
#tooltip .tipBody {
    background-color:#000;
    padding:5px;
}
 
#tooltip .tipFooter {
    height:8px;
    background:url(images/tipFooter.gif) no-repeat;
}
 
</style>

Cumps


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

#9 Re: [Dúvida]Detalhes imagens - em Sex 8 Abr 2011 - 15:28

MoisesPT

Designer
avatar
Nao ainda nao inseri os codigo da css e da actionscript, estou no telemovel...Sera que pode fazer o tutorial? e assim quando chegar a casa faco-o.. Wink

Ver perfil do usuário http://vmoisesp.pt https://www.facebook.com/vmoisesp mhyper_mhyst
conectado

#10 Re: [Dúvida]Detalhes imagens - em Sex 8 Abr 2011 - 15:50

DJPRMF

Administrador
avatar
Nem é necessário um tutorial muito complicado...
A própria explicação está no site do script... Veja na secção "Final Product". Basta depois editar conforme o seu site.. Wink

lembre-se que deve fazer o download do script e fazer o uplaod do mesmo para o seu servidor.. .Wink

Cumps


____________________________________________




Não respondo a MP's de tópicos que podem ser colocados no forum. Ajude e seja ajudado por todos.
TugaTech | Host TugaTech
Ver perfil do usuário http://tugatech.com.pt https://www.facebook.com/DJPRMF https://twitter.com/dj_prmf DJPRMF https://plus.google.com/+PedroFernandes-DJPRMF?rel=author

#11 Re: [Dúvida]Detalhes imagens - em Sex 8 Abr 2011 - 19:14

MoisesPT

Designer
avatar
Obrigado Smile




Wink

Ver perfil do usuário http://vmoisesp.pt https://www.facebook.com/vmoisesp mhyper_mhyst

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum




Aplicações do TugaTechAplicações TugaTechBlog TugaTechBlog do TugaTechRSS TugaTechRSS do TugaTechSpeedtest TugaTechSpeedtest TugatechHost TugaTechHost TugaTech