Change images to text in random selection

**Jay Dog** · 01-07-2013, 02:37 PM

1) Script Title: Bloom's Taxonomy

2) Script URL (on DD):

http://www.bigwood.nottingham.sch.uk/VLE/test.html

3) Describe problem:

Hi,

This is a code I was working on last year and completed with the help from people here which I am very grateful for, however I want to be able to change it from being random images that appear when you roll over a specific colour in the pyramid to it being random text.

OK so imagine you have 6 hats and you can pick an image at random from each hat, red hat images are not the same as blue hat etc. instead of it being images, I'd like it to be text as it should be text and it's easier to put in rather than me making images in Photoshop everytime.

It would be cool if the text appeared in the table and I can set the table cell to have a red background for random red text and so on.

<html><head>
<title>Blooms Taxonomy</title>

<script language="JavaScript">











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

<table width="962" border="0" align="center">
<tbody><tr>
<td width="463" height="377" rowspan="7" align="center" valign="middle"><img src="http://www.bigwood.nottingham.sch.uk/VLE/triangle.png" name="myImage0" height="377" border="0" usemap="#myImage0Map"></td>
<td width="489" height="50" align="left" valign="bottom"><b><font face="Arial" size="5">Blooms Question Generator</font></b></td>
</tr>
<tr>
<td height="57" align="left" valign="middle"><img name="myImage1" src="http://www.bigwood.nottingham.sch.uk/VLE/yellow where.png" onMouseOver="this.src = yrandomImage();"></td>
</tr>
<tr>
<td height="55" align="left" valign="middle"><img name="myImage2" src="http://www.bigwood.nottingham.sch.uk/VLE/blue who.png" onMouseOver="this.src = brandomImage();"></td>
</tr>
<tr>
<td height="54" align="left" valign="middle"><img name="myImage3" src="http://www.bigwood.nottingham.sch.uk/VLE/green who.png" onMouseOver="this.src = grandomImage();"></td>
</tr>
<tr>
<td height="52" align="left" valign="middle"><img name="myImage4" src="http://www.bigwood.nottingham.sch.uk/VLE/violet when.png" onMouseOver="this.src = vrandomImage();"></td>
</tr>
<tr>
<td height="52" align="left" valign="middle"><img name="myImage5" src="http://www.bigwood.nottingham.sch.uk/VLE/red when.png" onMouseOver="this.src = rrandomImage();"></td>
</tr>
<tr>
<td height="57" align="left" valign="middle"><img name="myImage6" src="https://jupiter.inthehive.net/sites/bigwood/Departments/Blooms/orange who.png" onMouseOver="this.src = orandomImage();"></td>
</tr>
</tbody></table>

<map name="myImage0Map">
<area shape="poly" coords="275,110,216,13,159,110" href="#" onMouseOver="document.images.myImage1.src = yrandomImage();">
<area shape="poly" coords="306,168,281,121,151,122,128,167" href="#" onMouseOver="document.images.myImage2.src = brandomImage();">
<area shape="poly" coords="338,221,310,176,123,177,99,219" href="#" onMouseOver="document.images.myImage3.src = grandomImage();">
<area shape="poly" coords="367,270,339,225,93,227,70,268" href="#" onMouseOver="document.images.myImage4.src = vrandomImage();">
<area shape="poly" coords="396,320,368,275,66,275,42,316" href="#" onMouseOver="document.images.myImage5.src = rrandomImage();">
<area shape="poly" coords="423,371,398,326,35,327,12,373" href="#" onMouseOver="document.images.myImage6.src = orandomImage();">
</map>

</body></html>

As I have said, I need it to be text instead of yellow who.png etc. if that makes sense.

Many thanks,

Jay Dog

**jscheuer1** · 01-07-2013, 06:32 PM

Change your arrays so that they contain the desired text and their functions so that they return that text, for example:

Code:

function yrandomImage() {
 pic = new Array();
 pic[0] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow who.png';
 pic[1] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow what.png';
 pic[2] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow where.png';
 pic[3] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow why.png';
 pic[4] = 'http://www.bigwood.nottingham.sch.uk/VLE/yellow when.png';

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


 return newImage;
 }

could become:

Code:

function yrandomImage() {
 pic = new Array();
 pic[0] = "some text here";
 pic[1] = "some other text here";
 pic[2] = "some more text here";
 pic[3] = "some more other text here";
 pic[4] = "yet some more text here";
 
 randomNum = Math.floor(Math.random()*pic.length);
 
 return pic[randomNum];
 }

Then where you have:

Code:

onMouseOver="document.images.myImage1.src = yrandomImage();"

That can be:

Code:

onmouseover="document.getElementById('myText1').innerHTML = yrandomImage();"

And where you have:

Code:

<td height="57" align="left" valign="middle"><img name="myImage1" src="http://www.bigwood.nottingham.sch.uk/VLE/yellow where.png" onMouseOver="this.src = yrandomImage();"></td>

That can be:

Code:

<td height="57" align="left" valign="middle"><div id="myText1" onmouseover="this.innerHTML = yrandomImage();">some text here</div></td>

That's pretty much it. Do that with all of them and you should be set.

BTW, the code still exhibits a lot of unnecessary repetition. Like one randomizing function could service all arrays. And if the arrays are all the same, only one would be required.

Here's a demo:

http://home.comcast.net/~jscheuer1/side/blooms/demo.htm

On another front, you can rename the functions and arrays to reflect the fact that they're now text generators, not image generators. But that's just for clarity's sake, javascript doesn't care what they're called.

**Jay Dog** · 01-11-2013, 02:55 PM

Wow! That's amazing and I really love your mod of it. However, for some reason our font colour is defaulted to white on the Intranet and I've tried chnaging them all to black again but it won't allow me to.

I really appreciate your help and input but if it's a simple thing about the font colour, again your help would be greatly appreciated.

Many thanks.

**jscheuer1** · 01-11-2013, 04:33 PM

I've updated the demo to fix that. Make sure to refresh the page before viewing its updated source code:

http://home.comcast.net/~jscheuer1/side/blooms/demo.htm

I also made an advanced version:

http://home.comcast.net/~jscheuer1/s...ooms/demo2.htm

However, since I cannot see your intranet, I cannot know for sure what's causing the problem. The change I made should fix it. But if it doesn't, I will need to see the page or a copy of it that shows the problem in order to fix it. The live demo you put up would not have that problem, at least not as far as I can see.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Thread: Change images to text in random selection

Thread Tools

Search Thread

Change images to text in random selection

Similar Threads

Random Text colr Change

Text selection - change color - how to?

Random picture selection with links to different pages

Random Selection through PHP

Updated Style Sheet Switcher 1.1- need random selection

Bookmarks

Bookmarks

Posting Permissions