Don't quite get the goal of this particular exercise, but a couple of versions.
PHP Code:
<!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=iso-8859-1" />
<title>Pick to have one of your dreams come true</title>
<style type="text/css">
<!--
#form1 p {
font-family: "MS Serif", "New York", serif, "Hei Regular", "Helvetica Bold", Copperplate, "Prestige Elite Std Bold";
font-weight: bold;
font-size: 16px;
}
-->
</style>
<script type="text/javascript">
var dream = ["dreamhouse.jpg", "dreamcar.jpg", "dreamjob.jpg", "dreamdate.jpg"]; // image array
var dreamAlert = ["DREAM HOME", "DREAM CAR", "DREAM JOB", "DREAM DATE"]; // alert array
function zeroInputs (){
var inputEls = document.form1.getElementsByTagName("input");// return am array like object of the input elements to inputEls
for (var i = 0, len = inputEls.length; i < len; i+=1){
inputEls[i].value = 0;
}
}
function ask(el){// el refers to the image that fired the ask event. Passed as this ask(this)
var door = el;
var inputEls = document.form1.getElementsByTagName("input"); // return am array like object of the input elements to inputEls
var i = Math.floor(Math.random()*4);
door.src = dream[i];
alert ("You have found your "+dreamAlert[i]);
inputEls[i].value = parseInt(inputEls[i].value)+1; // get the value, convert to a number and add 1
door.src="door.jpg";
}
window.onload = zeroInputs;
</script>
</head>
<body><center>
<form id="form1" name="form1" method="post" action="">
<table width="967" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="433" colspan="3" valign="top">
<p align="center">Behind each one of these doors is one of your<br />
Dream homes, Cars, Jobs, or your Dream Date</p>
<p align="center">Which one will you chose?</p>
<p align="center">
<img src="door.jpg" alt="" width="300" height="300" id="imgdoor1" onclick="ask(this)" />
<img src="door.jpg" alt="" width="300" height="300" id="imgdoor3" onclick="ask(this)" />
<img src="door.jpg" alt="" width="300" height="300" id="imgdoor2" onclick="ask(this)" />
</td>
</tr>
<tr>
<td height="30" colspan="3" valign="top"> <p align="center">You have Had</p></td>
</tr>
<tr>
<td width="416" height="114"></td>
<td width="169" valign="top">
<label>
<div align="left">
<input type="text" size="3" maxlength="3" value="0" />
Dream Homes<br />
<input type="text" size="3" maxlength="3" value="0" />
Dream Cars<br />
<input type="text" size="3" maxlength="3" value="0" />
Dream Jobs<br />
<input type="text" size="3" maxlength="3" value="0" />
Dream Dates<br />
</div>
</label>
</td>
<td width="382"></td>
</tr>
<tr>
<td height="13"></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</center>
</body>
</html>
or
PHP Code:
<!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=iso-8859-1" />
<title>Pick to have one of your dreams come true</title>
<style type="text/css">
<!--
#form1 p {
font-family: "MS Serif", "New York", serif, "Hei Regular", "Helvetica Bold", Copperplate, "Prestige Elite Std Bold";
font-weight: bold;
font-size: 16px;
}
-->
</style>
<script type="text/javascript">
var Obj = {
dream : ["dreamhouse.jpg", "dreamcar.jpg", "dreamjob.jpg", "dreamdate.jpg"], // image array
dreamAlert : ["HOME", "CAR", "JOB", "DATE"], // alert array
initInput : function() {
this.inputEls = document.form1.getElementsByTagName("input") // returns an array type of input elements to inputEls
for (var i = 0, len = this.inputEls.length; i < len ; i+=1) this.inputEls[i].value = 0; // set input values to 0;
},
ask: function(el){// el refers to the image that fired the ask event. Passed as this ask(this)
var i = Math.floor(Math.random()*4);
el.src = this.dream[i];
alert ("You have found your DREAM "+this.dreamAlert[i]);
this.inputEls[i].value = parseInt(this.inputEls[i].value)+1; // get the value, convert to a number and add 1
el.src="door.jpg";
}
};
window.onload = function(){Obj.initInput.call(Obj)};
</script>
</head>
<body><center>
<form id="form1" name="form1" method="post" action="">
<table width="967" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="433" colspan="3" valign="top">
<p align="center">Behind each one of these doors is one of your<br />
Dream homes, Cars, Jobs, or your Dream Date</p>
<p align="center">Which one will you chose?</p>
<p align="center">
<img src="door.jpg" alt="" width="300" height="300" id="imgdoor1" onclick="Obj.ask(this)" /> <!-- (this) is our img element -->
<img src="door.jpg" alt="" width="300" height="300" id="imgdoor3" onclick="Obj.ask(this)" />
<img src="door.jpg" alt="" width="300" height="300" id="imgdoor2" onclick="Obj.ask(this)" />
</td>
</tr>
<tr>
<td height="30" colspan="3" valign="top"> <p align="center">You have Had</p></td>
</tr>
<tr>
<td width="416" height="114"></td>
<td width="169" valign="top">
<label>
<div align="left">
<input type="text" size="3" maxlength="3" />
Dream Homes<br />
<input type="text" size="3" maxlength="3" />
Dream Cars<br />
<input type="text" size="3" maxlength="3" />
Dream Jobs<br />
<input type="text" size="3" maxlength="3" />
Dream Dates<br />
</div>
</label>
</td>
<td width="382"></td>
</tr>
<tr>
<td height="13"></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</center>
</body>
</html>
RPG
Need help, been away from Javascript for awhile!!
Reply With Quote
Bookmarks