Background alternativo - javascript

[Matheus Bandeira]

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.

[DiF]

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