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>