How can I make two random words appear by going over just one piece of text?

**Jay Dog** · 06-03-2013, 09:03 AM

Hi,

I have been playing with the random question generator and what I want is for it to be able to pick a childs name at random and also pick a question at random, I have done it so far but what I want is instead of it being two pieces of text I have to roll over, is it possible to just have one and they make BOTH the name and the country appear? I've been playing with this but so far not found a solution.

Thanks.

This is the code:

Code:

<html>
<head>
<script language="JAVASCRIPT">



<!--

function pupilsname() {
pic = new Array();
 pic = new Array();
 pic[0] = "Adam Arnold";
 pic[1] = "Brenda Beeston";
 pic[2] = "Carl Carlton";
 pic[3] = "Deborah Daybrook";
 pic[4] = "Eric Eastwood";
 pic[6] = "Francis Findern";
 pic[7] = "Greg Grantham";
 pic[8] = "Hilda Heanor";
 pic[9] = "Ian Ilkeston";
 pic[10] = "Jenny Japan";
 pic[11] = "Keith Kimberley";
 pic[12] = "Lucy London";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }

// -->



<!--

function pupilsname2() {
pic = new Array();
 pic = new Array();
 pic[0] = "Australia";
 pic[1] = "Belgium";
 pic[2] = "China";
 pic[3] = "Denmark";
 pic[4] = "Estonia";
 pic[6] = "France";
 pic[7] = "Greece";
 pic[8] = "Hungary";
 pic[9] = "India";
 pic[10] = "Japan";
 pic[11] = "Korea";
 pic[12] = "Lithuania";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }

// -->



<!--

function tools() {
pic = new Array();
 pic = new Array();
 pic[0] = "Pick a name from the hat";

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

// -->



</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<center>
  <table width="80%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="left" valign="top" bgcolor="#FFFFFFF"><table width="99%" height="220" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="60" colspan="2" align="center" valign="middle" bgcolor="#FFFFFF"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" valign="middle"><font size="6" color="#000000"><strong>Big Wood School Random Name Generator</strong></font></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td width="50%" rowspan="2" align="center" valign="middle" bgcolor="#FFFFFF"><p> <a href="#"
onMouseOver="document.getElementById('myText1').innerHTML = pupilsname() ;"  onMouseOut="document.getElementById('myText1').innerHTML = tools() ;""><font size="3"><font size=5><strong>Pick a pupil</strong></font></a>
                </li>
              </p>
              <p> <a href="#"
onMouseOver="document.getElementById('myText2').innerHTML = pupilsname2() ;"  onMouseOut="document.getElementById('myText2').innerHTML = tools() ;""><font size="3"><font size=5><strong>Pick a Country</strong></font></a>
                </li>
              </p></td>
            <td width="50%" bgcolor="#FFFFFF">&nbsp;</td>
          </tr>
          <tr>
            <td align="left" valign="top" bgcolor="#FFFFFF"><font size="6" color="#000000">
              <div id="myText1" onMouseOver="this.innerHTML = originaltext();">Pick a name from the hat</div>
              <div id="myText2" onMouseOver="this.innerHTML = originaltext();">Pick a country from the hat</div>
              </font></td>
          </tr>
      </table></td>
    </tr>
  </table>
</center>
</body>
</html>

**Jay Dog** · 06-03-2013, 10:02 AM

Ha!

Worked it out!

Code:

<html>
<head>
<script language="JAVASCRIPT">



<!--

function green1() {
pic = new Array();
 pic = new Array();
 pic[0] = "Greg";
 pic[1] = "Graham";
 pic[2] = "Georgina";
 pic[3] = "Gillian";

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

// -->



<!--

function green2() {
pic = new Array();
 pic = new Array();
 pic[0] = "Germany";
 pic[1] = "Greece";

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

// -->

<!--

function orange1() {
pic = new Array();
 pic = new Array();
 pic[0] = "Oliver";
 pic[1] = "Olivia";
 pic[2] = "Otto";
 pic[3] = "Oscar";

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

// -->

<!--

function orange2() {
pic = new Array();
 pic = new Array();
 pic[0] = "Oslo";
 pic[1] = "October";
 pic[2] = "Otter";
 pic[3] = "Ottoman";

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

// -->

<!--

function yellow1() {
pic = new Array();
 pic = new Array();
 pic[0] = "Yvonne";
 pic[1] = "Ygor";
 pic[2] = "Yvette";
 pic[3] = "Yusif";

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

// -->

<!--

function yellow2() {
pic = new Array();
 pic = new Array();
 pic[0] = "Yo Yo";
 pic[1] = "Yugoslavia";
 pic[2] = "Yesterday";
 pic[3] = "Yipee";

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

// -->

<!--

function blue1() {
pic = new Array();
 pic = new Array();
 pic[0] = "Billy";
 pic[1] = "Barry";
 pic[2] = "Brenda";
 pic[3] = "Bonnie";

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

// -->

<!--

function blue2() {
pic = new Array();
 pic = new Array();
 pic[0] = "Belgium";
 pic[1] = "Barnsley";
 pic[2] = "Beethoven";
 pic[3] = "Bitumen";

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

// -->

<!--

function purple1() {
pic = new Array();
 pic = new Array();
 pic[0] = "Peter";
 pic[1] = "Penny";
 pic[2] = "Patrick";
 pic[3] = "Paula";

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

// -->

<!--

function purple2() {
pic = new Array();
 pic = new Array();
 pic[0] = "Poland";
 pic[1] = "Peterborough";
 pic[2] = "Paris";
 pic[3] = "Peru";

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

// -->

<!--

function red1() {
pic = new Array();
 pic = new Array();
 pic[0] = "Ronald";
 pic[1] = "Reg";
 pic[2] = "Rita";
 pic[3] = "Ruth";

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

// -->

<!--

function red2() {
pic = new Array();
 pic = new Array();
 pic[0] = "Russia";
 pic[1] = "Ripley";
 pic[2] = "Risley";
 pic[3] = "Rwanda";

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

// -->

<!--

function tools() {
pic = new Array();
 pic = new Array();
 pic[0] = "Pupil";

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

// -->

<!--

function tools2() {
pic = new Array();
 pic = new Array();
 pic[0] = "Question";

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

// -->



</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<center>
  <table width="80%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="left" valign="top" bgcolor="#FFFFFFF"><table width="99%" height="220" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="60" align="center" valign="middle" bgcolor="#FFFFFF"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" valign="middle"><font size="6" color="#000000"><strong>Big Wood School Random Name Generator</strong></font></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td align="center" valign="middle" bgcolor="#FFFFFF"><p><font size="3">
              </li>
              </p>              <font size="6" color="#000000">
              <div id="myText1" onMouseOver="this.innerHTML = originaltext();">Pupils Name</div>
              <div id="myText2" onMouseOver="this.innerHTML = originaltext();">Question</div>
            </font></td>
          </tr>
      </table></td>
    </tr>
  </table>
  <table width="77%" border="0">
    <tr>
      <td width="16%" align="center" valign="middle"><a href="#"
onMouseOver="document.getElementById('myText1').innerHTML = green1() ;"  onMouseOut="document.getElementById('myText1').innerHTML = tools() ;""><img src="greenhat.png" border="0" class="shakeimage" onMouseOver="document.getElementById('myText2').innerHTML = green2() ;"  onMouseOut="document.getElementById('myText2').innerHTML = tools2() ;""></a></td>
      <td width="16%" align="center" valign="middle"><a href="#"
onMouseOver="document.getElementById('myText1').innerHTML = orange1() ;"  onMouseOut="document.getElementById('myText1').innerHTML = tools() ;""><img src="orangehat.png" border="0" class="shakeimage" onMouseOver="document.getElementById('myText2').innerHTML = orange2() ;"  onMouseOut="document.getElementById('myText2').innerHTML = tools2() ;""></a></td>
      <td width="16%" align="center" valign="middle"><a href="#"
onMouseOver="document.getElementById('myText1').innerHTML = yellow1() ;"  onMouseOut="document.getElementById('myText1').innerHTML = tools() ;""><img src="yellowhat.png" border="0" class="shakeimage" onMouseOver="document.getElementById('myText2').innerHTML = yellow2() ;"  onMouseOut="document.getElementById('myText2').innerHTML = tools2() ;""></a></td>
      <td width="16%" align="center" valign="middle"><a href="#"
onMouseOver="document.getElementById('myText1').innerHTML = blue1() ;"  onMouseOut="document.getElementById('myText1').innerHTML = tools() ;""><img src="bluehat.png" border="0" class="shakeimage" onMouseOver="document.getElementById('myText2').innerHTML = blue2() ;"  onMouseOut="document.getElementById('myText2').innerHTML = tools2() ;""></a></td>
      <td width="16%" align="center" valign="middle"><a href="#"
onMouseOver="document.getElementById('myText1').innerHTML = purple1() ;"  onMouseOut="document.getElementById('myText1').innerHTML = tools() ;""><img src="purplehat.png" border="0" class="shakeimage" onMouseOver="document.getElementById('myText2').innerHTML = purple2() ;"  onMouseOut="document.getElementById('myText2').innerHTML = tools2() ;""></a></td>
      <td width="20%" align="center" valign="middle"><a href="#"
onMouseOver="document.getElementById('myText1').innerHTML = red1() ;"  onMouseOut="document.getElementById('myText1').innerHTML = tools() ;""><img src="redhat.png" border="0" class="shakeimage" onMouseOver="document.getElementById('myText2').innerHTML = red2() ;"  onMouseOut="document.getElementById('myText2').innerHTML = tools2() ;""></a></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</center>
</body>
</html>

But how can I make the DIV's with the name and country chnage colour according to each hat they roll over?

I did do something based on a previous problem using this :

Code:

<a href="#"
 onMouseOver="rollover(blue,'blue');">

But can't seem to get them to marry.

Thanks

**jscheuer1** · 06-03-2013, 10:48 AM

Please enclose code in:

[CODE]
code goes here
[/CODE]

tags so it looks like so:

Code:

code goes here

Thanks.

For this time, I've already done this for your posts above in this thread.

You may use the editor's # button (not the #i button) to generate the tags. Or just type them manually into the editor. If typing them, don't forget to use the square brackets and also to use the / in the closing tag. Type exactly as shown in the above example.

That said, here's a solution to the first question, I was typing it while you were adding the second question:

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function rand2el(arr, id){
	var randomNum = Math.floor(Math.random()*arr.length);
	document.getElementById(id).innerHTML = arr[randomNum];
}

 var pupilname = [];
 pupilname[0] = "Adam Arnold";
 pupilname[1] = "Brenda Beeston";
 pupilname[2] = "Carl Carlton";
 pupilname[3] = "Deborah Daybrook";
 pupilname[4] = "Eric Eastwood";
 pupilname[5] = "Wesley Westwood";
 pupilname[6] = "Francis Findern";
 pupilname[7] = "Greg Grantham";
 pupilname[8] = "Hilda Heanor";
 pupilname[9] = "Ian Ilkeston";
 pupilname[10] = "Jenny Japan";
 pupilname[11] = "Keith Kimberley";
 pupilname[12] = "Lucy London";

 var place = [];
 place[0] = "Australia";
 place[1] = "Belgium";
 place[2] = "China";
 place[3] = "Denmark";
 place[4] = "Estonia";
 place[5] = "Luxembourg";
 place[6] = "France";
 place[7] = "Greece";
 place[8] = "Hungary";
 place[9] = "India";
 place[10] = "Japan";
 place[11] = "Korea";
 place[12] = "Lithuania";
 
</script>
</head>
<body>
<center>
  <table width="80%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="left" valign="top" bgcolor="#FFFFFFF"><table width="99%" height="220" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="60" colspan="2" align="center" valign="middle" bgcolor="#FFFFFF"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" valign="middle"><font size="6" color="#000000"><strong>Big Wood School Random Name Generator</strong></font></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td width="50%" rowspan="2" align="center" valign="middle" bgcolor="#FFFFFF"><p> <a href="#"
onmouseover="rand2el(pupilname, 'myText1'); rand2el(place, 'myText2');"  onmouseout="rand2el(['Pick a name from the hat'], 'myText1'); rand2el(['Pick a country from the hat'], 'myText2');"><font size="3"><font size=5><strong>Pick</strong></font></a>
                </li>
              </p>
</td>
            <td width="50%" bgcolor="#FFFFFF">&nbsp;</td>
          </tr>
          <tr>
            <td align="left" valign="top" bgcolor="#FFFFFF"><font size="6" color="#000000">
              <div id="myText1">Pick a name from the hat</div>
              <div id="myText2">Pick a country from the hat</div>
              </font></td>
          </tr>
      </table></td>
    </tr>
  </table>
</center>
</body>
</html>

**vwphillips** · 06-03-2013, 11:18 AM

Code:

function RollOver(id,txt,col){
 var obj=document.getElementById(id);
 obj.innerHTML=txt;
 obj.style.color=col;
}

Code:

<a href="#">
 <img src="greenhat.png" border="0" class="shakeimage" onMouseOver="RollOver('myText1',green1(),'red');RollOver('myText2',green2(),'red');" onMouseOut="RollOver('myText1',tools(),'green') ;RollOver('myText2',tools2(),'green') ;">
 </a>

also check your code you have a number of double "

**jscheuer1** · 06-03-2013, 02:50 PM

For the second question, this works:

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript">

function rand2el(arr, id){
	var randomNum = Math.floor(Math.random()*arr.length), el = document.getElementById(id);
	el.innerHTML = arr[randomNum];
	el.style.color = arr.color || '';
}

 var pupilname1 = [];
 pupilname1[0] = "Greg";
 pupilname1[1] = "Graham";
 pupilname1[2] = "Georgina";
 pupilname1[3] = "Gillian";
 pupilname1.color = 'green';

 var place1 = [];
 place1[0] = "Germany";
 place1[1] = "Greece";
 place1.color = 'green';

 var pupilname2 = [];
 pupilname2[0] = "Oliver";
 pupilname2[1] = "Olivia";
 pupilname2[2] = "Otto";
 pupilname2[3] = "Oscar";
 pupilname2.color = 'orange';

 var place2 = [];
 place2[0] = "Oslo";
 place2[1] = "October";
 place2[2] = "Otter";
 place2[3] = "Ottoman";
 place2.color = 'orange';

 var pupilname3 = [];
 pupilname3[0] = "Yvonne";
 pupilname3[1] = "Ygor";
 pupilname3[2] = "Yvette";
 pupilname3[3] = "Yusif";
 pupilname3.color = 'yellow';

 var place3 = [];
 place3[0] = "Yo Yo";
 place3[1] = "Yugoslavia";
 place3[2] = "Yesterday";
 place3[3] = "Yipee";
 place3.color = 'yellow';

 var pupilname4 = [];
 pupilname4[0] = "Billy";
 pupilname4[1] = "Barry";
 pupilname4[2] = "Brenda";
 pupilname4[3] = "Bonnie";
 pupilname4.color = 'blue';

 var place4 = [];
 place4[0] = "Belgium";
 place4[1] = "Barnsley";
 place4[2] = "Beethoven";
 place4[3] = "Bitumen";
 place4.color = 'blue';

 var pupilname5 = [];
 pupilname5[0] = "Peter";
 pupilname5[1] = "Penny";
 pupilname5[2] = "Patrick";
 pupilname5[3] = "Paula";
 pupilname5.color = 'purple';

 var place5 = [];
 place5[0] = "Poland";
 place5[1] = "Peterborough";
 place5[2] = "Paris";
 place5[3] = "Peru";

 place5.color = 'purple';

 var pupilname6 = [];
 pupilname6[0] = "Ronald";
 pupilname6[1] = "Reg";
 pupilname6[2] = "Rita";
 pupilname6[3] = "Ruth";
 pupilname6.color = 'red';

 var place6 = [];
 place6[0] = "Russia";
 place6[1] = "Ripley";
 place6[2] = "Risley";
 place6[3] = "Rwanda";
 place6.color = 'red';


 var tools = [];
 tools[0] = "Pupil";

 var tools2 = [];
 tools2[0] = "Question";

</script>
</head>
<body>
<center>
  <table width="80%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="left" valign="top" bgcolor="#FFFFFFF"><table width="99%" height="220" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="60" align="center" valign="middle" bgcolor="#FFFFFF"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" valign="middle"><font size="6" color="#000000"><strong>Big Wood School Random Name Generator</strong></font></td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td align="center" valign="middle" bgcolor="#FFFFFF"><p><font size="3">
              </li>
              </p>              <font size="6" color="#000000">
              <div id="myText1">Pupils Name</div>
              <div id="myText2">Question</div>
            </font></td>
          </tr>
      </table></td>
    </tr>
  </table>
  <table width="77%" border="0">
    <tr>
      <td width="16%" align="center" valign="middle"><a href="#"
onmouseover="rand2el(pupilname1, 'myText1'); rand2el(place1, 'myText2');" onmouseout="rand2el(tools, 'myText1'); rand2el(tools2, 'myText2');"><img src="greenhat.png" border="0" class="shakeimage"></a></td>
      <td width="16%" align="center" valign="middle"><a href="#"
onmouseover="rand2el(pupilname2, 'myText1'); rand2el(place2, 'myText2');" onmouseout="rand2el(tools, 'myText1'); rand2el(tools2, 'myText2');"><img src="orangehat.png" border="0" class="shakeimage"></a></td>
      <td width="16%" align="center" valign="middle"><a href="#"
onmouseover="rand2el(pupilname3, 'myText1'); rand2el(place3, 'myText2');" onmouseout="rand2el(tools, 'myText1'); rand2el(tools2, 'myText2');"><img src="yellowhat.png" border="0" class="shakeimage"></a></td>
      <td width="16%" align="center" valign="middle"><a href="#"
onmouseover="rand2el(pupilname4, 'myText1'); rand2el(place4, 'myText2');" onmouseout="rand2el(tools, 'myText1'); rand2el(tools2, 'myText2');"><img src="bluehat.png" border="0" class="shakeimage"></a></td>
      <td width="16%" align="center" valign="middle"><a href="#"
onmouseover="rand2el(pupilname5, 'myText1'); rand2el(place5, 'myText2');" onmouseout="rand2el(tools, 'myText1'); rand2el(tools2, 'myText2');"><img src="purplehat.png" border="0" class="shakeimage"></a></td>
      <td width="20%" align="center" valign="middle"><a href="#"
onmouseover="rand2el(pupilname6, 'myText1'); rand2el(place6, 'myText2');" onmouseout="rand2el(tools, 'myText1'); rand2el(tools2, 'myText2');"><img src="redhat.png" border="0" class="shakeimage"></a></td>
    </tr>
  </table>
  <p>&nbsp;</p>
</center>
</body>
</html>

Thread: How can I make two random words appear by going over just one piece of text?

Thread Tools

Search Thread

How can I make two random words appear by going over just one piece of text?

Similar Threads

centre a piece of text within a div

Changing Dynamically Words in Text

Display Random Words

delete a piece of text from a file...

scan a page for a piece of text

Bookmarks

Bookmarks

Posting Permissions