[AJUDA] texto e imagem

henriqueES · November 28, 2011

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?

fiote · November 28, 2011

Primeiro, aprenda sobre os eventos onMouseOver e ouMouseOut.

Depois é só mudar o src da imagem.

document.getElementById('id_da_imagem').src = 'novo/endereco/da/imagem.gif';

henriqueES · November 28, 2011

isso sera em javascript ou CSS?

fiote · November 28, 2011

Javascript.

henriqueES · November 28, 2011

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>

Andre_Luiz · November 29, 2011

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.

Sign In

[AJUDA] texto e imagem

Question

henriqueES

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

fiote

Link to comment

Share on other sites

henriqueES

Link to comment

Share on other sites

fiote

Link to comment

Share on other sites

henriqueES

Link to comment

Share on other sites

Andre_Luiz

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity