Jump to content
Fórum Script Brasil
  • 0

Texto Explicativo Em Link

rlaurenti

Asked by rlaurenti,

 Share

Question

rlaurenti

rlaurenti

Posted
Posted

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 to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Illidan

Illidan

Posted
Posted

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 to comment
Share on other sites
  • 0
rlaurenti

rlaurenti

Posted
  • Author
Posted (edited)

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>

Edited by Crystian
Link to comment
Share on other sites
  • 0
Illidan

Illidan

Posted
Posted

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 to comment
Share on other sites
  • 0
rlaurenti

rlaurenti

Posted
  • Author
Posted

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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing


  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...