JavaScript - Cambiar imagenes

Pos: 367

Val: 6

Cambiar imagenes

Publicado por Carlos (13 intervenciones) el 30/09/2015 22:24:51

Estoy realizando una pagina y con unas imagenes como menú, he logrado que cambien de apariencia con la sentencia MouseOver y MouseOut, las imágenes están en una tabla:

En la primera columna están las imágenes que he logrado ir cambiando cuando hago MouseOver y MouseOut, sobre ellas, pero adicionalmente deseo que la imagen que está en la columna siguiente, tambien cambie cuando
se cambian las del menu.

Por ejemplo, si paso el mouse sobre la primera imagen, que cambie esta y ademas la que está en la columna de al lado y eso repetirlo en las dos imagenes de menu restantes.

Es posible hacer es y si es posible, alguien me puede decir como hacerlo, estoy entrampado en eso.

Muchas gracias

Envio las imagenes y el codigo

prueba.zip(92,6 KB)

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Cambiar imagenes

Publicado por xve (2100 intervenciones) el 01/10/2015 08:08:25

Hola Carlos, la manera mas sencilla, es utilizando jquery... cuando se pase por encima del elemento que desees, cambias la imagen del otro elemento.

De todas maneras, he revisado tu código, y esta linea:

<td width="444" valign="top" bgcolor="#FFFFFF"><a href="" target="_self" onMouseOver="image1.src='imagenes/serv_prev.jpg';" onMouseOut="image1.src='imagenes/serv_prevb.jpg';"><img src="imagenes/serv_prevb.jpg" name="image1" width="444" height="129" border="0" id="image1" alt="" ></a></td>

Podría quedar así:

<td valign="top" id="image1" ></td>

Añadiendo estos estilos:

<style>

#image1 {background:url(serv_prevb.jpg) no-repeat; width:444px;height:129px;}

#image1:hover {background:url(serv_prev.jpg);}

</style>

Si lo deseas, comentame, y te preparo un ejemplo con jquery...

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 367

Val: 6

Cambiar imagenes

Publicado por Carlos (13 intervenciones) el 02/10/2015 01:14:38

Hola XVE, probé el codigo que me sugeriste y no funciona, lo verifiqué y no muestra la imagen.

ahora bien, si bien es cierto con javascript funciona eso del mouseover y mouseout, lo que quiero es que cuando paso el mouse sobre la imagen de cambia de apariencia, cambie tambien la imagen que está en la columna contigua a la derecha.

Por ejemplo, cuando paso el mouse sobre la primera imagen y cambia dec color, que la imagene en comor anaranajdo (grande) que está en la columna a la derecha cambie tambien de apariecia.

En la segunda imagene cuando hago pasar el mouse sobre esta, que ademas de cambiar la imagen, produzca un cambio en la imagen en la columna a la derecha de esta, en este caso es una imagen de color verde claro con una flecha.

Es posible hacer esto, ja sea con javascript o jquery, te lo agradecería.

Gracias

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Cambiar imagenes

Publicado por xve (2100 intervenciones) el 02/10/2015 18:04:41

Hola Carlos, aqui tienes el código modificado.

Hace el rellover, y cambia la imagen de la derecha. Unicamente lo he realizado con el primero de ellos...

<!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></title>

	<link rel="stylesheet" type="text/css" href="css/gsastilo.css" />

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>

<script>

	image1 = new Image();

	image1.src = "serv_prev.jpg";

	image2 = new Image();

	image2.src = "serv_med.jpg";

	image3 = new Image();

	image3.src = "serv_ges.jpg";

	$(document).ready(function(){

		$("#image1").mouseover(function(){

			$("#xxx").attr("src","serv_prev.jpg");

		}).mouseout(function(){

			$("#xxx").attr("src","prevencion3.png");

})

})

</script>

<style>

	#image1 {background:url(serv_prevb.jpg) no-repeat; width:444px;height:129px;}

	#image1:hover {background:url(serv_prev.jpg);}

	#image2 {background:url(serv_medb.jpg) no-repeat; width:444px;height:129px;}

	#image2:hover {background:url(serv_med.jpg);}

	#image3 {background:url(serv_gesb.jpg) no-repeat; width:444px;height:129px;}

	#image3:hover {background:url(serv_ges.jpg);}

</style>

</head>

<body>

<table width="913" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td valign="top" id="image1" ></td>

    <td width="469" rowspan="5" valign="top" bgcolor="#FFFFFF"><img src="prevencion3.png" width="470" height="410" alt="" id='xxx' /></td>

  </tr>

  <tr>

    <td height="11" bgcolor="#FFFFFF"></td>

  </tr>

  <tr>

    <td valign="top" id="image2"></td>

  </tr>

  <tr>

    <td height="12" bgcolor="#FFFFFF"></td>

  </tr>

  <tr>

    <td valign="top" id="image3"></td>

  </tr>

</table>

</body>

</html>

Coméntanos, ok?

Valora esta respuesta

Comentar

Pos: 367

Val: 6

Cambiar imagenes

Publicado por Carlos (13 intervenciones) el 03/10/2015 20:10:36

Hola XVE, te agradezco tu ayuda, el codigo que me enviaste funciona bien, salvo un detalle.

Te explico, las imagenes estan en una tabla de 5 por 2, en la primera columna y primera fila, hay una imagen que se llama serv_prevb.jpg, en la tercera fila está la imagen serv_medb.jpg y en la quinta fila está la imagene serv_gesb.jpg.

Dejo una fila entre ellas para darle separación.

Usando el codigo que tu me enviaste, efectivamente al realizar el mouseOver la imagen cambia en el primer caso por serv_prev.jpg, en la segunda al hacer lo mismo cambia a serv_med.jpg y en la última camabia a serv_ges.jpg cuando se hace el mouseOver.

Ahora bien, en la segunda columna, es del alto de las 5 filas, en donde va una imagen grande que llena esa celda en su totalidad, lo que he probado es que cuando hago un moseover sobre la primera imagene de la primera columna, cambie la imagen en la segunda columna sin que debe desplazarse hacia la derecha como ocurre, del mismo modo cuando se produce el efecto en la segunda imagen de la primera columna cambie a otra imagen.

Para que te des una idea, al hacer mosueover sobre la primera imagen de la primer columna, en la segunda columna debe aparecer (junto con el fecto) la imagene prevencion3.jpg, al hacer mouseover en la segunda imagen del a primera columna, debe aparecer simultaneamente la imagen ambiente3.jpg y finalmente con la ultima imagen de la primera columna debera aparecer la imagen gestion3.jpg.

He tratado de hacerlo, pero la muestra solo si me desplazo a la derecha, despues de hacer mouseover en la primera, y quiero que hacer esa accion se muestre de forma simultanea.

Una vez mas te agradezco tus ayuda y tiempo.

Gracias

prueba1.zip(909,0 B)

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Cambiar imagenes

Publicado por xve (2100 intervenciones) el 04/10/2015 08:55:16

Hola Carlos, aquí, defines las imagenes que apareceran en la derecha cuando pases por encima de la primera imagen:

$("#image1").mouseover(function(){
$("#xxx").attr("src","serv_prev.jpg");
}).mouseout(function(){
$("#xxx").attr("src","prevencion3.png");
})

Pon la imagen que desees que aparezca...

No he entendido muy bien donde esta la problemática...

Valora esta respuesta

Comentar

Pos: 367

Val: 6

Cambiar imagenes

Publicado por Carlos (13 intervenciones) el 05/10/2015 02:29:31

Hola XVE, gracias por tu tiempo, tal vez no me he explicado bien, si bien es cierto el codigo que me has enviado funciona, pero no del todo como quisiera.

A ver si te explico mejor, tengo las imagenes de la primera columan a la izquierda, cuando hago el mouseover sobre la primera imagen (fila 1) hace el cambio con el codigo que me enviaste, pero simultaneamente debiera cambiar la imagen que está a la derecha de esta, vale decir con la primera imagen, debe aparecer la imagen con un numero 1 a la derecha; al hacer el mouseoven en la segunda imagen de la primera columna, debe aparecer una imagen a la derecha de esta con un numero 2 y lo mismo con la ultima en que debe aparecer una imagen con un numero 3.

Cambié el id de la segunda imagen por xxx1, ya que al ser xxx, muestra la misma imagen de la primera columna.

De donde eres??

Gracias una vez mas

prueba1.zip(107,7 KB)

Valora esta respuesta

Comentar

como poner eSpeaker en español

AYUDA: Problema verificando checkbox