<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dice Roller</title>
<link rel="stylesheet" href="main.css" type="text/css" />
<script type="text/javascript" src="jquery.js" ></script>
<script>
$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show();
});
});
</script>
</head>
<body>
<div id="buttons">
<ul>
<li><a href="#" name="whiteDie" >white</a></li>
<li><a href="#" name="redDie" >red</a></li>
<li><a href="#" name="blueDie" >blue</a></li>
<li><a href="#" name="greenDie1" >green</a></li>
<li><a href="#" name="greenDie2" >green</a></li>
<li><a href="#" name="yellowDie1" >yellow</a></li>
<li><a href="#" name="yellowDie2" >yellow</a></li>
<li><a href="#" name="blackDie1" >black</a></li>
<li><a href="#" name="blackDie2" >black</a></li>
<li><a href="#" name="blackDie3" >black</a></li>
<li><a href="#" name="blackDie4" >black</a></li>
<li><a href="#" name="blackDie5" >black</a></li>
</ul>
</div>
<div id="diceArea">
<div class="dice" id="whiteDie"><a href=""></a></div>
<div class="dice" id="redDie"></div>
<div class="dice" id="blueDie"></div>
<div class="dice" id="greenDie1"></div>
<div class="dice" id="greenDie2"></div>
<div class="dice" id="yellowDie1"></div>
<div class="dice" id="yellowDie2"></div>
<div class="dice" id="blackDie1"></div>
<div class="dice" id="blackDie2"></div>
<div class="dice" id="blackDie3"></div>
<div class="dice" id="blackDie4"></div>
<div class="dice" id="blackDie5"></div>
</div>
<div id="footer">
</div>
<script>
var whiteArray = ['white1.gif', 'white2.gif', 'white3.gif', 'white4.gif', 'white5.gif', 'white6.gif'];
$('#whiteDie').css({'background-image': 'url(images/' + whiteArray[Math.floor(Math.random() * whiteArray.length)] + ')'});
var redArray = ['red1.gif', 'red2.gif', 'red3.gif', 'red4.gif', 'red5.gif', 'red6.gif'];
$('#redDie').css({'background-image': 'url(images/' + redArray[Math.floor(Math.random() * redArray.length)] + ')'});
var blueArray = ['blue1.gif', 'blue2.gif', 'blue3.gif', 'blue4.gif', 'blue5.gif', 'blue6.gif'];
$('#blueDie').css({'background-image': 'url(images/' + blueArray[Math.floor(Math.random() * blueArray.length)] + ')'});
var greenArray = ['green1.gif', 'green2.gif', 'green3.gif', 'green4.gif', 'green5.gif', 'green6.gif'];
$('#greenDie1').css({'background-image': 'url(images/' + greenArray[Math.floor(Math.random() * greenArray.length)] + ')'});
$('#greenDie2').css({'background-image': 'url(images/' + greenArray[Math.floor(Math.random() * greenArray.length)] + ')'});
var yellowArray = ['yellow1.gif', 'yellow2.gif', 'yellow3.gif', 'yellow4.gif', 'yellow5.gif', 'yellow6.gif'];
$('#yellowDie1').css({'background-image': 'url(images/' + yellowArray[Math.floor(Math.random() * yellowArray.length)] + ')'});
$('#yellowDie2').css({'background-image': 'url(images/' + yellowArray[Math.floor(Math.random() * yellowArray.length)] + ')'});
var blackArray = ['black1.gif', 'black2.gif', 'black3.gif', 'black4.gif', 'black5.gif', 'black6.gif'];
$('#blackDie1').css({'background-image': 'url(images/' + blackArray[Math.floor(Math.random() * blackArray.length)] + ')'});
$('#blackDie2').css({'background-image': 'url(images/' + blackArray[Math.floor(Math.random() * blackArray.length)] + ')'});
$('#blackDie3').css({'background-image': 'url(images/' + blackArray[Math.floor(Math.random() * blackArray.length)] + ')'});
$('#blackDie4').css({'background-image': 'url(images/' + blackArray[Math.floor(Math.random() * blackArray.length)] + ')'});
$('#blackDie5').css({'background-image': 'url(images/' + blackArray[Math.floor(Math.random() * blackArray.length)] + ')'});
</script>
</body>
</html>