Choose 4 cards only problem. Javascript [Archive]

QBall777

07-28-2005, 08:09 PM

Hi their,

I'm sure you all will look at this question and say "that's easy" well I hope so, here goes!
I'm trying to build a page were the user picks 4 playing cards from a spread pack of 22. When the card is clicked it changes image, so the user knows it has been selected. That's the easy part, the bit I'm stuck with is when all 4 cards have been selected I want the remaining cards to be dormant( not clickable)
Also when the 4 cards have been selected I need the card numbers to be sent to a form which will then be sent to me with the rest of the users information when they click the submit button.

Can this be done with javascript?

Hope someone can help.

Many Thanks QBall :)

vwphillips

07-28-2005, 09:28 PM

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Imgs;
var CardAry=new Array();

function InitCards(id){
id=document.getElementById(id);
Imgs=document.getElementsByTagName('IMG');
for (i=0;i<Imgs.length;i++){
Imgs[i].onclick=function(){ ImgClick(this); }
}
}

function ImgClick(obj){
if (CardAry.length>3){ return; }
if (!obj.set){
obj.width=obj.width+10;
obj.height=obj.height+10;
obj.border=1;
obj.set=true;
CardAry[CardAry.length]=obj.src.substring(obj.src.lastIndexOf('/')+1,obj.src.length);
document.getElementById('RecordCards').value=CardAry;
}
}
/*]]>*/
</script>
</head>

<body onload="InitCards('Cards');" >
<div id="Cards" style="position:relative:width:200px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width=50 height=75 />
</div>
<input id="RecordCards" size=100 />
</body>

</html>

or

<!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" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var Imgs;
var CardAry=new Array();

function InitCards(id){
id=document.getElementById(id);
Imgs=document.getElementsByTagName('IMG');
for (i=0;i<Imgs.length;i++){
Imgs[i].onclick=function(){ ImgClick(this); }
zxcOpacity(Imgs[i],50);
}
}

function ImgClick(obj){
if (CardAry.length>3){ return; }
if (!obj.set){
obj.width=obj.width+10;
obj.height=obj.height+10;
obj.border=1;
obj.set=true;
zxcOpacity(obj,100);
CardAry[CardAry.length]=obj.src.substring(obj.src.lastIndexOf('/')+1,obj.src.length);
document.getElementById('RecordCards').value=CardAry;
}
}

function zxcOpacity(obj,op) {
if (obj.style.MozOpacity!=null){ obj.style.MozOpacity=(op/100)-.001; }
else if (obj.style.opacity!=null){ obj.style.opacity=(op/100)-.001; }
else if (obj.style.filter!=null){ obj.style.filter = 'alpha(opacity='+op+')'; }
}

/*]]>*/
</script>
</head>

<body onload="InitCards('Cards');" >
<div id="Cards" style="position:relative:width:200px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width=50 height=75 />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width=50 height=75 />
</div>
<input id="RecordCards" size=100 />
</body>

</html>