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.
Pergunta
Ariani Alves
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 para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
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.