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

Texto Explicativo Em Link

rlaurenti

Perguntado por rlaurenti,

 Share

Pergunta

rlaurenti

rlaurenti

Postado
Postado

Preciso de uma ajudinha, preciso colocar textos explicativos em um link de imagem, mas o simples <alt> não resolve o problema, segue abaixo um link de uma página que têm esse tipo de texto gostaria de saber se algu´m sabe como funciona isso e como configurá-lo à minha maneira..

Desde já muito obrigado.

http://pulsounico.undonet.com/curiosidades.htm

Link para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
Illidan

Illidan

Postado
Postado

Aqui tem um excelente exemplo de tooltip postado pelo Crystian: http://scriptbrasil.com.br/forum/index.php?showtopic=38346

E aqui tem um que eu criei somente com CSS: http://scriptbrasil.com.br/forum/index.php...=75#entry204935

É só adaptar pra ficar parecido com o desse site que você citou. Qualquer dúvida, posta aí...

Falou!

Link para o comentário
Compartilhar em outros sites
  • 0
rlaurenti

rlaurenti

Postado
  • Autor
Postado (editado)

Não está funcionando....

segue abaixo todo o html da página em questão de repente o idiota aqui não está sabendo fazer direito...

Obrigado

OBS: só alguns detalhes...

- o link será uma img

- o link abrirá um javascript (popup)

- pelamordedeus me dêm uma força !!!

ph34r.gif

<html>

<head>
<title>Nova pagina 4</title>
<base target="_self">
<script>
function abrir(url,tamx,tamy) 
{ 
window.open(url,"POPUP","resizable=no,toolbar=no,status=no,menubar=no,scrollbars=no, width="+tamx+",height="+tamy )
}
</SCRIPT>
<style type="text/css">

a:link    { color: #CCCCCC; text-decoration: none; }
a:visited { color: #CCCCCC; text-decoration: none; }
a:hover   { color: #FFFFFF; text-decoration: underline; }

a  {
    position: relative;
    top: 0px;
    left: 0px;
	}

a .tooltip 
	{
    display: none;
    position: absolute;
    top: 5px;
    right: -120px;
    width: 100px;
    overflow: hidden;
    padding: 5px;
    text-align: center;
    color: #000000;
    font-size: 10 px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    filter: alpha(opacity=85);
    -khtml-opacity: .85;
    -moz-opacity: .85;
    opacity: .85; 
    font-family:Verdana; 
    font-weight:bold
}

a:hover .tooltip 
{
    display: block;
}

</style>

<body text="#CCCCCC" bgcolor="#000000">
<table border="0" cellspacing="0" style="border-collapse: collapse" width="100%" id="AutoNumber1" height="100%" cellpadding="0">
  <tr>
    <td width="100%" height="15" valign="top">
    <div align="center">
      <center>
      <table border="0" cellspacing="0" style="border-collapse: collapse" width="80%" id="AutoNumber2" bordercolorlight="#000000" bordercolor="#000000" cellpadding="3">
        <tr>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center" bgcolor="#777777">
          <a target="_self" href="index.htm">NOVAS</a></td>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center" bgcolor="#CCCCCC">
          <font color="#777777">GALERIA 01</font></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center" bgcolor="#777777">
          <a target="_self" href="gal_02.htm">GALERIA 02</a></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center" bgcolor="#777777">
          <a target="_self" href="gal_03.htm">GALERIA 03</a></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">&nbsp;</td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">&nbsp;</td>
        </tr>
        <tr>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000" bgcolor="#CCCCCC">&nbsp;</td>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000" bgcolor="#CCCCCC">&nbsp;</td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000" bgcolor="#CCCCCC">&nbsp;</td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000" bgcolor="#CCCCCC">&nbsp;</td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center" bgcolor="#CCCCCC">
          &nbsp;</td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center" bgcolor="#CCCCCC">
        </td>
        </tr>
        <tr>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
       <a href="javascript:abrir('01/001.jpg',480,300)">
       <img border="0" src="thumb/01/gal_01-r2_c2.gif" width="97" height="61"></a></td>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r2_c4.gif" width="97" height="61"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r2_c6.gif" width="97" height="61"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r2_c8.gif" width="97" height="61"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center">
          <img border="0" src="thumb/01/gal_01-r4_c2.gif" width="97" height="61"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center">
          <img border="0" src="thumb/01/gal_01-r4_c4.gif" width="97" height="61"></td>
        </tr>
        <tr>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r4_c6.gif" width="97" height="61"></td>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r4_c8.gif" width="97" height="61"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r6_c2.gif" width="97" height="60"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r6_c4.gif" width="97" height="60"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center">
          <img border="0" src="thumb/01/gal_01-r6_c6.gif" width="97" height="60"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center">
          <img border="0" src="thumb/01/gal_01-r6_c8.gif" width="97" height="60"></td>
        </tr>
        <tr>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r8_c2.gif" width="97" height="61"></td>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r8_c4.gif" width="97" height="61"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r8_c6.gif" width="97" height="61"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <img border="0" src="thumb/01/gal_01-r8_c8.gif" width="97" height="61"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center">
          <img border="0" src="thumb/01/gal_01-r10_c2.gif" width="98" height="61"></td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center">
          <a href="javascript:abrir('01/001.jpg',480,300)">
          Mova o mouse sobre este texto para ver a tooltip. 
          <span class="tooltip">Teste</span></a></td>
        </tr>
        <tr>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          <a href="javascript:;">Ela permanece fixa em relação ao link.
          <span class="tooltip">Descrição 2</span></a></td>
          <td width="16%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          &nbsp;</td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          &nbsp;</td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" align="center" bordercolorlight="#000000">
          &nbsp;</td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center">
          &nbsp;</td>
          <td width="17%" style="font-family: Verdana; font-size: 10 px" bordercolorlight="#000000" align="center">
          &nbsp;</td>
        </tr>
        </table>
      </center>
    </div>
    </td>
  </tr>
</table>
</body>

</html>

Editado por Crystian
Link para o comentário
Compartilhar em outros sites
  • 0
Illidan

Illidan

Postado
Postado

Pronto, pessoal... agora tá funcionando no IE, Mozilla e Opera. Mas achei muito estranho! vocês que copiaram o código antigo, reparem nas modificações que eu fiz... :/ Não entendi porque não tava funcionando no IE e Mozilla. Mas valeu pelo aviso... smile.gif

Abraços!

Link para o comentário
Compartilhar em outros sites
  • 0
rlaurenti

rlaurenti

Postado
  • Autor
Postado

Galera, agora está até funcionando, mas como sempre tem um pequeno probleminha:

o link é uma img.

são pequenos thumbs que ficam em uma tabela

uma ao lado da outra

não consegui de jeito maneira deixar que o tooltip fique por cima do link do lado..

preparei uma pagina de exemplo, bem pequena, com tres thumbs que gostaria de enviar para vocês verem o que pode ser feito.

na realidade eu até achei um jeitinho, que é colocar cada img numa z-index diferente, mas mesmo assim não deu muito certo...

se realmente não tiver jeito maneira, é só me avisar, que eu remodelo a página pra poder usar este ótimo script...

Obrigado pela atenção e desculpe por encher tanto o saco....

Link para o comentário
Compartilhar em outros sites

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.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...