Problema con onmouseover y getElementById

[DavidWolfson]

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.

[mardojai]

Ojo, esto va en el foro de JavaScript.

Yo lo haría con Jquery, ya que las webs que hago incluyen mucho jquery no hay problema, pero algunos opinan que incluir Jquery para una sola función es mucho.

Igual te dejo un ejemplo con Jquery:

Supongamos que este es tu html:

Código HTML:

<div class="contenedor">
    <img src="imagen_aqui.jpg" />
</div>
 

Y este sera tu css:

Código CSS:

.contenedor {
    overflow: hidden;
    width: 300px;
    height: 250px;
}
 
.contenedor img {   
    width: 300px;
    height: 250px;
    transition: 0.2s ease-out;
}
 

Este seria tu Jquery:

Código Javascript:

$(document).ready(function(){
    $('.contenedor').mouseenter(function(){
        $(this).children().css("transform", "scale(1.5)");
    });
    $('.contenedor').mouseleave(function(){
        $(this).children().css("transform", "scale(1)");
    });
});
 

Un ejemplo en funcionamiento: http://jsfiddle.net/stutv0ja/4/.

Saludos!

[DavidWolfson]

Muchas gracias,

y cómo se podría hacer sin jquery?

es que creo que lo que falla en mi código es el "this" porque si lo hago con "document" funciona pero no quiero que afecte a todas las imagenes del documento, ya que todas tienen la misma id...

[AngelKrak]

basta con CSS, nomas pon este selector y elige el numero del div que quieres hacerle ZOOM ;) ahi te dejo un ejemplo:

Código Selector:

Código CSS:

#producto:nth-child(3):hover {
Aquí va tu código para el Zoom
}
 

Demo CODEPEN:
http://codepen.io/AngelKrak/pen/eNBgzV

[fede5426]

Por empezar, los identificadores son únicos, y qué es eso de que no podes usar clases? De cualquier manera si solo podes usar id's, deberías poner uno diferente para cada div.

Como dijo AngelKrak, se puede hacer solo con CSS, pero yo modificaría un poco ese código.

Código HTML:

<div class="producto">
  <img src="http://s18.postimg.org/il7hbk7i1/image.png" alt="" />
</div>
<div class="producto">
  <img src="http://s18.postimg.org/4st2fxgqh/image.png" alt="" />
</div>
<div class="producto">
  <img src="http://s18.postimg.org/sxtrxn115/image.png" alt="" />
</div>
<div class="producto">
  <img src="http://s18.postimg.org/5xn4lb37d/image.png" alt="" />
</div>
 

Código CSS:

.producto{
  display: inline-block;
  margin: 2em;
}
 
img{
  -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    -ms-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease;
}
 
.producto:hover > img{
    -webkit-transform:scale(1.25); 
    -moz-transform:scale(1.25); 
    -ms-transform:scale(1.25); 
    -o-transform:scale(1.25); 
     transform:scale(1.25);
}
 

http://codepen.io/anon/pen/BNQWjm

Esta aplicado a los divs con clase producto.. de nuevo, supongamos que no podes hacerlo con clases, vas a tener que agregar un id diferente a cada div y los estilos aplicados a .producto:hover > img se los vas a tener que aplicar a cada identificador.. #producto1:hover > img, #producto2:hover > img, #producto3:hover > img, etc, etc..

Y obviamente hay estilos aplicados a "img".. es solo para el ejemplo, porque no hay mas imagenes, en tu caso para que solo afecte a las imagenes dentro de producto deberias aplicar esos estilos a .producto > img, no es necesario el simbolo ">" si solo hay una imagen dentro del div o si queres aplicarlo a tooodas las imagenes dentro de ".producto".

Saludos

[mardojai]

Xd No sé porque, pero por un momento al estar hablando de Js, me olvide que existía css, siento como que por un segundo recomendé usar flash en lugar de htlm5 XDD.