Menu
Use JavaScript to create a web page that operates like a slot machine. The page should start up with three random pictures next to each other (all the same size). There should be a link below the pictures that causes all three pictures to be randomly chosen again whenever the link is clicked or rolled over. Be sure both clicking and rolling over the link both work. You should have at least five different pictures available.
I’ve tried a variety of things and I can’t get both to work. The only notes my teacher gave us was [url]http://www.kishwaukeecollege.edu/faculty/dklick/cis119/notes20080131.html
[code=html]
<html>
<head>
<title>Slot Machine</title>
<script type=”text/javascript” language=”javascript”>
pic = new Array();
if (document.images) {
for (i=0; i<4; pic[i++] {
pic[i] = new Image();
pic[i].src= ‘pic’ + i + ‘.jpg’;
} else {
for (i=0; i<4; pic[i++]=””);
document.r1 = document.r2 = “”;
}
}
function test() {
document.r1.src=pic[Math.floor(Math.random()*pic.length)].src;
document.r2.src=pic[Math.floor(Math.random()*pic.length)].src;
document.r3.src=pic[Math.floor(Math.random()*pic.length)].src;
document.r4.src=pic[Math.floor(Math.random()*pic.length)].src;
}
</script>
</head>
<body>
<img src=”pic0.jpg”
width=”100″ height=”125″
border=”0″ name=”r1″ id=”r1″
alt=”max1 picture” />
<img src=”pic2.jpg”
width=”100″ height=”125″
border=”0″ name=”r2″ id=”r2″
alt=”pignose picture” />
<img src=”pic3.jpg”
width=”100″ height=”125″
border=”0″ name=”r3″ id=”r3″
alt=”cuddles picture ” />
<img src=”pic4.jpg”
width=”100″ height=”125″
border=”0″ name=”r4″ id=”r4″
alt=”tiger picture ” />
<!–
<p><a href=”#”
onmouseover=”test();”
onclick=”test(); return false;”></a>
</p>
–>
<p><a href=”#”
onmouseover=”document.r1.src=pic[Math.floor(Math.random()*pic.length].src;”
onmouseout=”document.r1.src=r2.src;”
onclick=”document.r1.src=pic[Math.floor(Math.random()*pic.length].src; return false;”
>Link 1</a></p>
<p><a href=”#”
onmouseover=”document.r2.src=pic[Math.floor(Math.random()*pic.length)].src;”
onmouseout=”document.r2.src=r3.src;”
onclick=”document.r2.src=pic[Math.floor(Math.random()*pic.length].src;return false;”
></a></p>
<noscript>
<p align=”center”>
Please Turn On Java Script If Available
</p>
</noscript>
</body>
</html>