Ir ao conteúdo
  • Cadastre-se
Matheus Bandeira

Background alternativo - javascript

Recommended Posts

Boa noite.

 

Bom, estou com um problema na estilização de um site que preciso concluir. O tema do site ficou como livre, mas o site deve conter 3 itens obrigatórios, sendo eles: slideshow, destaque na página que se está e um background alternativo.

 

Meu problema é com o background alternativo. É pedido que se tenha um pequeno menu com 4 opções de background diferentes para o body. O menu em si está criado e as imagens que serão utilizadas salvas, mas não encontrei um método para realizar essa mudança. Tentei alguns códigos diferentes e pesquisei por algo parecido pela internet, mas as mudanças que encontrei usavam apenas cores e não imagens. Tentei usar alguns desses códigos alterando as opções de cores por backgroundImage, mas não obtive sucesso, então recorri ao tópico. No site é necessário o uso de javascript puro, sem bibliotecas como Jquery. Desde já agradeço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Matheus Bandeira Olá, não sei se o seu trabalho é um desafio, dever de casa de faculdade ou curso...

Se não pode usar jQuery que seria uma mão na roda podes usar pelo menos o Data atributes do HTML 5 e API do javascript nativo.

 

Veja um exemplo funcionando:  https://jsfiddle.net/frc1mhwy/1/

 

Gostaria de lembra-lo de que o exemplo é de minha autoria e não é permitido copia-lo. Seu professor fará a pesquisa para saber se você copiou da internet a solução. Por isso recomendo que use-o para estudar e aprender a acessar os elementos e pegar o valor do atributo "data-" do HTML 5.

No exemplo que fiz, usei um vetor de 4 índices apara armazenar as imagens que serão utilizadas como background. 

a função addEventListener faz com que uma ação seja efetuada no momento do clique do mouse.

Usei um switch para testar qual link foi clicado pegando o valor do data-attribute e depois setando o backhground de acordo com o link clicado.

 

PS: em jQuery dá para reduzir bastante o código!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro 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 publicações 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

×