Como fazer banners serem exibidos em ordem aleatória

Escrito por chad buleen | Traduzido por ronaldo rocha borges
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como fazer banners serem exibidos em ordem aleatória
Saiba como fazer banners serem exibidos aleatoriamente seguindo simples passos (Comstock/Comstock/Getty Images)

Se você possuir mais de um banner que deseja exibir em seu site, poderá usar códigos HTML e JavaScript a fim de ajustar sua página HTML de modo que um banner diferente apareça aleatoriamente cada vez que a página for atualizada. Você não precisa ser um expert em Javascript para isso, mas é necessário estar familiarizado com HTML e Java.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 1

    Entre em seu servidor da web.

  2. 2

    Navegue até a página HTML que incluirá os banners rotativos e dê um duplo clique para abri-la.

  3. 3

    Clique na seção da página onde deseja que os banners apareçam. Pode ser em qualquer lugar entre as tags <body> e </ body>. Todo o conteúdo que aparece em uma página HTML fica entre elas.

  4. 4

    Insira o seguinte código:

    <div id="my_banners"> <a href="http://www.default_url.com"><img src="default_image.gif" class="banner_imgs" alt="default image alt text" /></a> </div> <script type="text/javascript" src="simage2.js"></script>

    A tag <div> define uma determinada seção no documento HTML. Em alguns aspectos, ela é semelhante a uma camada em que ela é um elemento separado de outros da página.

  5. 5

    Abra um editor de texto - como o bloco de notas - em seu computador.

  6. 6

    Cole o seguinte texto no documento:

    var my_imgs = new Array(); var my_imgs_link = new Array(); var my_imgs_alt = new Array();

    / Set image URLs / my_imgs[0] = "../../images/shoes1.gif"; my_imgs[1] = "../../images/story1.gif"; my_imgs[2] = "../../images/shoes2.gif"; my_imgs[3] = "../../images/story2.gif"; my_imgs[4] = "../../images/scare.jpg";

    / Set image link URLs / my_imgs_link[0] = "http://www.javscriptcity.com"; my_imgs_link[1] = "http://www.pageresource.com"; my_imgs_link[2] = "http://www.pageresource.com/jscript/"; my_imgs_link[3] = "http://www.pageresource.com/html/"; my_imgs_link[4] = "http://www.javascriptcity.com/scripts/";

    / Set image alternate text / my_imgs_alt[0] = "JavaScript City"; my_imgs_alt[1] = "Page Resource"; my_imgs_alt[2] = "PR JavaScript"; my_imgs_alt[3] = "PR HTML"; my_imgs_alt[4] = "JSC Scripts";

    if (document.getElementById && document.createTextNode) {

    var the_div = document.getElementById("my_banners"); var ran_num = Math.floor(Math.random()*(my_imgs.length));

    var the_HTML = "<a href=\""+my_imgs_link[ran_num]+"\">"; the_HTML += "<img src=\""+my_imgs[ran_num]+"\" class=\"banner_imgs\" "; the_HTML += "alt=\""+my_imgs_alt[ran_num]+"\" /></a>"; the_div.innerHTML = the_HTML;

    }

    Embora você não precise saber o que toda a codificação no Javascript representa, é bom saber que "var" é a abreviação de " variável " e que "<a href " é a tag de abertura de um hiperlink.

  7. 7

    Altere os caminhos de arquivo da imagem GIF - isto é, a localização de um arquivo quando colocado em uma série de pastas - abaixo de "/ Set image URLs /" (Defina as URLs das imagens) para as URLs reais, de modo que os banners se alternem. Elas são imagens que você já deverá ter enviado para o seu servidor da web.

  8. 8

    Mude as URLs em "/ * Set image link URLs */" ( Defina as URLs dos links das imagens) para as URLs que serão abertas quando as imagens correspondentes forem clicadas.

  9. 9

    Altere o texto alt - isto é, o texto que um usuário verá quando passar o mouse sobre a imagem ou texto que um usuário com deficiência visual ouviria - na seção "/ * Set image alternate text */" (Definir texto alternativo para imagem) para o texto alternativo que você deseja que apareça ao passar o mouse sobre um banner correspondente.

  10. 10

    Salve o arquivo como "simage2.js".

  11. 11

    Volte para o seu servidor e utilize suas ferramentas para fazer upload do arquivo .js que você salvou. Certifique-se de enviá-lo para a mesma pasta onde se encontra o arquivo HTML da página que estiver sendo editada.

  12. 12

    Publique a página HTML para salvar as alterações e fazer com que a nova, com os banners aleatórios, seja exibida ao vivo.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível