2

Quiero que en lugar de que cada div me muestre una imagen, me muestre varios div. En este ejemplo que encontré no se como trabajar esta parte: var stringImg = <img src="https://www.comenaranjas.com/images/stories/virtuemart/product/manzana-royal.jpg" width="100" height="100">; donde cada div con id= información me muestra una imagen, en lugar de la imagen quiero que muestre varios div dentro del div con id=informacion.

const personajes = document.getElementsByClassName('personaje');

Array.from(personajes).forEach((elemento) => {

  elemento.addEventListener('mouseover', (e) => {
    let tarjeta = elemento.getAttribute("data-personaje");
    const img = document.getElementById("informacion");

    switch (tarjeta) {
      case "evento1":
        var stringImg = `<img src="https://www.comenaranjas.com/images/stories/virtuemart/product/manzana-royal.jpg" width="100" height="100">`;
        break;
      case "evento2":
        var stringImg = `<img src="https://super.walmart.com.mx/images/product-images/img_large/00000000004024L.jpg" width="100" height="100">`;
        break;
      case "evento3":
        var stringImg = `<img src="https://arcaikastore.com/494-large_default/mora-organica-x-lb-frutas-organicas.jpg" width="100" height="100">`;
        break;
    }

    img.innerHTML = stringImg;

  });

});
#wrapper {
  border: 1px solid red;
  height: 150px;
  position: relative;
}

#informacion {
  text-align: center;
}

#personajes {
  border: 1px solid blue;
  bottom: 0px;
  position: absolute;
  text-align: center;
  width: 100%;
}

#personajes>div {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

#personajes>div:hover {
  color: blue;
  cursor: pointer;
}
<div id="wrapper">
  <div id="informacion"></div>
  <div id="personajes">
    <div class="personaje" data-personaje="evento1">Evento1</div>
    <div class="personaje" data-personaje="evento2">Evento2</div>
    <div class="personaje" data-personaje="evento3">Evento3</div>
  </div>
</div>

1 respuesta 1

2

Solo cambia el string de la imagen por los divs que desees que muestre :

const personajes = document.getElementsByClassName('personaje');

Array.from(personajes).forEach((elemento) => {

  elemento.addEventListener('mouseover', (e) => {
    let tarjeta = elemento.getAttribute("data-personaje");
    const img = document.getElementById("informacion");

    switch (tarjeta) {
      case "evento1":
        var stringImg = `<div>este es un div<div>
		                  <div>este es un otro div<div>`;
        break;
      case "evento2":
        var stringImg = `<div>este es un div2<div>
		                  <div>este es un otro div2<div>`;
        break;
      case "evento3":
        var stringImg = `<div>este es un div3<div>
		                  <div>este es un otro div3<div>`;
        break;
    }

    img.innerHTML = stringImg;

  });

});
#wrapper {
  border: 1px solid red;
  height: 150px;
  position: relative;
}

#informacion {
  text-align: center;
}

#personajes {
  border: 1px solid blue;
  bottom: 0px;
  position: absolute;
  text-align: center;
  width: 100%;
}

#personajes>div {
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
}

#personajes>div:hover {
  color: blue;
  cursor: pointer;
}
<div id="wrapper">
  <div id="informacion"></div>
  <div id="personajes">
    <div class="personaje" data-personaje="evento1">Evento1</div>
    <div class="personaje" data-personaje="evento2">Evento2</div>
    <div class="personaje" data-personaje="evento3">Evento3</div>
  </div>
</div>

2
  • es decir el hecho que diga stringImg no quiere decir que solo acepte imágenes, solo es el nombre de una variable? Commented el 17 oct. 2019 a las 20:11
  • si exactamente ese es el nombre de la variable.. que perfectamente se puede llamar de la manera que gustes...
    – streleon
    Commented el 17 oct. 2019 a las 20:12

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.