Ir para conteúdo
Fórum Script Brasil
  • 0

Adicionar imagem por link no html


Ariani Alves

Pergunta

Olá, amigxs!
Estou desenvolvendo uma raspadinha interativa que pretendo enviar por email marketing utilizando o mailchimp. Porém estou com uma imensa dificuldade em adicionar a imagem bg por meio de link. Sou nova no ramo então estou pedida. Se alguém puder me ajudar fico imensamente grata. Meu código está assim:


 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" />
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700italic,700' rel='stylesheet' type='text/css'>
  
  <title>Scratch Card</title>
  <style type="text/css">
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.scratchpad{
  width: 450px;
  height: 445px;
  border: solid 10px #FFFFFF;
  margin:0 auto;
}
body {
    background:#efefef;
}
.scratch-container {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width:100%;
}
@media only screen and (max-width : 480px) {
  .scratchpad {width:400px;height:396px;}
  .scratch-container {width:400px !important;}
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
  .scratchpad {width:290px;height:287px;}
  .scratch-container {width:290px !important;}
}
.promo-container {
  background:#FFF;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  width:450px;
  padding:20px;
  margin:0 auto;
  text-align:center;
  font-family:'Open Sans', Arial,Sans-serif;
  color:#333;
  font-size:16px;
  margin-top:20px;
}
.btn {
  background:#56CFD2;
  color:#FFF;
  padding:10px 25px;
  display:inline-block;
  margin-top:15px;
  text-decoration:none;
  font-weight:600;
  text-transform:uppercase;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radiuss:3px;
}
  </style>

</head>
<body>
<div class="scratch-container">
  <div id="promo" class="scratchpad"></div>
</div>
<div class="promo-container" style="display:none;">
  <div class="promo-code"></div>
  <a href="htttp://jennamolby.com" target="_blank" class="btn">Register Now</a>
</div>


<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://jennamolby.com/scratch-and-win/js/wScratchPad.min.js"></script>

<script type="text/javascript">

var promoCode = '';
var bg1 = 'Imagens/Gpay_Card 1.jpg';
var bg2 = 'Imagens/Gpay_Card 2.jpg';
var bg3 = 'Imagens/Gpay_Card 3.jpg';
var bg4 = 'Imagens/Gpay_Card 4.jpg';
var bgArray= [ bg1, bg2, bg3, bg4 ],
selectBG = bgArray[Math.floor(Math.random() * bgArray.length)];
if (selectBG == bg1) {
    promoCode = 'SCRATCH400';
  } else if (selectBG == bg2) {
    promoCode = 'SCRATCH500';
  } if (selectBG == bg3) {
    var promoCode = '';
  }
$('#promo').wScratchPad({
    // the size of the eraser
    size        : 70,    
    // the randomized scratch image   
    bg:  selectBG,
    // give real-time updates
    realtime    : true, 
    // The overlay image
    fg: 'https://i.ibb.co/NCTRZVN/Gpay-Card-1.jpg',
    // The cursor (coin) image
    'cursor': 'url("https://jennamolby.com/scratch-and-win/images/coin1.png") 5 5, default',
    
    scratchMove: function (e, percent) {
        // Show the plain-text promo code and call-to-action when the scratch area is 50% scratched
        if ((percent > 50) && (promoCode != '')) {
          $('.promo-container').show();
          $('body').removeClass('not-selectable');
          $('.promo-code').html('Your code is: ' + promoCode);
        }
      }
 });
</script>
      

</body>
</html>

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...