Mi idea es crear un solo div que contenga una imagen, pero que esta imagen cambie de acuerdo a la palabra que se señale cuando se pausa el mouse por esta palabra. Es decir cuando pase el mouse en la palabra manzana aparezca en el div una manzana, al pasar por encima de la palabra pera en ese mismo div aparezca en lugar de manzana, una pera.
2 respuestas
Facil, pones por ejemplo en un listado el atributo data-img
que sera el nombre de tu fichero de imagen, y con los eventos mouseenter
y mouseleave
cambias segun el li
que estes apuntando
var target;
$(function(){
$("ul#frutas li").on({
mouseenter: function(){
var el = $(this);
var img = el.attr("data-img");
target = $("#boxImage");
target.find('img').attr("src","https://dummyimage.com/150x150/000/fff&text="+img);
target.show();
},
mouseleave: function(){
target.hide();
target.find("img").removeAttr("src");
}
})
});
ul#frutas{
padding: 30px;
margin: 10px;
float: left;
}
ul#frutas li{
padding: 10px;
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="frutas">
<li data-img='manzana'>Manzana</li>
<li data-img='pera'>Pera</li>
<li data-img='sandia'>Sandía</li>
</ul>
<div style="display: none;width:100%;" id="boxImage">
<img src="">
</div>
Hice un ejemplo con js puro, lo primero fue crear una capa donde estan las palabras y les asigne una misma clase para instanciarlas por dicha clase, luego le asigne un evento mouseover para obtener el atributo data-fruta el cual contine el valor de la fruta y con eso se que imagen mostrar:
const palabras = document.getElementsByClassName('palabra');
Array.from(palabras).forEach((elemento) => {
elemento.addEventListener('mouseover', (e) => {
let fruta = elemento.getAttribute("data-fruta");
const img = document.getElementById("img");
switch(fruta) {
case "manzana": var stringImg = `<img src="https://www.comenaranjas.com/images/stories/virtuemart/product/manzana-royal.jpg" width="100" height="100">`;break;
case "pera": var stringImg = `<img src="https://super.walmart.com.mx/images/product-images/img_large/00000000004024L.jpg" width="100" height="100">`;break;
case "durazno": 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;
}
#img{
text-align:center;
}
#palabras{
border:1px solid blue;
bottom:0px;
position:absolute;
text-align:center;
width:100%;
}
#palabras > div{
display:inline-block;
padding-left:5px;
padding-right:5px;
}
#palabras > div:hover{
color: blue;
cursor:pointer;
}
<div id="wrapper">
<div id="img"></div>
<div id="palabras">
<div class="palabra" data-fruta="manzana">Manzana</div>
<div class="palabra" data-fruta="pera">Pera</div>
<div class="palabra" data-fruta="durazno">Durazno</div>
</div>
</div>