¿Cómo mostrar/ocultar cuando pase el mouse por encima de varias imágenes?

publicado por: Anonymous

Estoy haciendo un ejercicio en el que tengo 3 canecas de reciclaje. Necesito que cuando pase por encima de cada caneca muestre un mensaje dependiendo de la caneca en que esté situado. Necesito que ese mensaje cambie sin necesidad de oprimir el botón de aceptar para que se cierre. Necesito que por favor me ayuden a realizarlo con funciones en javascript y los eventos onmouseover y onmouseout. No puedo subir las imágenes porque el src no las reconoce de la página en donde las subo. Gracias de antemano.

introducir la descripción de la imagen aquí

_x000D_

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
	<meta charset="UTF-8">_x000D_
  <link rel="stylesheet" type="text/css" href="estilos/estilos.css">_x000D_
  <style>_x000D_
  body {_x000D_
  background-image: url("imagenes/naturaleza.jpg");_x000D_
  background-repeat: no-repeat;_x000D_
  background-position: center;_x000D_
  background-attachment: fixed;_x000D_
}_x000D_
h1, p {_x000D_
  font-family: cursive;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
</style>_x000D_
	_x000D_
    <script>_x000D_
function allowDrop(ev) {_x000D_
    ev.preventDefault();_x000D_
}_x000D_
_x000D_
function drag(ev) {_x000D_
    ev.dataTransfer.setData("text", ev.target.id);_x000D_
    _x000D_
    var color = ev.target.getAttribute('color');_x000D_
    ev.dataTransfer.setData("color", color);_x000D_
}_x000D_
_x000D_
function drop(ev) {_x000D_
    ev.preventDefault();_x000D_
    _x000D_
    var color_drag = ev.dataTransfer.getData("color");_x000D_
    var color_drop = ev.target.getAttribute('color');_x000D_
    _x000D_
    if(color_drag == color_drop){_x000D_
      var data = ev.dataTransfer.getData("text");_x000D_
      ev.target.appendChild(document.getElementById(data)); _x000D_
      _x000D_
      alert('Residuo correcto');_x000D_
    }else{_x000D_
      alert('Residuo incorrecto');_x000D_
    }_x000D_
_x000D_
  function ocultar(id) {_x000D_
    id += 'help'_x000D_
    document.getElementById('ver').style.display= 'hidde';_x000D_
  }_x000D_
}_x000D_
</script>_x000D_
_x000D_
<title></title>_x000D_
</head>_x000D_
<body> _x000D_
_x000D_
	<center><h1> Arrastrar y soltar </h1></center>_x000D_
_x000D_
<center class="caneca">_x000D_
_x000D_
    <div id="ver">_x000D_
    </div>_x000D_
    <div>_x000D_
      <p> Caneca azul </p>_x000D_
      <div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">_x000D_
      <img src="imagenes/azul.png" onmouseover="alert('Puede reciclar vidrios y plásticos');" onmouseout="ocultar()" width="200px" height="190px" color="azul">_x000D_
      </div>_x000D_
    </div>_x000D_
    _x000D_
    <div>_x000D_
      <p> Caneca verde </p>_x000D_
          <div class="img" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">_x000D_
          <img src="imagenes/verde.png" onmouseover="alert('Arroje objetos no peligrosos e inertes');" onmouseover="ocultar()" width="150px" height="200px" color="verde">_x000D_
      </div>_x000D_
    </div>_x000D_
    _x000D_
    <div>_x000D_
      <p> Caneca gris </p>_x000D_
      <div class="img" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">_x000D_
        <img src="imagenes/gris.png" onmouseover="alert('Puede reciclar cartón y similares');" onmouseover="ocultar()" width="170px" height="200px" color="gris">_x000D_
      </div> _x000D_
     </div>_x000D_
</center>_x000D_
    <br /> <br />_x000D_
_x000D_
<center><div id="x">_x000D_
<img src="imagenes/botella.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="80" color="azul">_x000D_
</div>_x000D_
_x000D_
<div id="y">_x000D_
<img src="imagenes/carton.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="80" color="gris">_x000D_
</div>_x000D_
_x000D_
<div id="z">_x000D_
<img src="imagenes/aluminio.png" draggable="true" ondragstart="drag(event)" id="drag3" width="100" height="80" color="verde">_x000D_
</center>_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

solución

Con un alert no puedes hacer lo que deseas, ya que el alert es un mensaje emergente del navegador que bloquea la página actual hasta que se le da clic en el botón “aceptar”, una solución podría ser usar una librería que genere mensajes emergentes (como por ejemplo SweetAlert) o bien crear un mensaje desde cero, en este caso como veo que no estás usando ninguna clase de librerías entonces te mostraré como crear un mensaje emergente:

_x000D_

_x000D_

function allowDrop(ev) {_x000D_
    ev.preventDefault();_x000D_
}_x000D_
_x000D_
function drag(ev) {_x000D_
    ev.dataTransfer.setData("text", ev.target.id);_x000D_
    _x000D_
    var color = ev.target.getAttribute('color');_x000D_
    ev.dataTransfer.setData("color", color);_x000D_
}_x000D_
_x000D_
function drop(ev) {_x000D_
    ev.preventDefault();_x000D_
    _x000D_
    var color_drag = ev.dataTransfer.getData("color");_x000D_
    var color_drop = ev.target.getAttribute('color');_x000D_
    _x000D_
    if(color_drag == color_drop){_x000D_
      var data = ev.dataTransfer.getData("text");_x000D_
      ev.target.appendChild(document.getElementById(data)); _x000D_
      _x000D_
      alert('Residuo correcto');_x000D_
    }else{_x000D_
      alert('Residuo incorrecto');_x000D_
    }_x000D_
}_x000D_
_x000D_
function ocultar() {_x000D_
    document.getElementById('ver').style.top= '0%';_x000D_
    document.getElementById('ver').style.opacity= 0;_x000D_
}_x000D_
_x000D_
function mostrar(mensaje){_x000D_
  document.getElementById('ver').innerHTML = '<p>' + mensaje + '</p>';_x000D_
  _x000D_
  document.getElementById('ver').style.top= '20%';_x000D_
  document.getElementById('ver').style.opacity= 1;_x000D_
}

_x000D_

body {_x000D_
  background-image: url("imagenes/naturaleza.jpg");_x000D_
  background-repeat: no-repeat;_x000D_
  background-position: center;_x000D_
  background-attachment: fixed;_x000D_
}_x000D_
h1, p {_x000D_
  font-family: cursive;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
#ver{_x000D_
  position: fixed;_x000D_
  top: 0%;_x000D_
  width: 70%;_x000D_
  height: 50px;_x000D_
  left: 0;_x000D_
  right: 0;_x000D_
  margin: auto;_x000D_
  text-align: center;_x000D_
  box-shadow: 0px 0px 5px black;_x000D_
  background: white;_x000D_
  z-index: 10;_x000D_
  opacity: 0;_x000D_
  transition: all 0.5s;_x000D_
}_x000D_
_x000D_
#ver p{_x000D_
  color: black;_x000D_
}

_x000D_

<center><h1> Arrastrar y soltar </h1></center>_x000D_
_x000D_
<center class="caneca">_x000D_
_x000D_
    <div id="ver">_x000D_
    </div>_x000D_
    <div>_x000D_
      <p> Caneca azul </p>_x000D_
      <div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">_x000D_
      <img src="imagenes/azul.png" onmouseover="mostrar('Puede reciclar vidrios y plásticos');" onmouseout="ocultar()" width="200px" height="190px" color="azul">_x000D_
      </div>_x000D_
    </div>_x000D_
    _x000D_
    <div>_x000D_
      <p> Caneca verde </p>_x000D_
          <div class="img" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">_x000D_
          <img src="imagenes/verde.png" onmouseover="mostrar('Arroje objetos no peligrosos e inertes');" onmouseout="ocultar()" width="150px" height="200px" color="verde">_x000D_
      </div>_x000D_
    </div>_x000D_
    _x000D_
    <div>_x000D_
      <p> Caneca gris </p>_x000D_
      <div class="img" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">_x000D_
        <img src="imagenes/gris.png" onmouseover="mostrar('Puede reciclar cartón y similares');" onmouseout="ocultar()" width="170px" height="200px" color="gris">_x000D_
      </div> _x000D_
     </div>_x000D_
</center>_x000D_
    <br /> <br />_x000D_
_x000D_
<center><div id="x">_x000D_
<img src="imagenes/botella.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="80" color="azul">_x000D_
</div>_x000D_
_x000D_
<div id="y">_x000D_
<img src="imagenes/carton.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="80" color="gris">_x000D_
</div>_x000D_
_x000D_
<div id="z">_x000D_
<img src="imagenes/aluminio.png" draggable="true" ondragstart="drag(event)" id="drag3" width="100" height="80" color="verde">_x000D_
</div>_x000D_
</center>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *