1

Quiero añadir el evento listener a una lista de imágenes, cuando el mouse se encuentre sobre una imagen se extraiga el atributo alt de la imagen y lo coloque en un , obtuve la lista de todas las imágenes que necesito con:

var img = document.querySelectorAll('.contenedorIMG')

Pero puesto que esto me devuelve una lista a la que puedo acceder a sus elementos sólo colocando el indice (img[i]), quiero añadir un event listener para cualquiera de sus elementos, sin embargo no se como hacerlo. Pueden darme una mano? Lo que tengo de código es lo siguiente:

window.onload = function () {
    var img = document.querySelectorAll('.contenedorIMG'),
        titular = document.querySelector('#titular');


    img[0].addEventListener('mouseover', function () {     
        titular.innerText = 'CSS Master';
        console.log('Click');
    })
}

Obviamente está mal, pero es más o menos la idea que tengo por los momentos.

3 respuestas 3

3

Codigo

window.onload = function() {

  var imagenes = document.querySelectorAll('.contenedorIMG');
  var titular = document.querySelector('#titular');

  for (var i = 0; i < imagenes.length; i++) {

    imagenes[i].addEventListener('mouseover', function() {
      titular.innerText = this.alt;
    });

  }
}
<h2 id="titular"></h2>
<img height="42" width="42" class="contenedorIMG" alt="Imagen 1" src="https://ugc.kn3.net/i/origin/http://3.bp.blogspot.com/-HiWHxDwh6TE/TrlrCVirYbI/AAAAAAAAAdU/-8d44aYfaVo/s1600/Mangekyou+Sharingan.png"></img>
<img height="42" width="42" class="contenedorIMG" alt="Imagen 2" src="https://images.vexels.com/media/users/3/132335/isolated/lists/4af43ce1082231cba5e5aa60fbb03f2f-staffs-iconos-de-c-rculo.png"></img>
<img height="42" width="42" class="contenedorIMG" alt="Imagen 3" src="https://students.faith.sa.edu.au/images/tiles/dropbox-icon.png"></img>


Explicacion

Lo primero que hemos hecho es dejar cambiar la asociacion de los eventos usando esta sentencia:

  for (var i = 0; i < imagenes.length; i++) {

    imagenes[i].addEventListener('mouseover', function() {
      titular.innerText = this.alt;
    });

  }

Lo que hacemos aqui es ir recorriendo cada uno de los elementos del arreglo imagenes y le iremos asociando el evento.

Posteriormente agregamos esta linea dentro de nuestra funcion a ejecutar:

titular.innerText = this.alt;

Con esta linea le indicamos al elemento <h2> el texto que tendra, cuando se cumpla el evento. Que para dicho caso sera agregar el atributo alt de la imagen a la que se esta asignando el evento.


Actualizacion

Agrego una actualizacion respectiva al codigo que acabamos de trabajar, podria ser util para un caso que quieras que se oculte automaticamente el texto del titular.

window.onload = function() {

  var imagenes = document.querySelectorAll('.contenedorIMG');
  var titular = document.querySelector('#titular');

  for (var i = 0; i < imagenes.length; i++) {

    imagenes[i].addEventListener('mouseover', function() {
      titular.innerText = this.alt;
    });

    imagenes[i].addEventListener('mouseout', function() {
      titular.innerText = "";
    });

  }
}
#contenedor_titular {
  width: 100px;
  height: 60px;
}
<div id="contenedor_titular">
  <h2 id="titular"></h2>
</div>
<div>
  <img height="42" width="42" class="contenedorIMG" alt="Imagen 1" src="https://ugc.kn3.net/i/origin/http://3.bp.blogspot.com/-HiWHxDwh6TE/TrlrCVirYbI/AAAAAAAAAdU/-8d44aYfaVo/s1600/Mangekyou+Sharingan.png"></img>
  <img height="42" width="42" class="contenedorIMG" alt="Imagen 2" src="https://images.vexels.com/media/users/3/132335/isolated/lists/4af43ce1082231cba5e5aa60fbb03f2f-staffs-iconos-de-c-rculo.png"></img>
  <img height="42" width="42" class="contenedorIMG" alt="Imagen 3" src="https://students.faith.sa.edu.au/images/tiles/dropbox-icon.png"></img>
</div>

2
  • Excelente Ivan, muchas gracias!
    – user13764
    Commented el 29 ago. 2017 a las 14:40
  • 1
    @PedroFumero Que bien que te haya servido, he agregado una actualizacion que podria ser de utilidad. Commented el 29 ago. 2017 a las 14:48
1

No entiendo muy bien el problema que tienes, pero me supongo que lo que quieres es añadir un evento para cada elemento de tu array img. Esto lo podrías hacer con un bucle for:

window.onload = function () {
    var img = document.querySelectorAll('.contenedorIMG'),
        titular = document.querySelector('#titular');

        for (i = 0; i < img.length; i++) {

           img[i].addEventListener('mouseover', function () {     
           titular.innerText = 'CSS Master';
           console.log('Click');
           })
        }
}

Espero que esto responda a tu pregunta. Si no es así, intenta ofrecer algo más de información.

1
  • Perfecto amigo, es justo lo que estaba buscando. Muchas gracias!
    – user13764
    Commented el 29 ago. 2017 a las 14:31
0

Complementando la respuesta del compañero @DanielGS cada listener asociado al evento puedes obtener el objeto asociado al evento con la sentencia this:

window.onload = function () {
    var img = document.querySelectorAll('.contenedorIMG'),
    var titular = document.querySelector('#titular');

    for (i = 0; i < img.length; i++) {
       img[i].addEventListener('mouseover', function () {     
       titular.innerText = this.alt;
       });
    }
}
1
  • Muchas gracias por la aclaración.
    – user13764
    Commented el 29 ago. 2017 a las 14:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.