Ayuda con Javascript- texto-imagen

jdel · #1 (**permalink**) 17/09/2005, 18:21

Estimados amigos!
Necesitaría ayuda sobre como puedo hacer que al apoyar (sin hacer cilc) sobre un texto, aparezca una imagen en un lugar determinado (o no, si no se puede).

Desde ya, muchas gracias!!

seoista · #2 (**permalink**) 18/09/2005, 01:25

Hola jdel, ¡bienvenido a la comunidad de Foros del Web!

Creo que esto te servirá:

Código:

<html>
<head>

<title></title>

<script language="JavaScript">
		function muestra_capa(capa){
			document.getElementById(capa).style.visibility = 'visible';
		}
		function oculta_capa(capa){
			document.getElementById(capa).style.visibility = 'hidden';
		}
</script>

</head>

<body>

<div style="top:100; left:100; position: absolute; height: 100; width: 100; visibility: hidden" id="capa">
<img src="imagen.jpg">
</div>

<a href="#" onmouseover="muestra_capa('capa')" onmouseout="oculta_capa('capa')">Ver imagen</a>

</body>
</html>

Saludos

jdel · #3 (**permalink**) 18/09/2005, 08:18

Muchas gracias por el codigo, me va a servir mucho.
Lo que a mi me gustaria, que lo ví en un sitio, es que haya una serie de nombres por ejemplo:

aaaaaaaa
bbbbbbbb
cccccccc
dddddddd
eeeeeeee

y al apoyar sobre cada uno de ellos se cambie una imagen, siempre en el mismo lugar.
No sé si fuí claro, igual agradezco la ayuda.

JavierB · #4 (**permalink**) 18/09/2005, 08:50

Hola jdel

¿Te refieres a esto...?

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
function imagen(dibu) { 
  document.getElementById('im').src = dibu; 
} 
</script> 
</head> 
<body> 
<span onmouseover = "imagen('imagen2.jpg')" onmouseout = "imagen('imagen1.jpg')"> 
aaaaaaaaa</span> 
<img id="im" src="imagen1.jpg" /> 
</body> 
</html>

Saludos,

seoista · #5 (**permalink**) 18/09/2005, 10:54

Hola otra vez jdel

Es el mismo de antes, pero modificado para más link's:

Código:

<html>
<head>

<title></title>

<script language="JavaScript">
		function muestra_capa(capa){
			document.getElementById(capa).style.visibility = 'visible';
		}
		function oculta_capa(capa){
			document.getElementById(capa).style.visibility = 'hidden';
		}
</script>

</head>

<body>

<div style="top:20; left:100; position: absolute; height: 100; width: 100; visibility: hidden" id="capa1">
<img src="imagen1.gif">
</div>
<div style="top:20; left:100; position: absolute; height: 100; width: 100; visibility: hidden" id="capa2">
<img src="imagen2.gif">
</div>
<div style="top:20; left:100; position: absolute; height: 100; width: 100; visibility: hidden" id="capa3">
<img src="imagen3.gif">
</div>
.... ETC. ETC.

<a href="#" onmouseover="muestra_capa('capa1')" onmouseout="oculta_capa('capa1')">Link 1</a><br>
<a href="#" onmouseover="muestra_capa('capa2')" onmouseout="oculta_capa('capa2')">Link 2</a><br>
<a href="#" onmouseover="muestra_capa('capa3')" onmouseout="oculta_capa('capa3')">Link 3</a>
.... ETC. ETC.

</body>
</html>

Espero que te sirva de ayuda.

Saludos

jdel · #6 (**permalink**) 18/09/2005, 16:54

Es justo lo que queria
Saludos