Foros del Web » Creando para Internet » HTML »

Cambiar imagen dinamicamente al hacer click en un texto

Estas en el tema de Cambiar imagen dinamicamente al hacer click en un texto en el foro de HTML en Foros del Web. Buenas, llevo buscando un buen rato y no lo veo por ningun lado... La idea que tengo es tener un listado a la izquierda de ...
  #1 (permalink)  
Antiguo 27/09/2010, 05:05
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Cambiar imagen dinamicamente al hacer click en un texto

Buenas,

llevo buscando un buen rato y no lo veo por ningun lado...

La idea que tengo es tener un listado a la izquierda de nombres, y a la derecha una imagen que cambie al hacer click en cada nombre... No se si se puede hacer con HTML o habra que hacerlo con javascript.. ando pelin perdido.

Si me ayudaseis os lo agradeceria!!

Un saludo
  #2 (permalink)  
Antiguo 27/09/2010, 05:58
(Desactivado)
 
Fecha de Ingreso: julio-2009
Mensajes: 135
Antigüedad: 8 años, 5 meses
Puntos: 1
Respuesta: Cambiar imagen dinamicamente al hacer click en un texto

Prueba con el css puede funcionar en el caso que comentas
  #3 (permalink)  
Antiguo 27/09/2010, 06:33
 
Fecha de Ingreso: junio-2010
Mensajes: 9
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Cambiar imagen dinamicamente al hacer click en un texto

mmmm he estado mirando y creo que se puede hacer con javascript. Si lo consigo pego el codigo por si lo necesita alguien mas
  #4 (permalink)  
Antiguo 27/09/2010, 06:36
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Cambiar imagen dinamicamente al hacer click en un texto

Edubur:
Con javaScript y css podés hacerlo de la siguiente manera


Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
  4. <title>Imagen aleatoria</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="description" content="x" />
  7. <meta name="keywords" content="x" />
  8. <meta http-equiv="Content-Language" content="ES-ar" />
  9. <meta http-equiv="Content-Style-Type" content="text/css" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <meta http-equiv="imagetoolbar" content="no" />
  12. <meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" />
  13. <meta name="author" content="http://emprear.com"  xml:lang="es" />
  14. <style type="text/css">
  15. /*<![CDATA[*/
  16.  
  17. div#izquierda{
  18. position:relative;
  19. float: left;
  20. margin-right: 30px;
  21. }
  22. div#derecha{
  23. position:relative;
  24. float: left;
  25. }
  26.  
  27. img#ia{
  28. border: solid 1px #000;
  29. }
  30.  
  31. /*]]>*/
  32. <script type="text/javascript">
  33. //<![CDATA[
  34.  
  35. function cambiar2(img){
  36. document.getElementById("ia").src = img;
  37. }
  38. //]]>
  39. </head>
  40. <div id="izquierda">
  41. <p><a href="#" onclick="cambiar2('1.jpg');">Cambiar imagen 1</a></p>
  42. <p><a href="#" onclick="cambiar2('2.jpg');">Cambiar imagen 2</a></p>
  43. <p><a href="#" onclick="cambiar2('3.jpg');">Cambiar imagen 3</a></p>
  44. </div>
  45. <div id="derecha"><img id="ia" alt="Imagen aleatoria" src="5.jpg" width="300" height="300" /></div>
  46. <!-- ©2000 Emprear.com -->
  47. </body>
  48. </html>


Observaciones, lo ideal sería que tus imágenes tengan todas el mismo tamaño (si no es asi, no deberías fijar el height y el width en la imagen original) y la imágen que cargas por defecto puede ser una imagen en blanco o un gif transparente. Para mejorar aún el intercambio, si las imágenes no són demasiadas puedes agregar esta script con lo cual las imágenes que aún no han aparecido se carguen igualmente al cargar la página

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. //<![CDATA[
  3. function preCargar() {
  4. if (!document.images) return;
  5. var ar = new Array();
  6. var arguments = preload.arguments;
  7. for (var i = 0; i < arguments.length; i++) {
  8. ar[i] = new Image();
  9. ar[i].src = arguments[i];
  10. }
  11. }
  12. //]]>
  13. </script>

y en el body

<body onload="preCargar('1.jpg', '2.jpg', '3.jpg')">


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 27/09/2010 a las 11:53 Razón: onload x onLoad
  #5 (permalink)  
Antiguo 29/09/2010, 06:30
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Cambiar imagen dinamicamente al hacer click en un texto

Hola:

Échale un vistazo a este ejemplo de Mikmoro hecho totalmente con CSS. Si posicionas el cursor en el texto verás que cambia el color de la línea del título y la imagen de la derecha.

Saludos.


Etiquetas: dinamicamente
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 02:33.