Foros del Web - Ver Mensaje Individual - Creación código para poner 3 imágenes aleatoria

emprear · #3 (**permalink**) 05/06/2012, 22:44

En primer lugar, bienvenido a FDW @eraseunavezconvos

Te voy a tirar unas pistas a ver a dónde llegás, hace poco tiempo atrás (justamente mi colega @furoya tomo parte del experimento) hice esto, (que en realidad no sé bien para que sirve)

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Números aleatorios únicos en botones</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
input[type='button']{
width: 50px;
height: 50px;
padding: 2px 4px 2px 2px;
margin: 1px;
border-radius: 5px;
border: solid #4A2626 2px;
background-color: #793E3E;
font-style: italic;
font-weight: bold;
text-shadow: 1px 1px 0px #B2B2B2;
cursor:pointer;
font-size:14pt;
outline:none;
}
input[type='button']:hover{
color: #F27B24;
text-shadow: 1px 1px 0px #000;
padding: 0px;
border: ridge #000 3px;
}
#visor {
width: 152px;
height: 40px;
line-height: 40px;
font-size: 26px;
color:#5A2E2E;
padding-left: 8px;
font-family: arial, serif;
border: dotted 1px #5A2E2E;
cursor: none;
}
.botones{
margin-top: 15px;
cursor: default;
display: inline-block;
}
/*  código para el Tooltip  */
.tip {
position: relative;
border-bottom: dotted 1px #3E3E3E;
cursor: default;
}
.tip span {
display: none;
position: absolute;
top: 15px;
left: 20px;
width: 150px;
padding: 5px;
z-index: 100;
background: #000;
color: #fff;
border-radius: 5px;
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari */
font-family: arial, serif;
font-size: 12px;
text-align: center;
}
*:hover.tip {
font-size: 99%; /* fix IE */
}
*:hover.tip span {
display: block;
margin-left: 0px;
margin-top: 30px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
//Método Fisher–Yates
var mezclar = function(n){
for(var j, x, i = n.length; i; j = parseInt(Math.random() * i), x = n[--i], n[i] = n[j], n[j] = x);
return n;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
function escribe_numeros(r){
var sec = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var cadena = mezclar(sec).toString();
var numeros = new Array();
numeros=cadena.split(",");
var f = 0;var m;
for (m=0;m<numeros.length;m++){
var campo = 'b_' + f;
document.getElementById(campo).disabled = false;
if(r != 'no'){document.getElementById(campo).value = numeros[m];}f++;}
document.getElementById('visor').value = "";
}
function rellenar(v,idc){
var c=document.getElementById("visor").value; 
c=c+v;
document.getElementById("visor").value= c;
document.getElementById(idc).disabled = true;
}
function reiniciar(r){
document.getElementById("visor").value= '';
r=(r=='si')?escribe_numeros():escribe_numeros('no');
}
//]]>
</script>
</head>
<body onload="escribe_numeros();">
<div style="margin-top: 20px;">
<form action="#">
<div><input type="text" value="" readonly="readonly" id="visor" maxlength="10" 
    onmouseout="this.style.color='#5A2E2E'" onmouseover="this.style.color='#FFF'"/></div>
<div class="botones">
<input type="button" onclick="rellenar(this.value,this.id);" value="1" id="b_1" /> <input type="button" onclick="rellenar(this.value,this.id);" value="2" id="b_2" /> <input type="button" onclick="rellenar(this.value,this.id);" value="3" id="b_3" /> <br />
<input type="button" onclick="rellenar(this.value,this.id);" value="4" id="b_4" /> <input type="button" onclick="rellenar(this.value,this.id);" value="5" id="b_5" /> <input type="button" onclick="rellenar(this.value,this.id);" value="6" id="b_6" /> <br />
<input type="button" onclick="rellenar(this.value,this.id);" value="7" id="b_7" /> <input type="button" onclick="rellenar(this.value,this.id);" value="8" id="b_8" /> <input type="button" onclick="rellenar(this.value,this.id);" value="9" id="b_9" /> <br />
<input type="button" onclick="rellenar(this.value,this.id);" value="0" id="b_0" /> <span class="tip"><input type="button" onclick="reiniciar();" value="C" /><span>Restablece a cero<br />y conserva los números actuales</span></span> 
<span class="tip" id="rei_si"><input type="button" onclick="reiniciar('si');" value="R" /><span>Restablece a cero<br />y genera una nueva secuencia</span></span> 
</div>
</form>
</div>
</body>
</html>

visto así seguramente te confunde más de lo que te aclara (si lo ejecutás te parecerá muy atractivo, pero no mucho más que eso)

Si te fijás al inicio hay una función llamada mezclar(), que es un poco el secreto del resto. Esa función es posteriormente invocada en la función escribe_numeros(); y lo que hace es 'mezclar' aleatoriamente los números del array sec.
Si mal no recuerdo el mazo de cartas de tarot tiene 78 cartas, con lo que deberías llamas a tus imágenes del 1 al 78 con la extensión jpg, por ejemplo. Como las funciones te muestran por resultados números, a la hora de mostrarlos, tu html generado tendrá que ser algo como

'<img src="' + variable_javascript + '.jpg" width="xxx" height="xxx" alt="" />

Bueno, investigá un poco más, desmenuzá la script y fijate a dónde llegás, después volvés a consultar, probablemente, terminemos haciendo tu código, no sin antes hacerte romper la cabeza un poquito y quitarte algunas horas de sueño...

Saludos