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

#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

#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

#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

#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

#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