Getting text to go back to original text when mouse out

**Jay Dog** · 01-23-2013, 01:28 PM

Hi.

This is a further adaption of a previous project but this guy wants me to have it so that you roll over a specific area and a random question appears, no problems there, but now he wants it to have it so that question disappears and it goes back to the original text when the mouse goes out.

I have been experimenting with the onmouseout option but with little success.

HTML Code:

<html><head>
<title>Name that Tool</title>

<script language="JavaScript">
<!--

function yrandomImage() {
 pic = new Array();
 pic[0] = "What is its name?";
 pic[1] = "What does it do?";
 pic[2] = "How would you use it?";
 pic[3] = "What would you need to be careful of when using it?";
 pic[4] = "If you had to name it what would you call it?";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }

// -->

<!--

function brandomImage() {
pic = new Array();
 pic = new Array();
 pic[0] = "What is its name?";
 pic[1] = "What does it do?";
 pic[2] = "How would you use it?";
 pic[3] = "What would you need to be careful of when using it?";
 pic[4] = "If you had to name it what would you call it?";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }

// -->

<!--

function vrandomImage() {
 pic = new Array();
 pic[0] = "What is its name?";
 pic[1] = "What does it do?";
 pic[2] = "How would you use it?";
 pic[3] = "What would you need to be careful of when using it?";
 pic[4] = "If you had to name it what would you call it?";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }

// -->

<!--

function rrandomImage() {
 pic = new Array();
 pic[0] = "What is its name?";
 pic[1] = "What does it do?";
 pic[2] = "How would you use it?";
 pic[3] = "What would you need to be careful of when using it?";
 pic[4] = "If you had to name it what would you call it?";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }

// -->

<!--

function grandomImage() {
 pic = new Array();
 pic[0] = "What is its name?";
 pic[1] = "What does it do?";
 pic[2] = "How would you use it?";
 pic[3] = "What would you need to be careful of when using it?";
 pic[4] = "If you had to name it what would you call it?";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }
 
 
// -->

<!--

function srandomImage() {
 pic = new Array();
 pic[0] = "What is its name?";
 pic[1] = "What does it do?";
 pic[2] = "How would you use it?";
 pic[3] = "What would you need to be careful of when using it?";
 pic[4] = "If you had to name it what would you call it?";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }
 
  
 
// -->

<!--

function arandomImage() {
 pic = new Array();
 pic[0] = "What is its name?";
 pic[1] = "What does it do?";
 pic[2] = "How would you use it?";
 pic[3] = "What would you need to be careful of when using it?";
 pic[4] = "If you had to name it what would you call it?";
 pic[5] = "Why do you think we need to use it when working with metal?";
 pic[6] = "Why not use a pencil?";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }


// -->

<!--

function orandomImage() {
 pic = new Array();
 pic[0] = "What is its name?";
 pic[1] = "What does it do?";
 pic[2] = "How would you use it?";
 pic[3] = "What would you need to be careful of when using it?";
 pic[4] = "If you had to name it what would you call it?";
 
 
 

 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }

// -->
</script>
<style type="text/css">
.arial {
font-family: Arial, Helvetica, sans-serif;
}
.arial {
font-family: Arial;
}
</style>
</head><body>

<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="458"rowspan="16" align="center" valign="bottom"><img src="https://jupiter.inthehive.net/sites/bigwood/Departments/3083/mini/mini%20tools%20questions.png" name="myImage0" width="450" height="377" border="0" usemap="#myImage0Map"></td>
<td height="40" colspan="2" align="left" valign="middle"><b><font size="5">Tools Question Generator</font></b></td>
</tr>
<tr>
  <td width="26" align="center" valign="middle" bgcolor="#f8f7a2"><font color="#000000"><strong>1</strong></font></td>
<td width="519" height="25" align="left" valign="middle" bgcolor="#f8f7a2"><font color="#000000"><div id="myText1" onMouseOver="this.innerHTML = yrandomImage();">Tool 1</div></font></td>
</tr>
<tr>
  <td height="5" align="left" valign="middle">&nbsp;</td>
  <td height="5" align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
  <td align="center" valign="middle" bgcolor="#9eeffb"><font color="#000000"><strong>2</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#9eeffb"><font color="#000000"><div id="myText2" onMouseOver="this.innerHTML = brandomImage();">Tool 2</div></font></td>
</tr>
<tr>
  <td align="left" valign="middle">&nbsp;</td>
  <td height="0" align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
  <td align="center" valign="middle" bgcolor="#a5fab1"><font color="#000000"><strong>3</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#a5fab1"><font color="#000000"><div id="myText3" onMouseOver="this.innerHTML = grandomImage();">Tool 3</div></font></td>
</tr>
<tr>
  <td align="left" valign="middle">&nbsp;</td>
  <td height="0" align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
  <td align="center" valign="middle" bgcolor="#d8b6fa"><font color="#000000"><strong>4</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#d8b6fa"><font color="#000000"><div id="myText4" onMouseOver="this.innerHTML = vrandomImage();">Tool 4</div></font></td>
</tr>
<tr>
  <td align="left" valign="middle">&nbsp;</td>
  <td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
  <td align="center" valign="middle" bgcolor="#fc9dc1"><font color="#000000"><strong>5</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#fc9dc1"><font color="#000000"><div id="myText5" onMouseOver="this.innerHTML = rrandomImage();">Tool 5</div></font></td>
</tr>
<tr>
  <td align="left" valign="middle">&nbsp;</td>
  <td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
  <td align="center" valign="middle" bgcolor="#fabe83"><font color="#000000"><strong>6</strong></font></td>
  <td height="25" align="left" valign="middle" bgcolor="#fabe83"><font color="#000000"><div id="myText6" onMouseOver="this.innerHTML = orandomImage();">Tool 6</div></font></td>
</tr>

<tr>
  <td align="left" valign="middle">&nbsp;</td>
<td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
  <td align="center" valign="middle" bgcolor="#CCCCCC"><font color="#000000"><strong>7</strong></font></td>
  <td height="25" align="left" valign="middle" bgcolor="#CCCCCC"><font color="#000000"><div id="myText7" onMouseOver="this.innerHTML = srandomImage();">Tool 7</div></font></td>
</tr>
<tr>
  <td align="left" valign="middle">&nbsp;</td>
  <td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
  <td align="center" valign="middle" bgcolor="#FFBD59"><font color="#000000"><strong>8</strong></font></td>
  <td height="25" align="left" valign="middle" bgcolor="#FFBD59"><font color="#000000"><div id="myText8" onMouseOver="this.innerHTML = arandomImage();">Tool 8</div></font></td>
</tr>
</tbody>
</table>


<map name="myImage0Map">
<area shape="poly" coords="441,146,298,21,246,77" href="#" onMouseOver="document.getElementById('myText2').innerHTML = brandomImage();">
<area shape="poly" coords="37,220,222,45,149,4,10,142" href="#" onMouseOver="document.getElementById('myText1').innerHTML = yrandomImage();">
<area shape="poly" coords="312,144,293,108,169,198,166,247" href="#" onMouseOver="document.getElementById('myText3').innerHTML = grandomImage();">
<area shape="poly" coords="435,223,417,188,258,263,254,290" href="#" onMouseOver="document.getElementById('myText7').innerHTML = srandomImage();">
<area shape="poly" coords="158,324,123,243,14,298,19,337" href="#" onMouseOver="document.getElementById('myText5').innerHTML = rrandomImage();">
<area shape="poly" coords="201,340,240,245,216,243,167,340" href="#" onMouseOver="document.getElementById('myText6').innerHTML = orandomImage();">
<area shape="poly" coords="360,178,344,152,253,211,276,220" href="#" onMouseOver="document.getElementById('myText4').innerHTML = vrandomImage();">

<area shape="poly" coords="415,308,382,265,319,331,347,361" href="#" onMouseOver="document.getElementById('myText8').innerHTML = arandomImage();">
</map>
</body></html>

**vwphillips** · 01-23-2013, 02:41 PM

Code:

<html><head>
<title>Name that Tool</title>

<script language="JavaScript">
<!--

function yrandomImage() {
pic = new Array();
pic[0] = "What is its name?";
pic[1] = "What does it do?";
pic[2] = "How would you use it?";
pic[3] = "What would you need to be careful of when using it?";
pic[4] = "If you had to name it what would you call it?";

randomNum = Math.floor(Math.random()*pic.length);

return pic[randomNum];
}

// -->

<!--

function brandomImage() {
pic = new Array();
pic = new Array();
pic[0] = "What is its name?";
pic[1] = "What does it do?";
pic[2] = "How would you use it?";
pic[3] = "What would you need to be careful of when using it?";
pic[4] = "If you had to name it what would you call it?";

randomNum = Math.floor(Math.random()*pic.length);

return pic[randomNum];
}

// -->

<!--

function vrandomImage() {
pic = new Array();
pic[0] = "What is its name?";
pic[1] = "What does it do?";
pic[2] = "How would you use it?";
pic[3] = "What would you need to be careful of when using it?";
pic[4] = "If you had to name it what would you call it?";

randomNum = Math.floor(Math.random()*pic.length);

return pic[randomNum];
}

// -->

<!--

function rrandomImage() {
pic = new Array();
pic[0] = "What is its name?";
pic[1] = "What does it do?";
pic[2] = "How would you use it?";
pic[3] = "What would you need to be careful of when using it?";
pic[4] = "If you had to name it what would you call it?";

randomNum = Math.floor(Math.random()*pic.length);

return pic[randomNum];
}

// -->

<!--

function grandomImage() {
pic = new Array();
pic[0] = "What is its name?";
pic[1] = "What does it do?";
pic[2] = "How would you use it?";
pic[3] = "What would you need to be careful of when using it?";
pic[4] = "If you had to name it what would you call it?";

randomNum = Math.floor(Math.random()*pic.length);

return pic[randomNum];
}


// -->

<!--

function srandomImage() {
pic = new Array();
pic[0] = "What is its name?";
pic[1] = "What does it do?";
pic[2] = "How would you use it?";
pic[3] = "What would you need to be careful of when using it?";
pic[4] = "If you had to name it what would you call it?";

randomNum = Math.floor(Math.random()*pic.length);

return pic[randomNum];
}



// -->

<!--

function arandomImage() {
pic = new Array();
pic[0] = "What is its name?";
pic[1] = "What does it do?";
pic[2] = "How would you use it?";
pic[3] = "What would you need to be careful of when using it?";
pic[4] = "If you had to name it what would you call it?";
pic[5] = "Why do you think we need to use it when working with metal?";
pic[6] = "Why not use a pencil?";

randomNum = Math.floor(Math.random()*pic.length);

return pic[randomNum];
}


// -->

<!--

function orandomImage() {
pic = new Array();
pic[0] = "What is its name?";
pic[1] = "What does it do?";
pic[2] = "How would you use it?";
pic[3] = "What would you need to be careful of when using it?";
pic[4] = "If you had to name it what would you call it?";





randomNum = Math.floor(Math.random()*pic.length);

return pic[randomNum];
}

// -->
</script>
<script type="text/javascript">
/*<![CDATA[*/

function CngText(id,txt){
 var obj=document.getElementById(id);
 CngText[id]=CngText[id]||obj.innerHTML;
 obj.innerHTML=txt||CngText[id];
}

/*]]>*/
</script>
<style type="text/css">
.arial {
font-family: Arial, Helvetica, sans-serif;
}
.arial {
font-family: Arial;
}
</style>
</head><body>

<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="458"rowspan="16" align="center" valign="bottom"><img src="https://jupiter.inthehive.net/sites/bigwood/Departments/3083/mini/mini%20tools%20questions.png" name="myImage0" width="450" height="377" border="0" usemap="#myImage0Map"></td>
<td height="40" colspan="2" align="left" valign="middle"><b><font size="5">Tools Question Generator</font></b></td>
</tr>
<tr>
<td width="26" align="center" valign="middle" bgcolor="#f8f7a2"><font color="#000000"><strong>1</strong></font></td>
<td width="519" height="25" align="left" valign="middle" bgcolor="#f8f7a2"><font color="#000000"><div id="myText1" onMouseOver="this.innerHTML = yrandomImage();">Tool 1</div></font></td>
</tr>
<tr>
<td height="5" align="left" valign="middle">&nbsp;</td>
<td height="5" align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#9eeffb"><font color="#000000"><strong>2</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#9eeffb"><font color="#000000"><div id="myText2" onMouseOver="this.innerHTML = brandomImage();">Tool 2</div></font></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td height="0" align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#a5fab1"><font color="#000000"><strong>3</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#a5fab1"><font color="#000000"><div id="myText3" onMouseOver="this.innerHTML = grandomImage();">Tool 3</div></font></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td height="0" align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#d8b6fa"><font color="#000000"><strong>4</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#d8b6fa"><font color="#000000"><div id="myText4" onMouseOver="this.innerHTML = vrandomImage();">Tool 4</div></font></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#fc9dc1"><font color="#000000"><strong>5</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#fc9dc1"><font color="#000000"><div id="myText5" onMouseOver="this.innerHTML = rrandomImage();">Tool 5</div></font></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#fabe83"><font color="#000000"><strong>6</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#fabe83"><font color="#000000"><div id="myText6" onMouseOver="this.innerHTML = orandomImage();">Tool 6</div></font></td>
</tr>

<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#CCCCCC"><font color="#000000"><strong>7</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#CCCCCC"><font color="#000000"><div id="myText7" onMouseOver="this.innerHTML = srandomImage();">Tool 7</div></font></td>
</tr>
<tr>
<td align="left" valign="middle">&nbsp;</td>
<td align="left" valign="middle">&nbsp;</td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#FFBD59"><font color="#000000"><strong>8</strong></font></td>
<td height="25" align="left" valign="middle" bgcolor="#FFBD59"><font color="#000000"><div id="myText8" onMouseOver="this.innerHTML = arandomImage();">Tool 8</div></font></td>
</tr>
</tbody>
</table>


<map name="myImage0Map">
<area shape="poly" coords="441,146,298,21,246,77" href="#" onMouseOver="CngText('myText2',brandomImage());" onmouseout="CngText('myText2');" >
<area shape="poly" coords="37,220,222,45,149,4,10,142" href="#" onMouseOver="CngText('myText1',yrandomImage());" onmouseout="CngText('myText1');" >
<area shape="poly" coords="312,144,293,108,169,198,166,247" href="#" onMouseOver="CngText('myText3',grandomImage());" onmouseout="CngText('myText3');" >
<area shape="poly" coords="435,223,417,188,258,263,254,290" href="#" onMouseOver="CngText('myText7',srandomImage());" onmouseout="CngText('myText7');" >
<area shape="poly" coords="158,324,123,243,14,298,19,337" href="#" onMouseOver="CngText('myText5',rrandomImage());" onmouseout="CngText('myText5');" >
<area shape="poly" coords="201,340,240,245,216,243,167,340" href="#" onMouseOver="CngText('myText6',orandomImage());" onmouseout="CngText('myText6');" >
<area shape="poly" coords="360,178,344,152,253,211,276,220" href="#" onMouseOver="CngText('myText4',vrandomImage());" onmouseout="CngText('myText4');" >

<area shape="poly" coords="415,308,382,265,319,331,347,361" href="#" onMouseOver="CngText('myText8',arandomImage());" onmouseout="CngText('myText8');" >
</map>
</body></html>