<script language="JavaScript">
// Image
function cookiepic(theImage) {
theImage.src="smallcookie.gif";
}
function buttonpic(theImage) {
theImage.src="smallbutton.gif";
}
// turn on a div tag - sets the style property display to block
function div_on(theDiv) {
theDiv.style.display="block";
}
// turn off a div tag - sets the style property display to none
function div_off(theDiv) {
theDiv.style.display="none";
}
</script>
<table>
<tr><td width="300">
<table border="0">
<tr><td style="font-family: Helvetica; font-size: 16pt">
<a href="" onMouseOver="cookiepic(document.images['image1']);
div_on(document.getElementById('recipies'));"
onMouseOut="buttonpic(document.images['image1']);
div_off(document.getElementById('recipies'));"
onClick='alert("Recipies!");return(false)'>
<img id="image1" border="0" SRC="smallbutton.gif"
align="TOP"/></a>
Cookie Recipies
</td></tr>
<tr><td style="font-family: Helvetica; font-size: 16pt">
<a href="" onMouseOver="cookiepic(document.images['image2']);
div_on(document.getElementById('ingredients'));"
onMouseOut="buttonpic(document.images['image2']);
div_off(document.getElementById('ingredients'));"
onClick='alert("Ingredients!");return(false)'>
<img id="image2" border="0" SRC="smallbutton.gif" align="TOP" /></a>
Ingredients
</td></tr>
<tr><td style="font-family: Helvetica; font-size: 16pt">
<a href="foo"
onMouseOver="cookiepic(document.images['image3']);
div_on(document.getElementById('utencils'));"
onMouseOut="buttonpic(document.images['image3']);
div_off(document.getElementById('utencils'));"
onClick='alert("Utencils!");return(false)'>
<img id="image3" border="0" SRC="smallbutton.gif" align="TOP" /></a>
Utencils
</td></tr>
</table>
</td>
<td>
<div id="recipies" style="display:none; text-align:left">
<h3>Recipes from the best cookie chefs in the World! Our extensive
recipe database is searchable by cookie name and ingredients.</h3>
</div>
<div id="ingredients" style="display:none; text-align:left">
<h3>Find the freshest, highest quality ingredients from our web
partners. All ingredients are available on-line, bulk orders are
welcome at a substantial discount</h3>
</div>
<div id="utencils" style="display:none; text-align:left">
<h3>The best resource for information about cooking utencils and
tools. Purchase on-line from any of our web partners.
</h3>
</div>
</td>
</tr></table>
<hr/>
<h3>The bullets change when the mouse moves over them. If you click on a bullet
it will bring up an alert.</h3>
|