HTML - Ayuda con onmouseover

   
Vista:

Ayuda con onmouseover

Publicado por David (1 intervención) el 25/05/2015 21:52:56
Hola,

a ver si alguien puede ayudarme...

Tengo que hacer que al pasar el raton por encima de un div, la imagen que incluye el div haga un efecto de zoom. El problema es que todas las imagenes de la página tienen la id "producto", o sea que tendría que decirle de alguna manera que el onmouseover sólo afecte a la imagen que contiene ese div.

Además, no puedo utilizar clases.

He probado lo siguiente, pero no funciona:


---------

<div onmouseover="this.getElementById('producto').style.transform='scale(1.5)'; this.getElementById('producto').style.transition='0.2s ease-in'; "

onmouseout="this.getElementById('producto').style.transform='scale(1)'; this.getElementById('producto').style.transition='0.2s ease-out'; " >

---------


Si alguien me puede ayudar estaré muy agradecido.

Gracias.
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 elgato

Ayuda con onmouseover

Publicado por elgato (6 intervenciones) el 25/05/2015 22:13:03
seria como algo asi, reeplazas "picture.jpg" por la foto que quieras, tambien editas las dimensiones de acuerdo a lo que necesites.
espero te sirva, saludos

www.elgatocoder.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<body>
 
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="01.jpg" alt="zoom" width="120" height="120">
 
 
 
<script>
function bigImg(x) {
    x.style.height = "300px";
    x.style.width = "300px";
}
 
function normalImg(x) {
    x.style.height = "120px";
    x.style.width = "120px";
}
</script>
 
</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