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

[AJUDA] texto e imagem

henriqueES

Perguntado por henriqueES,

 Share

Pergunta

henriqueES

henriqueES

Postado
Postado

fala pessoal,

e o seguinte to com dificuldade em colocar uma tabela com uma imagem. assim:

quando passar o mouse em cima de uma palavra tera que mudar a imagem na outra tambem fazer a mesma coisa. so que não estou conseguindo fazer isso podem me ajudar?

sera assim tera uma tabela de um lado uma imagem do outro lado de umas palavras uma debaixo da outra que quando pasar em cima tera que troca a imagem será diferente imagem para todas.

como faco isso tentei por css não conseguir/javascript to com dificuldades?

Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0
henriqueES

henriqueES

Postado
  • Autor
Postado

os codigos/que eu fiz/que to fazendo

não sei se esta certo mais estou com dificuldades quem puder me dar uma ajuda.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>
<style type="text/javascript">



</style>

<body>
<table width="427" height="253" border="1">
  <tr>
    <td colspan="4" rowspan="5" align="left" valign="top"></td>
    <td width="113"><a herf="x.html" onmouseover=image='"file:///C|/Users/dsnv03/Pictures/mapa_es01.png"' onmouseout=image'"file:///C|/Users/dsnv03/Pictures/mapa_es03.png"'>texto</a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
?
Codigo 2 
<html>
<head>
<style type="text/css">
#fundo
{
    background:url(../Pictures/Divisao-Regional_Macrorregioes_sem%20numero.png);
}

#fundo2
{background:url(../Pictures/mapa_es.png);

}

.fundo3 {
    background-image: url(../Pictures/mapa_es01_com_borda_interna.png);
}

</style>
</head>
<body>
<form name=form1><h1 align=center>Selecione a Cor de fundo</h1>
<table border=1 align=center>
<tr><td align=center><select size=1>
    <option id="fundo">C</option>
    <option id="fundo2">B</option>
    <option class="fundo3">A</option>
    </select>
    </td></tr>
</table>
</form>

<script Language="JavaScript">
function Cor(){
fundo=document.form1.slcores.value
document.bgColor=fundo
}

object.style.backgroundImage="url(C:\Users\dsnv03\Pictures\mapa_es03.png)"

</script>
<table width="633" height="308" border="0" class="" id="" spry:select="">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

</body>
</html>
Codigo 3 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
</head>

<script type="text/javascript">
{
onmouseover=image="file:///C|/Users/dsnv03/Pictures/mapa_es01.png";
}
{
onmouseout=image="file:///C|/Users/dsnv03/Pictures/mapa_es03.png";
}
</style>
<body>
<table width="427" height="253" border="1">
  <tr>
    <td colspan="4" rowspan="5" align="left" valign="top"></td>
    <td width="113"><a herf="x.html" onmouseover=image='"file:///C|/Users/dsnv03/Pictures/mapa_es01.png"' onmouseout=image'"file:///C|/Users/dsnv03/Pictures/mapa_es03.png"'>texto</a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

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

Andre_Luiz

Postado
Postado

Olá!

Acho que você pode sim resolver esse problema com CSS ou com JS, ou ainda com os dois. (rss).

Solução com CSS creio eu é mais simples e leve:

#link a{ /* Todos as tags A dentro de uma div com ID "link"*/
   color: #000000;
   background-image: url(file:///C|/Users/dsnv03/Pictures/mapa_es03.png);
}

#link a:link, #link a:visited { /* Todos os links dentro de uma div com ID "link" e que já foram visitados */
   background-image: url(file:///C|/Users/dsnv03/Pictures/mapa_es03.png);
}


#link a:link { /* Todos os links dentro de uma div com ID "link" quando o mouse estiver sobre o link*/
   background-image: url(file:///C|/Users/dsnv03/Pictures/mapa_es01.png);
}
No HTML: 
<div id="link">
<a href="#">Texto</a>
</div>

mas sugiro que estude um pouco sobre CSS, já que você vai ter que verificar o tamanho do link para se encaixar na imagem e essas coisas todas.

Forte abraço.

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,3k
    • Posts
      652,5k
×
×
  • Criar Novo...