6 jun
2017

¿Como puedo hacer que multiples divs funcionen en estado roll over-out con Jquery?

Buenas, necesito saber como hacer este código Java Script más optimizado, me funciona hasta el momento. Tengo Divs con clase "item" e imágenes en su interior. Lo unico que hago es cambiarles el atributo cuando están en mouse over y out, pero necesito ayuda para saber como hacerlo optimo. Muchas gracias. Tengo este código HTML:

<div class="item1">
   <img id="im1" src="img/image1.png">
</div>

<div class="item2">
   <img id="im2" src="img/image2.png">
</div>

<div class="item3">
   <img id="im3" src="img/image3.png">
</div>

<div class="item4">
   <img id="im4" src="img/image4.png">
</div>

Y tengo este código Java Script

$("#item1").mouseover(function(){
    $('#im1').attr("src", "img/image1_over.png");
});

$("#item1").mouseout(function(){
   $('#im1').attr("src", "img/image1.png");
});

$("#item2").mouseover(function(){
    $('#im2').attr("src", "img/image2_over.png");
});

$("#item2").mouseout(function(){
   $('#im2').attr("src", "img/image2.png");
});

$("#item3").mouseover(function(){
    $('#im3').attr("src", "img/image3_over.png");
});

$("#item3").mouseout(function(){
   $('#im3').attr("src", "img/image3.png");
});

$("#item4").mouseover(function(){
    $('#im4').attr("src", "img/image4_over.png");
});

$("#item4").mouseout(function(){
   $('#im4').attr("src", "img/image4.png");
});

COMENTARIOS

DEJA TU COMENTARIO

© 2017 website by Rubit Corporation