Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » 3 imagenes que cambian a una cuarta con mouseover

JavaScript - 3 imagenes que cambian a una cuarta con mouseover

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

3 imagenes que cambian a una cuarta con mouseover

Publicado por Aldo (3 intervenciones) el 19/11/2013 20:58:55
Hola amigos del foro, estoy armando un index donde hay 3 imágenes (1 x cada idioma que tendrá la pagina) las cuales quiero que al pasar el mouse cambien una cuarta que contiene información en el idioma de la imagen por la que se esta pasando el mouse, pero no logro hacerlo
ej:

img1
img2
img3

al pasar el mouse por alguna de estas 3 imágenes me gustaría que cambiara la imagen 4 por img1a, img2a, img3a

espero haberme podido explicar bien
muchas gracias
saludos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Jose maria
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

3 imagenes que cambian a una cuarta con mouseover

Publicado por Jose maria (9 intervenciones) el 21/11/2013 17:13:05
Hola Aldo:

¿Sería algo parecido a la cabecera de esta página?

1
2
3
<div class="imagen">
        <img src="img1.png" alt="Forma de ver" style="width:100%;"  onmouseover="this.src='img1a.png';" onmouseout="this.src='img1.png';"/>
	  </div>
Me explico:
- Pones tu image img1;
- Al poner el mouse sobre ella, cambia a img1a;
- Al salir del campo el mouse, vuelve a img1.

Asi con las tres imágenes.

Nos cuentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

3 imagenes que cambian a una cuarta con mouseover

Publicado por xve (2100 intervenciones) el 21/11/2013 17:28:07
Hola Aldo, yo lo haría con un hover... y todo desde estilos... haber que te parece... ten en cuenta, que no dispongo de las imágenes, por lo que he puesto un borde para visualizarlo... en el momento que pongas las imágenes debería de funcionar-te.
De esta manera no utilizas javascript... si deseas hacerlo con el tag <img> y con javascript, comentalo que te preparo un ejemplo, ok?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="es">
<head>
    <style>
        .img {
            width:60px;height:10px;
            float:left;
            border:1px solid;
        }
        .img1 {
            background:url("img1.png");
        }
        .img2 {
            background:url("img2.png");
        }
        .img3 {
            background:url("img3.png");
        }
 
        .img1:hover {
            background:url("img1a.png");
        }
        .img2:hover {
            background:url("img2a.png");
        }
        .img3:hover {
            background:url("img3a.png");
        }
    </style>
    <script>
    </script>
</head>
 
<body>
    <div class='img img1'></div>
    <div class='img img2'></div>
    <div class='img img3'></div>
</body>
</html>

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

3 imagenes que cambian a una cuarta con mouseover

Publicado por Aldo (3 intervenciones) el 21/11/2013 18:28:16
Hola, antes que nada muchas gracias por las respuestas, pero no me supe explicar, les paso la pagina demo para que la puedan ver http://dezanet.com.ar/demo-mb/index.html en esta verán que tengo para seleccionar 3 idiomas (español, portugués e ingles) al pasar sobre la imagen de las banderas (images/index_09.jpg, images/index_11.jpg e images/index_13.jpg) debería cambiar la imagen images/index_07esp.jpg por images/index_07por.jpg o images/index_07eng.jpg que es justo la que se encuentra encima de las bandera.
Si ven el código fuente, en la línea 29 se encuentra la imagen que cambia.
están las imágenes subidas en la carpeta images/ por si quieren probar
muchas gracias
saludos
Aldo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jose maria
Val: 71
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

3 imagenes que cambian a una cuarta con mouseover

Publicado por Jose maria (9 intervenciones) el 21/11/2013 19:55:44
Independientemente con lo que pueda aportarte xve, (que sabe muchííísimo mas que la mayoría de los mortales) te transcribo mi código anterior y lo comento:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<TR>
		<TD COLSPAN=7>
			<IMG id="idioma" SRC="images/index_07esp.jpg" WIDTH=437 HEIGHT=130 ALT="idioma"></TD>
	</TR>
	<TR>
		<TD COLSPAN=2 ROWSPAN=2>
			&nbsp;</TD>
		<TD> <!-- España -->
			<IMG SRC="images/index_09.jpg" WIDTH=51 HEIGHT=37 ALT="Español" onmouseover="document.getElementById('idioma').src = 'images/index_07esp.jpg';" onmouseout="document.getElementById('idioma').src = 'images/index_07esp.jpg';"></TD>
		<TD ROWSPAN=2>
			&nbsp;</TD>
		<TD> <!-- Brasil -->
			<IMG SRC="images/index_11.jpg" WIDTH=50 HEIGHT=37 ALT="Brasilero" onmouseover="document.getElementById('idioma').src = 'images/index_07por.jpg';" onmouseout="document.getElementById('idioma').src = 'images/index_07esp.jpg';"></TD>
		<TD ROWSPAN=2>
			&nbsp;</TD>
		<TD> <!-- Inglaterra -->
			<IMG SRC="images/index_13.jpg" WIDTH=55 HEIGHT=37 ALT="Inglés" onmouseover="document.getElementById('idioma').src = 'images/index_07eng.jpg';" onmouseout="document.getElementById('idioma').src = 'images/index_07esp.jpg';"></TD>
		<TD COLSPAN=2 ROWSPAN=2>
			&nbsp;</TD>
	</TR>

Advirtiéndote que aunque técnicamente es incorrecto, le he asignado un id a la imagen. Fuera de tablas (que las eliminé de mi memoria y práctica) tendría otras opciones.

Después, repìto mi código anterior con la variable de javascript onmouseover="document.getElementById('idioma').src = 'images/index_07eng.jpg';" (cambio el src del id="imagen")
Y cuando salgo (onmouseout) devuelvo la imagen anterior.

Para tus propósitos, personalmente olvidaría los onmouseout.

NOTA: Este código está probado y puedo mostrarte sobre rutas absolutas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

3 imagenes que cambian a una cuarta con mouseover

Publicado por LM (4 intervenciones) el 11/04/2014 09:58:05
Hola,
estoy intentando hacer algo similar, solo que yo quiero que la imagen que se abre al poner encima el raton quede superpuesta a la original ya q es un mapa. Os dejo mi código porque no se usar los comportamientos :S
Muchas gracias

<html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>mapa 1</title>
<script type="text/javascript">
//-->
</script>
</head>

<body>
<div align="center"><img src="mapa-1.jpg" width="1200" height="1074" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="376,580,470,660" href="#" onMouseOver='this.src="popup-1.jpg"' onMouseout= "desaparece la imagen popup-1.jpg que se abrió con nomouseover" >
</map>
</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

3 imagenes que cambian a una cuarta con mouseover

Publicado por Aldo (3 intervenciones) el 21/11/2013 22:06:29
Genios, quedo perfecto, le hice caso a José María y quite onmouseout ya que no era necesario y le agregue el vinculo a la bandera de España para linkear a la pagina de muestra.
Muchísimas gracias hacia una semana que me había trabado con el código.
Saludos
Aldo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar