0

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í

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="estilos/estilos.css">
  <style>
  body {
  background-image: url("imagenes/naturaleza.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
h1, p {
  font-family: cursive;
  color: white;
}

</style>
	
    <script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    
    var color = ev.target.getAttribute('color');
    ev.dataTransfer.setData("color", color);
}

function drop(ev) {
    ev.preventDefault();
    
    var color_drag = ev.dataTransfer.getData("color");
    var color_drop = ev.target.getAttribute('color');
    
    if(color_drag == color_drop){
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data)); 
      
      alert('Residuo correcto');
    }else{
      alert('Residuo incorrecto');
    }

  function ocultar(id) {
    id += 'help'
    document.getElementById('ver').style.display= 'hidde';
  }
}
</script>

<title></title>
</head>
<body> 

	<center><h1> Arrastrar y soltar </h1></center>

<center class="caneca">

    <div id="ver">
    </div>
    <div>
      <p> Caneca azul </p>
      <div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="imagenes/azul.png" onmouseover="alert('Puede reciclar vidrios y plásticos');" onmouseout="ocultar()" width="200px" height="190px" color="azul">
      </div>
    </div>
    
    <div>
      <p> Caneca verde </p>
          <div class="img" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
          <img src="imagenes/verde.png" onmouseover="alert('Arroje objetos no peligrosos e inertes');" onmouseover="ocultar()" width="150px" height="200px" color="verde">
      </div>
    </div>
    
    <div>
      <p> Caneca gris </p>
      <div class="img" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="imagenes/gris.png" onmouseover="alert('Puede reciclar cartón y similares');" onmouseover="ocultar()" width="170px" height="200px" color="gris">
      </div> 
     </div>
</center>
    <br /> <br />

<center><div id="x">
<img src="imagenes/botella.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="80" color="azul">
</div>

<div id="y">
<img src="imagenes/carton.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="80" color="gris">
</div>

<div id="z">
<img src="imagenes/aluminio.png" draggable="true" ondragstart="drag(event)" id="drag3" width="100" height="80" color="verde">
</center>
</body>
</html>

3
  • Al pasar tu código al snippet de SOes, la consola saca un error, tienes un error en el código deberías de resolverlo primero. Commented el 28 may. 2018 a las 19:39
  • tiene una función dentro de otra, deberías sacarla, la función ocultar y dejarlas como las otras , por eso no te la lee. Commented el 28 may. 2018 a las 19:51
  • @SebastiánLagosYañez si, lo sé, pero si yo hago una edición explicita al código que él a proporcionado sería una edición inválida debido a que estaría en contra de la intención del autor, lo máximo que se puede hacer es copiar y pegar el código en el snippet para verlo funcionando, saludos. Commented el 28 may. 2018 a las 19:54

2 respuestas 2

5

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:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
    
    var color = ev.target.getAttribute('color');
    ev.dataTransfer.setData("color", color);
}

function drop(ev) {
    ev.preventDefault();
    
    var color_drag = ev.dataTransfer.getData("color");
    var color_drop = ev.target.getAttribute('color');
    
    if(color_drag == color_drop){
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data)); 
      
      alert('Residuo correcto');
    }else{
      alert('Residuo incorrecto');
    }
}

function ocultar() {
    document.getElementById('ver').style.top= '0%';
    document.getElementById('ver').style.opacity= 0;
}

function mostrar(mensaje){
  document.getElementById('ver').innerHTML = '<p>' + mensaje + '</p>';
  
  document.getElementById('ver').style.top= '20%';
  document.getElementById('ver').style.opacity= 1;
}
body {
  background-image: url("imagenes/naturaleza.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}
h1, p {
  font-family: cursive;
  color: white;
}

#ver{
  position: fixed;
  top: 0%;
  width: 70%;
  height: 50px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  box-shadow: 0px 0px 5px black;
  background: white;
  z-index: 10;
  opacity: 0;
  transition: all 0.5s;
}

#ver p{
  color: black;
}
<center><h1> Arrastrar y soltar </h1></center>

<center class="caneca">

    <div id="ver">
    </div>
    <div>
      <p> Caneca azul </p>
      <div class="img" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img src="imagenes/azul.png" onmouseover="mostrar('Puede reciclar vidrios y plásticos');" onmouseout="ocultar()" width="200px" height="190px" color="azul">
      </div>
    </div>
    
    <div>
      <p> Caneca verde </p>
          <div class="img" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
          <img src="imagenes/verde.png" onmouseover="mostrar('Arroje objetos no peligrosos e inertes');" onmouseout="ocultar()" width="150px" height="200px" color="verde">
      </div>
    </div>
    
    <div>
      <p> Caneca gris </p>
      <div class="img" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
        <img src="imagenes/gris.png" onmouseover="mostrar('Puede reciclar cartón y similares');" onmouseout="ocultar()" width="170px" height="200px" color="gris">
      </div> 
     </div>
</center>
    <br /> <br />

<center><div id="x">
<img src="imagenes/botella.png" draggable="true" ondragstart="drag(event)" id="drag1" width="100" height="80" color="azul">
</div>

<div id="y">
<img src="imagenes/carton.png" draggable="true" ondragstart="drag(event)" id="drag2" width="100" height="80" color="gris">
</div>

<div id="z">
<img src="imagenes/aluminio.png" draggable="true" ondragstart="drag(event)" id="drag3" width="100" height="80" color="verde">
</div>
</center>

0

Amigo esta etiqueta dentro del img:

data-toggle= "tooltip" title = "Bote de basura #1"

Si no funciona, entonces pruebe solo con esta parte dentro del la etiqueta de la imagen:

title = "Bote de basura #1"

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.