Printable View
Hello
I'm trying to find a random images javascript.
what i want to do ,is to take a deck of 78 card and put it in vertical table,so that each time i will refreash the page it will show me 3 different images,without repeating it self.
how could i make it possible?
thank you.
ito
Doesn't sound all that involved, is this for a game? Here is a neat blackjack script:
http://catcode.com/cardgame/sb21.html
This should work, use as many 'cards' as you like:
Notes: If you want to avoid repeat cards in any position when the page is repeatedly refreshed, cookies would need to be used. If you use the deal button, there will be no repeats.Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var check=[];
function populate(){
var cards=[];
cards[0]="photo1.jpg"
cards[1]="photo2.jpg"
cards[2]="photo3.jpg"
cards[3]="photo4.jpg"
cards[4]="photo5.jpg"
cards[5]="photo6.jpg"
cards[6]="photo8.jpg"
cards[7]="photo9.jpg"
cards.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
for (var i_tem = 0; i_tem < 3; i_tem++){
cards[i_tem]=check[i_tem]&&cards[i_tem]==check[i_tem]? cards[i_tem+3] : cards[i_tem];
document.getElementById('layout').rows[i_tem].cells[0].innerHTML='<img src="'+cards[i_tem]+'">';
}
check=[cards[0], cards[1], cards[2]];
}
onload=populate;
</script>
</head>
<body>
<input type="button" value="deal" onclick="populate();">
<table id="layout">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
Also: If you like, you may skip -
and simply hard code the beginning images for the page into their table cells (<td>'s).Code:onload=populate;
first, i would like to thank you all.
because i'm not a pro ,sevsral things i dont know how to do with the long code:
1.where should i put the cards?
2.if there is a need to put the http://www.... of the cards ?
2.where shuold i put the source/root/directory of the cards in this code?
3.i was wrong with the position of the card , and i need them to be in horizonal view.
ito
1.where should i put the cards?
2.if there is a need to put the http://www.... of the cards ?Code:cards[0]="photo1.jpg"
cards[1]="photo2.jpg"
cards[2]="photo3.jpg"
cards[3]="photo4.jpg"
cards[4]="photo5.jpg"
cards[5]="photo6.jpg"
cards[6]="photo8.jpg"
cards[7]="photo9.jpg"
2.where shuold i put the source/root/directory of the cards in this code?
3.i was wrong with the position of the card , and i need them to be in horizonal view.Code:cards[0]="http://www.somedomain.com/cardimages/photo1.jpg"
Change:
to:Code:document.getElementById('layout').rows[i_tem].cells[0].innerHTML='<img src="'+cards[i_tem]+'">';
And change:Code:document.getElementById('layout').rows[0].cells[i_tem].innerHTML='<img src="'+cards[i_tem]+'">';
to:HTML Code:<table id="layout">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
HTML Code:<table id="layout">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
all works great! just a one more thing...
i would like the button to be below the pictures- could you help me with this one?
again ,thanks a lot .
ito
Just put it there:
HTML Code:<body>
<table id="layout">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<input type="button" value="deal" onclick="populate();">
thanks jhon again.
is it o.k to ask more? please tell me if so.
if its o.k with you:
is it possible to add colum or something, so that i could add for each card its own name for example?
in other word, when i push the button, 3 random card apears with their specific name below?
i have to say that you help me a lot.
i appreciate your patience, its not so obvious to me.
thank you.
ito
Note: Where it has:Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.cent td {
text-align:center;
}
</style>
<script type="text/javascript">
var check=[];
function populate(){
var ims, txt, cards=[];
cards[0]=["photo1.jpg", "card1 name"];
cards[1]=["photo2.jpg", "card2 name"];
cards[2]=["photo3.jpg", "card3 name"];
cards[3]=["photo4.jpg", "card4 name"];
cards[4]=["photo5.jpg", "card5 name"];
cards[5]=["photo6.jpg", "card6 name"];
cards[6]=["photo7.jpg", "card7 name"];
cards[7]=["photo8.jpg", "card8 name"];
cards.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
for (var i_tem = 0; i_tem < 3; i_tem++){
if (check[i_tem]&&cards[i_tem][1]==check[i_tem]){
ims=cards[i_tem+3][0];
txt=cards[i_tem+3][1];
}
else {
ims=cards[i_tem][0];
txt=cards[i_tem][1];
}
document.getElementById('layout').rows[0].cells[i_tem].innerHTML='<img src="'+ims+'">';
document.getElementById('layout').rows[1].cells[i_tem].innerHTML=txt;
check[i_tem]=txt;
}
}
onload=populate;
</script>
</head>
<body>
<input type="button" value="deal" onclick="populate();">
<table id="layout">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="cent">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
card1 name
and similar, put the actual name for each card.
basicly,it works well ,but yet ,there is a problem.
the button is shown below.
when i'm trying to put the part of the code that you gave me, tha page shows an error.
why its going wrong?
That was an entirely new page, the changes required were too complex to explain bit by bit. Copy the entire code from:
http://www.dynamicdrive.com/forums/s...35&postcount=9
and paste that into a text editor as a new page. Insert your images (filenames) and texts (descriptions) into this array:
Code:cards[0]=["photo1.jpg", "card1 name"];
cards[1]=["photo2.jpg", "card2 name"];
cards[2]=["photo3.jpg", "card3 name"];
cards[3]=["photo4.jpg", "card4 name"];
cards[4]=["photo5.jpg", "card5 name"];
cards[5]=["photo6.jpg", "card6 name"];
cards[6]=["photo7.jpg", "card7 name"];
cards[7]=["photo8.jpg", "card8 name"];
thats the code i have got now :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.cent td {
text-align:center;
}
</style>
<script type="text/javascript">
var check=[];
function populate(){
var ims, txt, cards=[];
cards[0]=["01.jpg", "1"];
cards[1]=["02.jpg", "2"];
cards[2]=["03.jpg", "3"];
cards[3]=["04.jpg", "4"];
cards[4]=["05.jpg", "5"];
cards[5]=["06.jpg", "6"];
cards[6]=["07.jpg", "7"];
cards[7]=["08.jpg", "8"];
cards[8]=["09.jpg", "9"];
cards[9]=["10.jpg", "10"];
cards[10]=["11.jpg", "11"];
cards[11]=["12.jpg", "12"];
cards[12]=["13.jpg", "13"];
cards[13]=["14.jpg", "14"];
cards[14]=["15.jpg", "15"];
cards[15]=["16.jpg", "16"];
cards[16]=["17.jpg", "17"];
cards[17]=["18.jpg", "18"];
cards[18]=["19.jpg", "19"];
cards[19]=["20.jpg", "20"];
cards[20]=["21.jpg", "21"];
cards[21]=["22.jpg", "22"];
cards[22]=["23.jpg", "23"];
cards[23]=["24.jpg", "24"];
cards[24]=["25.jpg", "25"];
cards[25]=["26.jpg", "26"];
cards[26]=["27.jpg", "27"];
cards[27]=["28.jpg", "28"];
cards[28]=["29.jpg", "29"];
cards[29]=["30.jpg", "30"];
cards[30]=["31.jpg", "31"];
cards[31]=["32.jpg", "32"];
cards[32]=["33.jpg", "33"];
cards[33]=["34.jpg", "34"];
cards[34]=["35.jpg", "35"];
cards[35]=["36.jpg", "36"];
cards[36]=["37.jpg", "37"];
cards[37]=["38.jpg", "38"];
cards[38]=["39.jpg", "39"];
cards[39]=["40.jpg", "40"];
cards[40]=["41.jpg", "41"];
cards[41]=["42.jpg", "42"];
cards[42]=["43.jpg", "43"];
cards[43]=["44.jpg", "44"];
cards[44]=["45.jpg", "45"];
cards[45]=["46.jpg", "46"];
cards[46]=["47.jpg", "47"];
cards[47]=["48.jpg", "48"];
cards[48]=["49.jpg", "49"];
cards[49]=["50.jpg", "50"];
cards[50]=["51.jpg", "51"];
cards[51]=["52.jpg", "52"];
cards[52]=["53.jpg", "53"];
cards[53]=["54.jpg", "54"];
cards[54]=["55.jpg", "55"];
cards[55]=["56.jpg", "56"];
cards[56]=["57.jpg", "57"];
cards[57]=["58.jpg", "58"];
cards[58]=["59.jpg", "59"];
cards[59]=["60.jpg", "60"];
cards[60]=["61.jpg", "61"];
cards[61]=["62.jpg", "62"];
cards[62]=["63.jpg", "63"];
cards[63]=["64.jpg", "64"];
cards[64]=["65.jpg", "65"];
cards[65]=["66.jpg", "66"];
cards[66]=["67.jpg", "67"];
cards[67]=["68.jpg", "68"];
cards[68]=["69.jpg", "69"];
cards[69]=["70.jpg", "70"];
cards[70]=["71.jpg", "71"];
cards[71]=["72.jpg", "72"];
cards[72]=["73.jpg", "73"];
cards[73]=["74.jpg", "74"];
cards[74]=["75.jpg", "75"];
cards[75]=["76.jpg", "76"];
cards[76]=["77.jpg", "77"];
cards[77]=["78.jpg", "78"];
cards.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
for (var i_tem = 0; i_tem < 3; i_tem++){
if (check[i_tem]&&cards[i_tem][1]==check[i_tem]){
ims=cards[i_tem+3][0];
txt=cards[i_tem+3][1];
}
else {
ims=cards[i_tem][0];
txt=cards[i_tem][1];
}
document.getElementById('layout').rows[0].cells[i_tem].innerHTML='<img src="'+ims+'">';
document.getElementById('layout').rows[1].cells[i_tem].innerHTML=txt;
check[i_tem]=txt;
}
}
onload=populate;
</script>
</head>
<body>
<p align="center">
<input type="button" value="deal" onclick="populate();">
</p>
<p align="center">
<table id="layout">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="cent">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
We just cross posted, read my previous two posts in this thread.
thanks john-i think i've fixed it!!!!
all works well