Jump to content
Incompetech

Mudando imagem ao clicar | SETA

Recommended Posts

Então.. a um tempo atrás eu fiz um post pedindo ajuda em relação a tooltip mas não obtive resposta, então decidi deixar essa funcionalidade para depois.

Como disse na minha primeira pergunta eu estou praticando HTML / CSS / JS ... então comecei a fazer uma entrada para MU ONLINE que foi um dos jogos que mais joguei em épocas de LAN HOUSE. Então o que quero perguntar a vocês é o seguinte:

inserir a descrição da imagem aqui

Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.

 

No meu caso eu criei essa entrada no Photoshop: 

 

E no caso gostaria de fazer a mesma coisa porém clicando nas setas que estão do lado da box como podem ver no centro da imagem.

Para isto eu devo usar Js? E qual código devo usar, eu sou super perdido com Js.

Agradeço desde já! :D

Capturar.PNG

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Rafaelmcd
      Olá, tenho um site em WordPress e preciso de uma regra para fazer um redirecionamento em massa, um redirecionamento 301.
      A regra seria mais ou menos assim, alterar links assim: https://site.com/blog/leia-top-games para https://site.com/blog/top-games
      Ou seja, precisa retirar o "leia-" de todos os link e redirecionar para o link novo.
      Alguém poderia me ajudar?
    • By asacap1000
      Galera já verifiquei vários páginas do google mas não encontrei o que precisava. Temos um sistema a qual no final temos a opção d imprimir os dados. que até aí está perfeito utilizo bootstrap para o layout e está ok. Porém preciso colocar a opção de pdf também aí não sai de jeito nenhum com o bootstrap. preciso gerar algo neste formato.
       

       
      Se alguem puder me dar um norte referente a isso agradeço demais.
    • By spyryt
      Amigos preciso validar este meu formulario, de forma que ele so envie os dados se o numero do cartão seja valido.
       

                          <form id="updateCreditCard" action="index4.php" method="post">                        
                              <fieldset style="border: none">
                                  
                              
                                  
                          
      <div class="divBlock">
                                      
              <div class="divBlock">
                                      <label for="Numbercpf">CPF *</label>
                                      <input required="required" type="text" name="cpf" id="cpf" maxlength="14" > 
               
                                  </div>
                                <div class="divBlock">
                                  <label for="cartao">Numero do Cartão *</label>
                                  <input type="text" id="holderName" maxlength="19" 
         name="cartao">
                                </div>
                                  
                              
                                  </div>
                                  <div class="btn-container">
                                      <button  onKeyPress="" class="sendUpdating">Continuar</button>
                                  </div>
    • By renan mafra
      Eu tenho 2 arquivos CSS externos que contém backgrounds da página.
      Em 1 só tem links para imagens .webP e em outro somente .PNG , eu estou usando um script para detectar se o browser aceita .webP e caso afirmativo ele altera o link CSS externo em HEAD para o css externo com .webP, por padrão inicialmente ele aponta para o .png, testei numa página mais simples e deu ok, mas na hora de colocar aonde quero não funcionou, segue o código:
      No HEAD:
       
      <link href="‪arquivos_css/png.css" rel="stylesheet" id="key">
       
      No JS:
       
       
      ////////////////////////////////////////////////////////////// // FUNÇÃO QUE CRIA O LINK EXTERNO CSS PARA INSERIR NO HEAD // OK// ////////////////////////////////////////////////////////////// function loadCSS(url){ var link = document.createElement('link'); link.setAttribute('href', url ); link.setAttribute('rel', "stylesheet" ); link.setAttribute('id', "key" ); var para = document.getElementsByTagName('head')[0]; //Nó pai HEAD var velho = document.getElementById('key'); //local exato do elemento a ser substituido para.replaceChild(link, velho); //Substituímos o velho pelo novo(link) } ////////////////////////////// Chamada à função do webP ///////////////////////////// WebpIsSupported(function(isSupported){ if(isSupported){ //CHAMA A FUNÇÃO LOADCSS e carrega o link CSS externo com WEBP loadCSS('arquivos_css/webp.css'); } }); ////////////////////////////////////////////////////////////// // FUNÇÃO QUE DETECTA A COMPATIBILIDADE DO BROWSER COM WEBP // ////////////////////////////////////////////////////////////// function WebpIsSupported(callback){ if(!window.createImageBitmap){ callback(false); return; } var webpdata = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA='; fetch(webpdata).then(function(response){ return response.blob(); }).then(function(blob){ createImageBitmap(blob).then(function(){ callback(true); }, function(){ callback(false); }); }); } O erro que está dando no chrome é esse: Failed to load resource: net::ERR_FILE_NOT_FOUND
      já mudei na função loadCSS o endreço dos arquivos de loadCSS('arquivos_css/webp.css'); para loadCSS('/arquivos_css/webp.css');
       
      e não funciona....
       
      o arquivo CSS externo contém backgrounds dentro do seletor HTML
      tipo :
       
      html {
            background-image.....(1);
            background-image.....(2);
            background-image.....(3);
           etc 
      }
      eu vou no elements do chome e está lá no HEAD conforme quero mas não carrega na página e dá este erro no console. –
      o que pode estar acontecendo ? ?
       
       
       
       
    • By Sapinn
      Salveee! Certo a dúvida que trarei aqui agora é bem complexa e eu sinceramente não sei se é realmente possível mas acho que não custa nada perguntar.
       
      Fiz um site de envio de textos, onde o aluno envia um texto e o professor corrigi até ai blz, queria saber como eu poderia fazer pra quando o professor marcar uma palavra aprece-se uma caixa de dialogo onde ele colocaria, por exemplo, a correção da palavra ou alguma explicação e essas informações seriam enviadas para o banco de dados quando o aluno acessa a correção desse texto e o ele passa-se  mouse por cima dessa palavra apareceria a correção em um balãozinho. Como exemplo desse comportamento que acabei de citar temos o google documents que faz algo desse jeito. Queria saber se isso pode ser possível sem exigir muito código ou muita coisa. Desde já agradeço.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.