Since this is an article about JavaScript, I won’t go into the HTML at all, but I will highlight what needs to go into the HTML and where it needs to go:
<html>
<head>
<title>Hotdeals</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="randomiser.js">
</script>
</head>
<body onLoad="randomize()" bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="233" height="418" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="images/hotdeals_01.gif" width="233" height="100" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images/hotdeals_02.gif" width="31" height="273" alt=""></td>
<td colspan="2">
<a href="javascript:newLocation1()" onMouseover="document.deal1.src=dealsover1[randomNum1]" onMouseout="document.deal1.src=deals1[randomNum1]"><img border="0" src="images/spacer.gif" name="deal1" width="171" height="24" alt=""></a></td>
<td rowspan="10">
<img src="images/hotdeals_04.gif" width="31" height="317" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/hotdeals_05.gif" width="171" height="47" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:newLocation2()" onMouseover="document.deal2.src=dealsover2[randomNum2]" onMouseout="document.deal2.src=deals2[randomNum2]"><img border="0" src="images/spacer.gif" name="deal2" width="171" height="24" alt=""></a></td>
</tr>
<tr>
<td colspan="2">
<img src="images/hotdeals_07.gif" width="171" height="43" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:newLocation3()" onMouseover="document.deal3.src=dealsover3[randomNum3]" onMouseout="document.deal3.src=deals3[randomNum3]"><img border="0" src="images/spacer.gif" name="deal3" width="171" height="24" alt=""></a></td>
</tr>
<tr>
<td colspan="2">
<img src="images/hotdeals_09.gif" width="171" height="44" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:newLocation4()" onMouseover="document.deal4.src=dealsover4[randomNum4]" onMouseout="document.deal4.src=deals4[randomNum4]"><img border="0" src="images/spacer.gif" name="deal4" width="171" height="22" alt=""></a></td>
</tr>
<tr>
<td colspan="2">
<img src="images/hotdeals_11.gif" width="171" height="45" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/hotdeals_12.gif" width="29" height="44" alt=""></td>
<td colspan="2">
<a href="javascript:newLocation5()" onMouseover="document.deal5.src=dealsover5[randomNum5]" onMouseout="document.deal5.src=deals5[randomNum5]"><img border="0" src="images/spacer.gif" name="deal5" width="171" height="22" alt=""></a></td>
<td rowspan="2">
<img src="images/hotdeals_14.gif" width="2" height="44" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/hotdeals_15.gif" width="171" height="25" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="169" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="2" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="31" height="1" alt=""></td>
</tr>
</table>
</body>
</html>
The first highlighted code segment simply calls the function that generates the random images. Each of the other code blocks has three primary jobs: to set an image with the name value that was set in the script file (deal1, deal2, and so on), to include onMouseOver and onMouseOut statements to handle the roll-overs and to include a <a> tag wrapper that calls the relevant link function. Download the graphics and the htm files included, and you can see the page working. If you’re learning JavaScript at the moment, it’s probably best if you type out at least the .js file yourself, because doing this will help cement the knowledge in place.
The page and the script file will work in MS IE6, Netscape 7 and Firefox, so if you need to actually use this on a website, you can be sure that it will reach and function for a wide range of users. It is purely client-side, which has its good and bad points, and JavaScript must be enabled in the browser for it to work, although it’s very easy to include a <noscript> tag to counteract its being switched off.
If this is purely a learning experience for you, I hope that this has proven to be a helpful guide to the usefulness of JavaScript arrays.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
