onmouseover e onmouseout

[Biel. 9]

Olá pessoal . Como adicionar os eventos onmouseover  e onmouseout no código abaixo ?  Estou tentando parar o slide ao colocar o cursor sobre a imagem e ao tirar o cursor da imagem voltar a funcionar normalmente.

<style>
      #boxPrincipal {
            max-width: 1024px;
            width: 100%;
            height: 100px;

            margin: auto;
            padding: 0px;
            text-align: center;
            background-color: #FFA;   
            border: 1px solid blue;
      }

      #box1 {
            width: 100%;
            max-width: 190px;
            height: 60px;
            /* position: relative; */
            bottom: 0;
      }

      #imgtete {
            /* position: absolute; */
            bottom: 0;

            width: 100%;
            height: 100%;

            opacity: 0;
            transition: opacity 800ms;
      }

      #imgtete.selected {
            opacity: 1;
      }
</style>

...

<div id="boxPrincipal">

      <div id="box1">
            <a href="link1"> <img src="slide1.png"  id="imgtete"> </a>
            <a href="link2"> <img src="slide2.png"  id="imgtete"> </a>
            <a href="link3"> <img src="slide3.png"  id="imgtete"> </a>
            <a href="link4"> <img src="slide4.png"  id="imgtete"> </a>
      </div>

</div>

...

<script>
      contador = 0,
            images = document.querySelectorAll("#imgtete")
      quantidade = images.length;
      //quantidade = 4;
let rrr;
     rrr = setInterval(function () {   
            images[contador]
     .classList.remove("selected")

 contador++
    
 if(contador >= quantidade)
 contador = 0 // volta para o começo

 images[contador]
 .classList.add("selected") ; 

      }, 1000);


//  clearInterval(rrr);


</script>

 

[tetsuo 0]

interessante a abordagem.
Mas id, deve ser única
se precisar diferenciar um grupo de elementos a propriedade com valor em comum deve ser a class

Executei aqui pra tentar entender e as imagens ficam piscando verticalmente, uma abaixo da outra

no caso o mouseenter e o mouseout seria em qualquer imagem, até mesmo nesse slot com background em amarelo?

[Omar~ 87]

Assim como o colega sitou; você nunca deve possuir mais de um elemento com o mesmo id=""

E isso já vi que lhe foi dito várias/milhares vezes, então porque continua comentendo o mesmo erro?

 

Bem, mesmo que não deveria fazer isso vou lhe dar o que está tentando fazer já mastigado e engolido.

É algo completamente abstraído ou seja não há muito o que se preocupar com todo o contexto pois o único que vai saber quais elementos devem ser manipulados é o javascript.

Então só informar uma tag <div> com um id (QUE NUNCA DEVE SE REPETIR) para a função e ela faz o resto

Dentro dessa tag <div> você coloca os elementos <a> de dentro desses a img

 

<style>
    #box1 {
        max-width: 190px;
        height: 60px;
        position: relative;
        overflow: hidden
    }
    #box1 > a {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .8s linear
    }
    #box1 > a.selected {
        opacity: 1
    }
    #box1 > a > img {
        width: 100%;
        height: inherit
    }
</style>

<div id="box1">
    <a href="link1"> <img src="slide1.png" alt="" /> </a>
    <a href="link2"> <img src="slide2.png" alt="" /> </a>
    <a href="link3"> <img src="slide3.png" alt="" /> </a>
    <a href="link4"> <img src="slide4.png" alt="" /> </a>
</div>

<script>
    function slide(ID_UNICO) {
        var caixa = document.getElementById(ID_UNICO),
            limite = (caixa.childElementCount - 1),
            contador = 0,
            intervalo = undefined;

        caixa.children[0].classList.add('selected');

        intervalo = setInterval(exemplo, 1000);

        function exemplo() {
            caixa.children[contador].classList.remove('selected');

            (contador === limite ? contador = 0 : contador++);

            caixa.children[contador].classList.add('selected');
        }

        caixa.addEventListener('mouseenter', function () {
            clearInterval(intervalo);
        }, false);

        caixa.addEventListener('mouseleave', function () {
            intervalo = setInterval(exemplo, 1000);
        }, false);
    }

    slide('box1'); // Informe o id="" do local onde contém os elementos
</script>

 

[Biel. 9]

Em 17/08/2022 at 17:20, Omar~ disse:

Assim como o colega sitou; você nunca deve possuir mais de um elemento com o mesmo id=""

E isso já vi que lhe foi dito várias/milhares vezes, então porque continua comentendo o mesmo erro?

 

Bem, mesmo que não deveria fazer isso vou lhe dar o que está tentando fazer já mastigado e engolido.

É algo completamente abstraído ou seja não há muito o que se preocupar com todo o contexto pois o único que vai saber quais elementos devem ser manipulados é o javascript.

Então só informar uma tag <div> com um id (QUE NUNCA DEVE SE REPETIR) para a função e ela faz o resto

Dentro dessa tag <div> você coloca os elementos <a> de dentro desses a img

 

<style>
    #box1 {
        max-width: 190px;
        height: 60px;
        position: relative;
        overflow: hidden
    }
    #box1 > a {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .8s linear
    }
    #box1 > a.selected {
        opacity: 1
    }
    #box1 > a > img {
        width: 100%;
        height: inherit
    }
</style>

<div id="box1">
    <a href="link1"> <img src="slide1.png" alt="" /> </a>
    <a href="link2"> <img src="slide2.png" alt="" /> </a>
    <a href="link3"> <img src="slide3.png" alt="" /> </a>
    <a href="link4"> <img src="slide4.png" alt="" /> </a>
</div>

<script>
    function slide(ID_UNICO) {
        var caixa = document.getElementById(ID_UNICO),
            limite = (caixa.childElementCount - 1),
            contador = 0,
            intervalo = undefined;

        caixa.children[0].classList.add('selected');

        intervalo = setInterval(exemplo, 1000);

        function exemplo() {
            caixa.children[contador].classList.remove('selected');

            (contador === limite ? contador = 0 : contador++);

            caixa.children[contador].classList.add('selected');
        }

        caixa.addEventListener('mouseenter', function () {
            clearInterval(intervalo);
        }, false);

        caixa.addEventListener('mouseleave', function () {
            intervalo = setInterval(exemplo, 1000);
        }, false);
    }

    slide('box1'); // Informe o id="" do local onde contém os elementos
</script>

 

Funcionou incrivelmente bem Omar, mas  para fechar com chave de ouro e nota 10 pra você faltou o seguinte: Ao encostar o cursor sobre o slide1 ou slide2 ou slide3 ou slide4  tem que aparecer o link certo da imagem.