Results 1 to 3 of 3

Thread: Getting text to go back to original text when mouse out

  1. #1
    Join Date
    Oct 2012
    Location
    England
    Posts
    97
    Thanks
    26
    Thanked 2 Times in 1 Post

    Default Getting text to go back to original text when mouse out

    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>
    Last edited by keyboard; 01-23-2013 at 01:27 PM. Reason: Format: Html Tags [html][/html]

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    Jay Dog (01-24-2013)

  4. #3
    Join Date
    Oct 2012
    Location
    England
    Posts
    97
    Thanks
    26
    Thanked 2 Times in 1 Post

    Default

    OH MY! You are amazing!!!

    Thank you very much!

Similar Threads

  1. Mouse over text to image
    By BVFrontpage in forum Looking for such a script or service
    Replies: 5
    Last Post: 01-20-2013, 09:55 PM
  2. rich text editor displaying back from database
    By 1kky in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-15-2008, 08:47 AM
  3. Replies: 3
    Last Post: 09-19-2007, 09:56 AM
  4. Replies: 9
    Last Post: 08-11-2006, 08:14 PM
  5. rich text editor displaying back from database
    By tool in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-18-2006, 11:33 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •