mostrar imagen a la carta que toco
Publicado por nicolas (4 intervenciones) el 03/08/2018 03:57:30
buenas, cree 6 cartas en html y le las modifique con css, se muestra una imagen principal de la cartas quiero que al apretar jugar en la carta se muestre una imagen que seria la imagen correspodiente al valor que le toque
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="es">
<head>
<!--<script src="toscano.js"></script>--><meta charset="UTF-8">
<title>proyectoimagen2</title>
<!--TEXTO CSS DONDE ESTA LA IMAGEN--><link href="" rel="stylesheet">
<style type="text/css">
body{background: url(https://image.freepik.com/foto-gratis/mesa-de-madera-vacia-con-borrosa-cafe-montaje-de-productos-de-fondo-de-pantalla_1936-7.jpg) no-repeat center fixed;
background-size: 100% 100%;
background-attachment:fixed;
}</style>
</head>
<body>
<div>
<table align="right" height="650px" width="180px" border="1">
<tr>
<td height="100px" valign="top" align="center">JUGADOR 1</td>
<td height="100px" valign="top" align="center">PC</td>
</tr>
<tr>
<td height="10px" align="center"> <input type="button" value="ENVIDO"onclick=""/></td>
<td height="15px" align="center"> <input type="button" value="TRUCO" onclick=""/></td>
</tr>
<tr>
<td height="15px" align="center"><input type="button" value="REAL ENVIDO" onclick=""/></td>
<td height="15px" align="center"><input type="button" value="RE TRUCO" onclick=""/></td>
</tr>
<tr>
<td height="15px" align="center"><input type="button" value="FALTA ENVIDO" onclick=""/></td>
<td height="15px" align="center"><input type="button" value="VALE 4" onclick=""/></td>
</tr>
<tr>
<td height="15px" align="center"><input type="button" value="QUIERO" onclick=""/></td>
<td height="15px" align="center"><input type="button" value="NO QUIERO" onclick=""/></td>
</tr>
</table>
</div>
</body>
<head>
<title></title>
<style type="text/css">
body {heih: 15em;}
.carta {font-size: 2em; background-color: ; border-radius: .3em; width: 2em; height:3em; font-weight: bold; font-family: arial, verdana, sans-serif; padding: 0.2em; line-height: 1.5em; }
.partedeatras { background: url("http://1.bp.blogspot.com/-Gqx0w8tJPdE/TouZr0RsDrI/AAAAAAAAABQ/8aE52-Z4HNE/s1600/espadas_3.jpg"); background-position: 50% 50%;}
#atras{position: absolute; }
.carta { background: url("https://tarot10.net/wp-content/plugins/pepeTarot/img/carta.png"); height: 3.5em; background-position: 50% 50%; position: absolute; letter-spacing: -0.06em; overflow: hidden; line-height: 1em; }
#naipe0{position: absolute; top: 12.8em; left: 6em; font-size: 40px;}
#naipe1{position: absolute; top: 12.8em; left: 16em; font-size: 40px;}
#naipe2{position: absolute; top: 12.8em; left: 26em;font-size: 40px;}
#naipe3{position: absolute; top: 20em; right: 27em; font-size: 20px;}
#naipe4{position: absolute; top: 20em; left: 20em; font-size: 20px;}
#naipe5{position: absolute; top: 20em; left: 33.2em; font-size: 20px;}
</style>
</head>
<body>
<script type="text/javascript">
var mazo=[];
function mezclar(){
numero=[1,2,3,4,5,6,7,10,11,12];
palo=["espada","basto","oro","copa"];
if(mazo.length>=6)
return;
nuevacarta=[numero[Math.floor(6*Math.random())],palo[Math.floor(4*Math.random())]];
for(j=0;j<mazo.length;j++){
if(mazo[j].toString()==nuevacarta.toString())
return mezclar();
}mazo.push(nuevacarta);
mezclar();
}mezclar();
for(s in mazo)console.log(mazo[s][0]+' de '+mazo[s][1]+"<br/>");
console.log(mazo);
</script>
<input type="button" value="JUGAR" onclick="">
<div class="carta" id=naipe0 type="button" value="" onclick="atras">
<div class="partedeatras" id=atras></div>
</div>
<div class="carta" id=naipe1>
</div>
<div class="carta" id=naipe2>
<div class="face back"></div>
<div class="face front"></div>
</div>
<div class="carta" id=naipe3 type="button" value="" onclick="">
<div class="face back"></div>
<div class="face front"></div>
</div>
<div class="carta" id=naipe4>
<div class="face back"></div>
<div class="face front"></div>
</div>
<div class="carta" id=naipe5>
<div class="face back"></div>
<div class="face front"></div>
</div>
</body>
</html>
Valora esta pregunta
0