HTML troca de img e marquee

$Haseo\$ · 2 de dezembro de 2021

Boa tarde.

Eu estava revendo alguns trabalhos meus que possivelmente possam virar pequenas rendas no futuro, eu comecei novamente a tentar fazer um trabalho básico em HTML e estou com uma duvida na seguinte questão.

Como podem ver abaixo eu tenho uma espécie de "Slider".

Como citado no título, abaixo dele tenho um Elemento Marquee.

Vendo tutoriais no Youtube, eu consegue fazer uma parte da tarefa que era que ao passar o mouse em cima das setinhas, ela alterava a imagem.

 <div id="setaesquerda">
<img src="IMG/row-left.png" onmouseover="this.src='IMG/row-left-hover.png'" onmouseout="this.src='IMG/row-left.png'">
</div>

    <div id="setadireita">
<img src="IMG/row-right.png" onmouseover="this.src='IMG/row-right-hover.png'" onmouseout="this.src='IMG/row-right.png'">
</div>

Porém gostaria de saber como deixo essa transição um pouco mais suave, já que quando eu passo o mouse em cima, ela instantaneamente fica preta.

Enfim, eu gostaria de saber como eu faço para quando clicar na seta da direita, ele mudar para outra imagem e também mudar o marquee.

Isso aplicando tanto na Ida para a direita, quando na volta para a esquerda.

Grato.

GabrielSennaMs · 2 de dezembro de 2021

@Haseo\ Eu fiz um exemplo usando o efeito fade: https://jsfiddle.net/Senna_MT/0txa7u9o/5/

Para o exemplo funcionar no site de exemplo sem url do arquivo de imagem eu convertir a imagem em base64

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BTN</title>
        <style>
            html, body, main, section {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: #777;
            }

            .flip {
                -webkit-filter-transform: rotateY(180deg);
                transform: rotateY(180deg);
            }

            .btn {
                display: inline-block;
                width: 64px;
                height: 64px;
                background: url("on.png");
                background-size: cover;
                transition: 0.4s;
            }

            .btn-on {
                transition: 0.2s;
                -webkit-filter: grayscale(0%);
                filter: grayscale(0%);
            }

            .btn-on:hover {
                transition: 0.2s;
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);
            }

            .btn-off {
                transition: 0.2s;
                -webkit-filter: grayscale(100%);
                filter: grayscale(100%);
            }

            .btn-off:hover {
                transition: 0.2s;
                -webkit-filter: grayscale(0%);
                filter: grayscale(0%);
            }

        </style>
    </head>
    <body>
        <main>
            <section>
                <div class="btn btn-on"></div>
                <div class="btn btn-on flip"></div>
                <div class="btn btn-off"></div>
                <div class="btn btn-off flip"></div>
            </section>
        </main>
    </body>
</html>

Resultado:

@Haseo\ Esqueci do slide, aqui tem um tutoria de como fazer: https://www.w3schools.com/howto/howto_js_slideshow.asp

$Haseo\$ · 3 de dezembro de 2021

@GabrielSennaMs

Muito bom, isso me ajudou de mais!

Obrigado, para finalizar, eu tenho outra duvida..

Eu fiz essa página inteira, eu utilizo um monitor 1280x1024.

Porém quando alguns amigos meus foram testar a página no PC deles, as imagens ficaram em locais totalmente distantes de como ficam no meu PC, como faço para resolver este erro?

Marlon Vinicius Cardoso · 3 de dezembro de 2021

14 horas atrás, Haseo\ disse:

@GabrielSennaMs

Muito bom, isso me ajudou de mais!

Obrigado, para finalizar, eu tenho outra duvida..

Eu fiz essa página inteira, eu utilizo um monitor 1280x1024.

Porém quando alguns amigos meus foram testar a página no PC deles, as imagens ficaram em locais totalmente distantes de como ficam no meu PC, como faço para resolver este erro?

Você pode utilizar break points para a cada resolução que alcançar o CSS alterar automaticamente, segue link abaixo:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

O legal seria usar bootstrap no qual já é responsivo e você não teria esse trabalho e mais correto ainda você programar para a menor resolução e depois ir subindo a resolução, o chamado FIRST MOBILE.

$Haseo\$ · 8 de dezembro de 2021

Em 03/12/2021 às 12:02, Marlon Vinicius Cardoso disse:

Você pode utilizar break points para a cada resolução que alcançar o CSS alterar automaticamente, segue link abaixo:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

O legal seria usar bootstrap no qual já é responsivo e você não teria esse trabalho e mais correto ainda você programar para a menor resolução e depois ir subindo a resolução, o chamado FIRST MOBILE.

Então, eu dei uma olhada legal nisso porém é o seguinte, normalmente para a finalidade que estou criando, é muito raro ter 100% configuração para mobile, o foco é desktop mesmo, porém como eu expliquei o problema são resoluções grandes, tipo 1920 x 1080 por ai.

E ao tentar aplicar um break point, eu não consigo "consertar" as imagens para o local certo, eu inicio certinho o comando definindo o tamanho mínimo, porém qualquer comando para tentar posicionar as imagens tanto pra direita / esquerda / cima e baixo, absolutamente nada da jeito.

Como posso resolver isso?

Marlon Vinicius Cardoso · 9 de dezembro de 2021

19 horas atrás, Haseo\ disse:

Então, eu dei uma olhada legal nisso porém é o seguinte, normalmente para a finalidade que estou criando, é muito raro ter 100% configuração para mobile, o foco é desktop mesmo, porém como eu expliquei o problema são resoluções grandes, tipo 1920 x 1080 por ai.

E ao tentar aplicar um break point, eu não consigo "consertar" as imagens para o local certo, eu inicio certinho o comando definindo o tamanho mínimo, porém qualquer comando para tentar posicionar as imagens tanto pra direita / esquerda / cima e baixo, absolutamente nada da jeito.

Como posso resolver isso?

Rapaz... Agora complicou, não daria de alguma forma você tentar aplicar um bootstrap? Pra fazer esse tipo de tratamento automaticamente pra você.