4

Tenho um site o qual ele é responsivo.

O problema é que o header possui um background azul e uma logomarca branca. Quando a resolução fica abaixo de 767px ele muda o menu.

Imagens:

Como está no computador:

Como está no tablet/celular:

Como tem que ficar no tablet/celular:

O que quero é que quando a resolução for abaixo de 767px ela mude para outra imagem.

Ex:

<img src="logo-branca.png" />

Quando a resolução for abaixo de 767px:

<img src="logo-azul.png" />

1 Resposta 1

7

Utilizando puro Javascript podemos verificar a propriedade window.innerWidth do objeto global, que representa a largura da janela do navegador em pixels.

<img id="logo" src="branca" />   

<script>
function updateLogo() {
    var logo = document.getElementById("logo");
    if(window.innerWidth < 767) { // verifica a largura da janela do navegador
        logo.src = "logo-azul.png";
    } else {
        logo.src = "logo-branca.png";
    }
}

updateLogo(); // faz o primeiro ajuste

window.addEventListener("resize", updateLogo); // atualiza o logo ao redimensionar a tela
</script>

Também é possível através de CSS Media Queries utilizando uma propriedade background para o div onde o logo estará contido e alterando a imagem de background de acordo com a resolução desejada:

<style>
#logo {
    background: url('logo-azul.png') no-repeat;
    width: 200px; /* a largura da imagem */
    height: 100px;  /* a altura da imagem */
}
@media (min-width: 767px) {
    #logo {
        background: url('logo-branca.png') no-repeat;
    }
}
</style>

<div id="logo"></div>

Dê preferência para a solução em CSS pois a solução em Javascript não funcionará se o navegador estiver com o Javascript desativado ¬¬

Exemplo no JSFiddle

Clique aqui para visualizar em tela cheia.

OBS: Diminua a janela do navegador para visualizar as diferenças.

3
  • Olá @Gustavo Carvalho Em CSS eu já sei, gostaria de conhecer o funcionamento com JS. Obrigado! 18/06/2014 às 20:47
  • Disponha @AlexandreLopes. Ficou alguma dúvida ou teve alguma dificuldade para implementar o código Javascript na sua página? 18/06/2014 às 21:15
  • Sem nenhum problema! Obrigado! :D 18/06/2014 às 22:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .