Ir para conteúdo
Victordiniz

Imagem alternativa para formato WebP

Recommended Posts

Bom dia a todos, confesso que não sei quase nada de html mais estou tentando, quem poder me ajudar fico muito agradecido.

Bom estou criando um efeito html que é composto por 3 imagens que ao passar o mouse a imagem 1 é substituída por a 2 e ao tirar o mouse pela imagem 3.

Porém a imagem 2 irá ser no formato WebP  e com isso estou tendo problemas no navegador Firefox que não suporta o formato.

A unica alternativa seria dentro do efeito chamar uma imagem Jpg pra substituír a Webp quando o navegador não suportar. E ai que está o problema não estou conseguindo chamar essa imagem. Desde já muito obrigado. 

 

Esse é o HTML:

 

<a href="ENDEREÇO-DO-LINK"><img src="ENDEREÇO-DA-IMAGEM-1" border="0" onmouseover="this.src='ENDEREÇO-DA-IMAGEM-2'" onmouseout="this.src='ENDEREÇO-DA-IMAGEM-1'"></a>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mas pq você ta usando webp? É obrigatório usar esse formato? Pois é um formato novo, criado pela Google, então praticamente só o Chrome aceita.

Compartilhar este post


Link para o post
Compartilhar em outros sites
22 horas atrás, rikaschmitt disse:

Mas pq você ta usando webp? É obrigatório usar esse formato? Pois é um formato novo, criado pela Google, então praticamente só o Chrome aceita.

Então não seria obrigatório é mais por a taxa de compressão que esse formato suporta, mesmo que só o Google o exiba pois a outra alternativa seria uma imagem gif que é bem mais pesada

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

  • Conteúdo Similar

    • Por jgasper
      Boa tarde, preciso de ajuda, fiz o site para minha empresa de advocacia mas nao sei transformar em mobile, peguei template pronto e fiz modificações, nao sou bom em HTML, foi o que consegui fazer. Alguem pode me ajudar a transformar ele em responsivo? só fazendo o menu funcionar para celular?
       
      Os arquivos do site estao em: https://mega.nz/#!AEAUxa5Z!EwFVVhgaJeJg6DTFpzUfi0vnrULPzI8YI9I0-XJwaE8
       
      Agradeço desde ja.
    • Por anepri
      Preciso fazer uma página de consulta onde selecionando a cidade traga como resultado estabelecimentos comerciais daquela cidade. O exemplo do código que estou usando funciona perfeitamente com países, estados e cidade, mas na hora que faço a função "lojas", mesmo o código sendo idêntico não aparece o resultado. O que tem me deixado doida é que os primeiros select funcionam, mas o último "lojas" não funciona de jeito nenhum! Alguém pode olhar o código e me dizer onde estou pecando?
       
      $(function(){ // Pais function pais(){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'pais' }, dataType: 'json', success: function(data){ console.log(data); for(i = 0; i < data.qtd; i++){ $('select[name=pais]').append('<option value="'+data.id[i]+'">'+data.pais[i]+'</option>'); } } }); } pais(); function estado(pais){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'estado', id: pais }, dataType: 'json', beforeSend: function(){ $('select[name=estado]').html('<option>Carregando...</option>'); }, success: function(data){ $('select[name=estado]').html(''); $('select[name=estado]').append('<option>Selecione o estado</option>'); for(i = 0; i < data.qtd; i++){ $('select[name=estado]').append('<option value="'+data.id[i]+'">'+data.estado[i]+'</option>'); } } }); } // Cidade function cidade(estado){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'cidade', id: estado }, dataType: 'json', beforeSend: function(){ $('select[name=cidade]').html('<option>Carregando...</option>'); }, success: function(data){ $('select[name=cidade]').html(''); $('select[name=cidade]').append('<option>Selecione a cidade</option>'); for(i = 0; i < data.qtd; i++){ $('select[name=cidade]').append('<option value="'+data.id[i]+'">'+data.cidade[i]+'</option>'); } } }); } function contrubuinte(cidade){ $.ajax({ type: 'GET', url: 'funcoes.php', data: { acao: 'contrubuinte', id: cidade }, dataType: 'json', beforeSend: function(){ $('select[name=contrubuinte]').html('<option>Carregando...</option>'); }, success: function(data){ console.log(data); $('select[name=contrubuinte]').html(''); $('select[name=contrubuinte]').append('<option>Selecione a contrubuinte</option>'); for(i = 0; i < data.qtd; i++){ $('select[name=contrubuinte]').append('<option value="'+data.id[i]+'">'+data.contrubuinte[i]+'</option>'); } } }); } $('select[name=pais]').change(function(){ var id = $(this).val(); estado(id); }); $('select[name=estado]').change(function(){ var idEstado = $(this).val(); cidade(idEstado); }); $('select[name=cidade]').change(function(){ var id = $(this).val(); contrubuinte(id); }); }); <?php require("config.php"); $retorno = array(); if($_GET['acao'] == 'pais'){ $sql = $pdo->prepare("SELECT * FROM pais"); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['pais'][$n] = $ln->pais; $retorno['id'][$n] = $ln->id; $n++; } } if($_GET['acao'] == 'estado'){ $id = $_GET['id']; $sql = $pdo->prepare("SELECT * FROM estados WHERE id_pais = :id"); $sql->bindValue(":id", $id, PDO::PARAM_INT); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['estado'][$n] = $ln->estado; $retorno['id'][$n] = $ln->id; $n++; } } if($_GET['acao'] == 'cidade'){ $id = $_GET['id']; $sql = $pdo->prepare("SELECT * FROM cidades WHERE id_estado = :id"); $sql->bindValue(":id", $id, PDO::PARAM_INT); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['cidade'][$n] = $ln->cidade; $retorno['id'][$n] = $ln->id; $n++; } } if($_GET['acao'] == 'contribuinte'){ $id = $_GET['id']; $sql = $pdo->prepare("SELECT * FROM contribuinte WHERE id_cidade = :id"); $sql->bindValue(":id", $id, PDO::PARAM_INT); $sql->execute(); $n = 0; $retorno['qtd'] = $sql->rowCount(); while($ln = $sql->fetchObject()){ $retorno['contribuinte'][$n] = $ln->contribuinte; $retorno['id'][$n] = $ln->id; $n++; } } die(json_encode($retorno)); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <select name="pais"> <option>Selecione o Pais</option> </select> <select name="estado"> <option>Selecione o Estado</option> </select> <select name="cidade"> <option>Selecione a Cidade</option> </select> <select name="contribuinte"> <option>Selecione o Contribuinte</option> </select> <script src="jquery.js"></script> <script src="funcoes.js"></script> </body> </html>  
    • Por Artes Ussler
      Bom dia
       
      Alguns navegadores sublinham ou trocam a cor dos números de telefones que estão no site.
       
      Como faço para remover isso?
       
      Se alguém puder ajudar, eu fico grato.
    • Por ericknb
      Bom dia Pessoal,
       
      Sou bem leigo no assunto e toda ajuda é bem vinda.
       
      Vamos lá. Possuo um ecommerce, numa parte do site tem um campo de Newsletter. Mas o fundo dele é um cinza e eu gostaria de alterar para uma imagem (uma imagem anexada para mostrar o fundo cinza que quero alterar. 
       
      Segue o código:
       
      <section class="newsletter" data-tray-tst="newsletter_box">
          <h2 class="newsletter-title">
              <i><svg version="1.1" fill="#000" width="30" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.66 343.793" enable-background="new 0 0 489.66 343.793" xml:space="preserve"><g><path d="M489.66,32.781v-1.906c0-7.078-3.215-15.406-8.984-21.176l-0.652-0.656c0,0-0.656,0-0.656-0.652c-1.309-1.313-2.559-1.907-3.867-3.215c-0.652,0-0.652-0.653-1.309-0.653c-1.309-0.656-3.211-1.312-4.52-1.906c-0.656,0-0.656-0.652-1.309-0.652c-1.906-0.656-3.867-1.309-5.773-1.309h-1.309c-1.902,0-4.52-0.656-7.078-0.656H34.742c-2.558,0-5.117,0-7.734,0.656c-0.653,0-1.309,0-1.903,0.653c-1.906,0.656-3.867,0.656-5.117,1.308c-0.656,0-0.656,0.656-1.308,0.656c-1.309,0.653-3.215,1.309-4.524,1.903l-0.652,0.656c-1.309,0.652-2.559,1.902-3.867,2.559L7.73,10.293C3.211,15.41,0.656,21.238,0,27.664v288.524c1.309,8.983,5.77,16.718,12.195,21.179c5.77,3.867,12.848,6.426,21.18,6.426h422.793c1.902,0,4.52,0,6.422-0.655h1.309c1.906-0.653,3.867-0.653,5.117-1.31h0.656c14.156-5.117,19.926-17.371,19.926-28.91V33.375C489.66,33.434,489.66,33.434,489.66,32.781L489.66,32.781z M448.551,23.797L246.168,221.004l-46.281-44.973L41.168,23.738h407.383V23.797z M23.855,307.146V39.859l149.676,143.907L23.855,307.146z M239.742,320.59H45.035l145.867-119.512l46.879,45.629c1.903,1.902,3.867,2.56,5.77,3.211h3.926c1.902-0.651,4.52-1.309,5.77-3.211l44.32-43.069l146.465,116.956H239.742V320.59z M465.863,307.742L315.535,186.324L465.863,39.859V307.742z M465.863,307.742"/></g></svg></i>
              <span>{{ Translation('news') }}</span>
          </h2>
          <form action="{{ links.newsletter }}" method="post" name="newsletter" data-tray-tst="newsletter_form">
              <input name="name" type="text" placeholder="{{ Translation('digitar_nome') }}" required>
              <input name="email" type="email" placeholder="{{ Translation('digitar_email') }}" data-tray-tst="newsletter_email" required>
              <button data-tray-tst="newsletter_cadastrar">{{ Translation('cadastrar') }}</button>
          </form>
      </section><section class="newsletter" data-tray-tst="newsletter_box">
          <h2 class="newsletter-title">
              <i><svg version="1.1" fill="#000" width="30" height="33" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.66 343.793" enable-background="new 0 0 489.66 343.793" xml:space="preserve"><g><path d="M489.66,32.781v-1.906c0-7.078-3.215-15.406-8.984-21.176l-0.652-0.656c0,0-0.656,0-0.656-0.652c-1.309-1.313-2.559-1.907-3.867-3.215c-0.652,0-0.652-0.653-1.309-0.653c-1.309-0.656-3.211-1.312-4.52-1.906c-0.656,0-0.656-0.652-1.309-0.652c-1.906-0.656-3.867-1.309-5.773-1.309h-1.309c-1.902,0-4.52-0.656-7.078-0.656H34.742c-2.558,0-5.117,0-7.734,0.656c-0.653,0-1.309,0-1.903,0.653c-1.906,0.656-3.867,0.656-5.117,1.308c-0.656,0-0.656,0.656-1.308,0.656c-1.309,0.653-3.215,1.309-4.524,1.903l-0.652,0.656c-1.309,0.652-2.559,1.902-3.867,2.559L7.73,10.293C3.211,15.41,0.656,21.238,0,27.664v288.524c1.309,8.983,5.77,16.718,12.195,21.179c5.77,3.867,12.848,6.426,21.18,6.426h422.793c1.902,0,4.52,0,6.422-0.655h1.309c1.906-0.653,3.867-0.653,5.117-1.31h0.656c14.156-5.117,19.926-17.371,19.926-28.91V33.375C489.66,33.434,489.66,33.434,489.66,32.781L489.66,32.781z M448.551,23.797L246.168,221.004l-46.281-44.973L41.168,23.738h407.383V23.797z M23.855,307.146V39.859l149.676,143.907L23.855,307.146z M239.742,320.59H45.035l145.867-119.512l46.879,45.629c1.903,1.902,3.867,2.56,5.77,3.211h3.926c1.902-0.651,4.52-1.309,5.77-3.211l44.32-43.069l146.465,116.956H239.742V320.59z M465.863,307.742L315.535,186.324L465.863,39.859V307.742z M465.863,307.742"/></g></svg></i>
              <span>{{ Translation('news') }}</span>
          </h2>
          <form action="{{ links.newsletter }}" method="post" name="newsletter" data-tray-tst="newsletter_form">
              <input name="name" type="text" placeholder="{{ Translation('digitar_nome') }}" required>
              <input name="email" type="email" placeholder="{{ Translation('digitar_email') }}" data-tray-tst="newsletter_email" required>
              <button data-tray-tst="newsletter_cadastrar">{{ Translation('cadastrar') }}</button>
          </form>
      </section>
       
       
      o que eu teria de alterar para inserir a imagem como fundo?
      Grato
       

    • Por freitaz
      Bom eu criei um sistema de cadastro, estava tudo ok, no localhost, mas quando subi para o servidor, teve paginas que não carregou o html, 
      e ficou dessa forma

       
      Gostaria de ajuda, e desde já agradeço! 
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.