PDA

View Full Version : trying to find a script for a long time



ito
08-27-2006, 12:49 AM
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

jscheuer1
08-27-2006, 07:08 AM
Doesn't sound all that involved, is this for a game? Here is a neat blackjack script:

http://catcode.com/cardgame/sb21.html

jscheuer1
08-27-2006, 08:02 AM
This should work, use as many 'cards' as you like:


<!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>

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.

Also: If you like, you may skip -


onload=populate;

and simply hard code the beginning images for the page into their table cells (<td>'s).

ito
08-27-2006, 09:10 AM
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

jscheuer1
08-27-2006, 09:38 AM
1.where should i put the 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"

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?


cards[0]="http://www.somedomain.com/cardimages/photo1.jpg"

3.i was wrong with the position of the card , and i need them to be in horizonal view.

Change:


document.getElementById('layout').rows[i_tem].cells[0].innerHTML='<img src="'+cards[i_tem]+'">';

to:


document.getElementById('layout').rows[0].cells[i_tem].innerHTML='<img src="'+cards[i_tem]+'">';

And change:


<table id="layout">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

to:


<table id="layout">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

ito
08-27-2006, 10:45 AM
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

jscheuer1
08-27-2006, 04:27 PM
Just put it there:



<body>
<table id="layout">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<input type="button" value="deal" onclick="populate();">

ito
08-27-2006, 08:36 PM
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

jscheuer1
08-28-2006, 07:09 AM
<!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>

Note: Where it has:

card1 name

and similar, put the actual name for each card.

ito
08-28-2006, 08:40 AM
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?

jscheuer1
08-28-2006, 09:16 AM
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/showpost.php?p=51035&postcount=9

and paste that into a text editor as a new page. Insert your images (filenames) and texts (descriptions) into this array:


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"];

ito
08-28-2006, 09:16 AM
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>

jscheuer1
08-28-2006, 09:17 AM
We just cross posted, read my previous two posts in this thread.

ito
08-28-2006, 09:42 AM
thanks john-i think i've fixed it!!!!
all works well