1

Quiero hacer que se muestren 3 imágenes en orden y que no finalice la acción. Intuyo que necesito un bucle pero no me aclaro con los bucles. La intención es hacer que estas acciones en JS no tengan un fin, es decir, que al volver a posicionar el ratón sobre la imagen punt2 se muestre todo de nuevo. Creo que la solución estaría en añadir un parámetro a las dos funciones pero no sé cómo realizar dicha acción.

function pasaConHover() {
  document.getElementById('punt0').style.display = "none";
  document.getElementById('punt1').style.display = "block";
}

function pasaConHover1() {
  document.getElementById('punt2').style.display = "block";
  document.getElementById('punt0').style.display = "none";
  document.getElementById('punt1').style.display = "none";

}
/*//Aquí consigo CASI lo que pretendía pero me muestra la imágen punt1 en vez de la punt0*/
function dVuelta () {
	  document.getElementById('punt2').style.display="none";
    document.getElementById('punt0').style.display="block";
    document.getElementById('punt1').style.display="none"; 
}
<div class="semantica">
  <a target="_blank" href="#">
    <div class="montar">
      <img id="punt0" onmouseover="pasaConHover();" src="http://placehold.it/100?text=punt0" alt="imágen/enlace 0">
      <img id="punt1" onmouseout="pasaConHover1();" src="http://placehold.it/100?text=punt1" alt="imágen/enlace 1">
      <img onmouseover="dVuelta();" id="punt2" src="http://placehold.it/100?text=punt2" alt="imágen/enlace 2">
    </div>
  </a>
</div>

3
  • Bienvenido a Stack Overflow Español, me parece que esta es tu primera pregunta. Por favor visita nuestro recorrido de bienvenida que tan solo toma un minuto. Y si te sobra algo de tiempo visita nuestro centro de ayuda. Por favor editar tu pregunta e incluye un titulo más descriptivo, no esta permitido usar algo tan general.
    – Ender Look
    Commented el 5 ago. 2018 a las 15:04
  • ¿Podrías explicar algo mejor qué es lo que quieres que se muestre en cada momento? No termina de quedar claro cuál es el comportamiento esperado. ¿Qué debería ocurrir al pasar el ratón por encima de punt0, punt1 y punt2?
    – Alvaro Montoro
    Commented el 5 ago. 2018 a las 15:28
  • Hola, si: La intención es una especie de slider con JS, pero que muy básico. Primero se muestra al cargar la página la foto1 al hacer onmouseover se muestra la foto2 y al hacer on mouseout se muestra la foto3 y se ocultan la foto1 y la foto2, pero ahora se queda la foto3 y nunca más se vuelven a mostrar la 1 ni la 2, a no se que recargues la página. Y lo que pretendo hacer es que al volver a pasar el ratón por encima se muestre la foto1, tendría que poner un parametro a la función y en vez de document.getElementById, utilizar getElementByClassName no?
    – jBaton
    Commented el 5 ago. 2018 a las 16:44

1 respuesta 1

1

Seria darle ocultarlos a los demas elementos que no esten en hover, mi codigo muestra una manera de realizarlo

let clases = document.getElementsByClassName("figura");
for (let i = 0; i < clases.length; i++) {
  clases[i].addEventListener('mouseover', dentro);
  clases[i].addEventListener('mouseout', fuera);
}

function dentro(evt) {
  var ele = evt.target;
  for (let i = 0; i < clases.length; i++) {
    if (clases[i].id !== ele.id) {
      clases[i].classList.add("clase1");
    }
  }
}

function fuera(evt) {
  var ele = evt.target;
  for (let i = 0; i < clases.length; i++) {
    clases[i].classList.remove("clase1");
    clases[i].classList.add("figura");
  }
}
.clase1 {
  opacity: 0.2;
}

.figura {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
  display: inline-block;
}
<div id="conjunto">
  <div id="punt1" class="figura">
  </div>
  <div id="punt2" class="figura">
  </div>
  <div id="punt3" class="figura">
  </div>
</div>

5
  • Gracias me estudiaré bien afondo el tema de los bucles para ver si con tu ayuda soluciono este problemilla... pero de momento uno se va a alejar de la pantalla un ratito¡ Muchas Gracias.
    – jBaton
    Commented el 5 ago. 2018 a las 18:02
  • @JaronJabaton edite mi respuesta revisalo porfavor, Commented el 5 ago. 2018 a las 23:40
  • Gracias, voy a mirarme bien tu respuesta por que a lo mejor puedo adaptarlo a la idea que tenía en mente cambiando el opacity y su display. Pero no es exactamente eso lo que busco... (que puede que lo que busque no se pueda hacer) Aún así agradezco tu ayuda ... seguiré indagando, si lo consigo hacer sabré formular la pregunta mejor.
    – jBaton
    Commented el 6 ago. 2018 a las 1:32
  • @JaronJabaton probe mi codigo con display y sucede cosas innesperadas :) te acosejo que uses opacity, si te ayudo mi respuesta ten en cuenta que puedes dar +1 a mi respuesta Commented el 6 ago. 2018 a las 2:46
  • si ... lo he estado buscando pero no veo como ponerte un +1.... pero vamos que te pondría más +33 jeje. En cuanto vea como valoro tu respuesta @x-rw Me sale un mensaje que dice que tengo que tener 15 de reputación ... :(
    – jBaton
    Commented el 6 ago. 2018 a las 8:14

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.