Como exibir uma imagem diferente cada vez que a página da web é carregada?
Com Javascript é definitivamente muito simples. Vamos começar com um script já funcionando para então explicar como ele funciona.
img = new Array () img [0] = 'foto1.jpg "width =" "height =" "border =" "'; img [1] = 'foto2.jpg" width = "" height = "" border = "" '; img [2] = 'foto3.jpg "width =" "height =" "border =" "'; ran = Math.floor (3 * Math.random ()); document.write ("");
Vamos tentar entender juntos como o script funciona. Primeiro, definimos a variável img como um vetor.
img = new Array ()
Em seguida, atribuímos o nome de uma imagem diferente aos três primeiros elementos (foto1.jpg, foto2.jpg,…). O conteúdo dos três elementos são três valores de string diferentes nos quais os parâmetros principais da tag são inseridos por meio do qual uma imagem é exibida em Html.
img [0] = 'foto1.jpg ”largura =” ”altura =” ”borda =” ”';
Depois que o vetor é definido e os valores da string atribuídos, o script executa a função Math.random para gerar um número aleatório de 0 a 0.999. Multiplicando esse valor aleatório pelo número constante 3, obtemos um número aleatório de 0 a 2. O resultado dessa expressão matemática é finalmente arredondado usando a função Math.floor. Desta forma, obtemos um número inteiro aleatório (sem vírgula). A variável run assumirá, portanto, o número 0, o número 1 ou o número 2 como seu valor toda vez que a página da web for recarregada.
ran = Math.floor (3 * Math.random ());
Para concluir o script, vamos ver como usar esse valor aleatório para exibir uma imagem em vez de outra. A tag é exibida na última declaração junto com o elemento da variável img [] relativo ao número aleatório (0, 1 ou 2) assumido pela variável ran.
document.write (“");
Para dar um exemplo prático, se o número aleatório da variável ran fosse igual a 1, o script levará em consideração os parâmetros contidos na variável string img [1], publicando a imagem foto2.jpg na tela.
