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>