I am implementing a card trick on a website. What I want to do is the user picks 4 cards then based on those cards the user is forced to pick 4 more that are of opposite color. So right now I have the cards displayed on the page but I want to keep track of each card. For example set reds to zero and blacks to ones. So lets say the user picks 4 black cards. Then I want it to display all cards that have the value zero (red cards). Then the user picks. Then it refreshes the cards to display the cards with the value zero and the user picks another card and it does that 2 more times. Is there a way I can assign a value to each card (1 or 0) and then display cards by there value?
Any help would be greatly appreciated.
This is what I have so far for displaying and flipping the cards
thumb1= new Image();
thumb1.src = "75/back-blue-75-3.png";
hover1 = new Image();
hover1.src = "75/clubs-2-75.png";
function imageflip(thumbnailID,imageName)
{
document.images[thumbnailID].src = eval(imageName + ".src");
}
<a href="#" onClick="imageflip('icon1','hover1')">
<img src="75/back-blue-75-3.png" border="0" name="icon1"/></a>