EIW FALL 2003
Stupid JavaScript Tricks: Active Bullets (Mouseover Images) Source


<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>

EIW Fall 2003