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

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

Ha!

Worked it out!

Code:

<html> <head> <script language="JAVASCRIPT">               </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> </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

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

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 "

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> </p> </center> </body> </html>