PDA

View Full Version : Random image rollover change from specific list of images



Jay Dog
01-24-2013, 01:49 PM
OK so this is an adaption of a previous bit of code that I have been working on with the help of some of the members here but in this instance what I want is a map of the school and you roll over a specific area and it gives you a random photograph of activities that happen in that area, for example I roll over the blue section and I get a random image from the blue collection of pictures only, I roll over the green section and I ONLY get images from the green collection of pictures and so on.

This is the original Blooms triangle, this works fine, but what I would like to have is instead of a list of several images on the right hand side, for it to be only ONE image that can change BUT the random image must come from a specific collection as discussed above.

Any help would be greatly appreciated. Thanks.

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

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

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;
}

// -->

<!--

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

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


return newImage;
}

// -->

<!--

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

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


return newImage;
}

// -->

<!--

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

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


return newImage;
}

// -->

<!--

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

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


return newImage;
}


// -->

<!--

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

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


return newImage;
}

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

Jay Dog
01-24-2013, 03:04 PM
ha ha! I think I have cracked it. I will put up the final code once it is complete!:D