Jump to content
Fórum Script Brasil
  • 0

Adicionar imagem por link no html


Question

Estou com dificuldades em inserir uma url de imagem no bg da minha raspadinha interativa. 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>


Preciso que esses valores :
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';

Sejam substituidos por uma url de imagem.
Sou nova no ramo, se alguém puder me auxiliar fico muito grata.

Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      149264
    • Total Posts
      645605
×
×
  • Create New...