0

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
  • 1
    Agrega que has intentado y que errores te marca
    – Sr1871
    el 30 oct. 2018 a las 15:35
  • La verdad no se como empezar, lo único que he logrado es cambiar de imagen al div pero al pasar el mouse por el mismo div. el 30 oct. 2018 a las 16:01

2 respuestas 2

1

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>

1

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>

Tu Respuesta

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

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