×
Ir ao conteúdo
  • Cadastre-se

HTML troca de img e marquee


Haseo\

Posts recomendados

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".

 

spacer.png

 

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>

 

spacer.png

 

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.

Link para o comentário
Compartilhar em outros sites

@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:

 

 

2021-12-02_23-50.png

 

 

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

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

@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? 🤔

Link para o comentário
Compartilhar em outros sites

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.

  • Curtir 1
Link para o comentário
Compartilhar em outros sites

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?

Link para o comentário
Compartilhar em outros sites

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ê.

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Curso de Hacker Ético

LANÇAMENTO!

CLIQUE AQUI E CONFIRA!

* Este curso não é ministrado pela equipe do Clube do Hardware.