Log in

View Full Version : Multiple Random Images in specific field


Jay Dog
10-11-2012, 03:05 PM
I am working on this script here:


<html><head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="GoLive CyberStudio 3">
<title>random rollover </title>
<script language="JavaScript"><!--
// javascript random rollover
// tom

roller= new Array()
roller[1]= new Image
roller[1].src ='blue tom.jpg'
roller[2]= new Image
roller[2].src ='green tom.jpg'
roller[3]= new Image
roller[3].src ='red tom.jpg'


showthis=0 //prepares the repeat-preventing variable

function TomRandomSwapOut() {

//the next three lines help prevent repeating images

oldroller = new Array()
oldroller[2] = oldroller[1]
oldroller[1] = showthis

//the next line chooses the number to use in selecting the image

showthis = parseInt((Math.random()*(roller.length-1))+1);

//the next two lines help prevent repeating images

if (showthis == oldroller[1]) {TomRandomSwapOut();}
if (showthis == oldroller[2]) {TomRandomSwapOut();}

//the next line replaces the image with the new, random image

document.dice.src = roller[showthis].src; return true;
}


function SwapBack() {
document.dice.src = "ask me.jpg"; return true;
}
// -->
</script>


<script language="JavaScript"><!--
// javascript random rollover
// ****

roller= new Array()
roller[1]= new Image
roller[1].src ='blue ****.jpg'
roller[2]= new Image
roller[2].src ='green ****.jpg'
roller[3]= new Image
roller[3].src ='red ****.jpg'


showthis=0 //prepares the repeat-preventing variable

function DickRandomSwapOut() {

//the next three lines help prevent repeating images

oldroller = new Array()
oldroller[2] = oldroller[1]
oldroller[1] = showthis

//the next line chooses the number to use in selecting the image

showthis = parseInt((Math.random()*(roller.length-1))+1);

//the next two lines help prevent repeating images

if (showthis == oldroller[1]) {DickRandomSwapOut();}
if (showthis == oldroller[2]) {DickRandomSwapOut();}

//the next line replaces the image with the new, random image

document.dice.src = roller[showthis].src; return true;
}


function SwapBack() {
document.dice.src = "ask me.jpg"; return true;
}
// -->
</script>


<script language="JavaScript"><!--
// javascript random rollover
// harry

roller= new Array()
roller[1]= new Image
roller[1].src ='blue harry.jpg'
roller[2]= new Image
roller[2].src ='green harry.jpg'
roller[3]= new Image
roller[3].src ='red harry.jpg'


showthis=0 //prepares the repeat-preventing variable

function HarryRandomSwapOut() {

//the next three lines help prevent repeating images

oldroller = new Array()
oldroller[2] = oldroller[1]
oldroller[1] = showthis

//the next line chooses the number to use in selecting the image

showthis = parseInt((Math.random()*(roller.length-1))+1);

//the next two lines help prevent repeating images

if (showthis == oldroller[1]) {HarryRandomSwapOut();}
if (showthis == oldroller[2]) {HarryRandomSwapOut();}

//the next line replaces the image with the new, random image

document.dice.src = roller[showthis].src; return true;
}


function SwapBack() {
document.dice.src = "ask me.jpg"; return true;
}
// -->
</script>




</head><body><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td width="50%" align="center" valign="middle" bgcolor="#FFFFFF">












<center>
<p><font size="5" color="#000000"><strong>Blooms Question Generator</strong></font></p>
<p>&nbsp; </p>










</center></td>
<td width="50%" align="center" valign="middle" bgcolor="#FFFFFF"><p>&nbsp;</p>
<p></p></td>
</tr>
</tbody></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="36%"><img src="tom **** harry.jpg" width="400" height="300" border="0" usemap="#Map"></td>
<td width="64%"><p><a href="#" onMouseOver="TomRandomSwapOut()" onMouseOut="SwapBack()"><img name="dice" src="ask me.jpg" border="0"></a> </p>
<p>&nbsp;</p></td>
</tr>
</table>
<p>&nbsp;</p>

<map name="Map">
<area shape="poly" coords="324,291,299,264,238,236,264,157,242,114,174,112,158,161,155,214,145,235,75,261,60,289" href="****" onMouseOver="DickRandomSwapOut()" onMouseOut="SwapBack()">
<area shape="poly" coords="336,292,317,270,298,255,298,209,283,186,284,174,276,141,300,115,342,99,374,124,383,153,387,181,383,220,375,242,381,251,393,254,388,289" href="harry" onMouseOver="HarryRandomSwapOut()" onMouseOut="SwapBack()">
<area shape="poly" coords="127,234,122,203,135,186,135,170,129,160,139,132,119,98,79,95,35,97,40,106,24,122,30,161,33,192,48,217,59,237,57,256,45,275,19,292,45,290,68,255" href="tom" onMouseOver="TomRandomSwapOut()" onMouseOut="SwapBack()">
</map>
</body></html>


The problem is that I want it so that when I roll over Tom, I ONLY get a random image from Toms part, similarly with **** and Harry. The problem I have is that I only get them from Harry's directory.

The URL is a specific intra-net one and I'm not sure if you can see it unless you're a member of our school.
jscheuer1
10-12-2012, 01:00 AM
There could also be other problems but the code keeps going (3 times):



roller= new Array()

Each time it does this, the roller array previously declared is overwritten. Since Harry's array is the last, that's all you're left with.
Jay Dog
10-12-2012, 01:35 PM
Is there a way to rectify this?

It's to generate a range of questions within a specific field, this is only a prototype.

I mean that you will have upto 10 subjects and you roll over each subject title or hot spot and a range of questions come up randomly from a bit where the questions for 'Evaluation' etc. are stored.
jscheuer1
10-12-2012, 03:22 PM
I'm not about to write your code for you as this looks too much like a homework assignment.

But yes. The overall code exhibits a tendency towards repetition. Things could be consolidated. Even without that, if instead of three mutually exclusive declarations of a single rollover variable, if it had three separate rollover arrays, then these images could be kept separate.

In simplest terms, if you go:


rollover = 'whatever';

and later:


rollover = 'something else';

You will end up with rollover equal to 'something else'. The original value is lost. But if you have:


rollover1 = 'whatever';

and:


rollover2 = 'something else';

then you have both values available to work with in the code.
Jay Dog
10-12-2012, 03:35 PM
Homework assignment? I'm 42 :)
But thanks, I was thinking it was something along those lines. I'll have a play with it next week, cheers!
jscheuer1
10-12-2012, 03:49 PM
It's never too late to go back to school :)

But my comment about a homework assignment is also valid from the point of view of the code. It's extremely generic. If you have something specific you're actually working on for the web, give me a link to the page and I'll see what I can do for you.
Jay Dog
10-13-2012, 08:03 PM
Thanks John, the problem is that the code is for something called 'Blooms Questions' which is basically asking certain children specific questions from a specific range based on their ability. Less able children should be able to answer questions that are 'easier' whereas more able children answer more complex ones.

I'm going to use an image like this: http://juliaec.files.wordpress.com/2011/04/blooms_taxonomy.jpg

And HotSpot the triangle similar to my Tom, **** and Harry sample.

The page will be on the school Intranet and visible to only staff and pupils of our school... however, I may be able to put it online through the official school website.

I'll have a play with the code an dif it still doesn't work I'll let you know. Thanks and have a great weekend.;)
Jay Dog
10-13-2012, 08:04 PM
ha ha... is ****ed the shortened name for Richard... crazy!
jscheuer1
10-13-2012, 08:44 PM
ha ha... is ****ed the shortened name for Richard... crazy!

I'm not sure what you're asking, but probably yes. **** is not allowed for what I think would be obvious reasons, though it's a little bit of a gray area in my opinion. Those in the know can post it though:

****

It's funny because you can post penis, but not **** or ****.

BTW, that pyramid makes me feel like I need nap. Why are those things so boring?
Jay Dog
10-15-2012, 01:54 PM
Well I re-did the code, started afresh and came up with this:


<html>
<head>
<title>Untitled</title>

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

function yrandomImage() {
pic = new Array();
pic[0] = 'yellow who.png';
pic[1] = 'yellow what.png';
pic[2] = 'yellow where.png';
pic[3] = 'yellow why.png';
pic[4] = 'yellow when.png';

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


return newImage;
}

// -->

<!--

function brandomImage() {
pic = new Array();
pic[0] = 'blue who.png';
pic[1] = 'blue what.png';
pic[2] = 'blue where.png';
pic[3] = 'blue why.png';
pic[4] = 'blue when.png';

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


return newImage;
}

// -->

<!--

function vrandomImage() {
pic = new Array();
pic[0] = 'violet who.png';
pic[1] = 'violet what.png';
pic[2] = 'violet where.png';
pic[3] = 'violet why.png';
pic[4] = 'violet when.png';

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


return newImage;
}

// -->

<!--

function rrandomImage() {
pic = new Array();
pic[0] = 'red who.png';
pic[1] = 'red what.png';
pic[2] = 'red where.png';
pic[3] = 'red why.png';
pic[4] = 'red when.png';

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


return newImage;
}

// -->

<!--

function grandomImage() {
pic = new Array();
pic[0] = 'green who.png';
pic[1] = 'green what.png';
pic[2] = 'green where.png';
pic[3] = 'green why.png';
pic[4] = 'green when.png';

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


return newImage;
}


// -->

<!--

function orandomImage() {
pic = new Array();
pic[0] = 'orange who.png';
pic[1] = 'orange what.png';
pic[2] = 'orange where.png';
pic[3] = 'orange why.png';
pic[4] = '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">
<tr>
<td width="463" height="377" rowspan="7" align="center" valign="middle"><img src="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="yellow.png" onMouseOver="this.src = yrandomImage();"></td>
</tr>
<tr>
<td height="55" align="left" valign="middle"><img name="myImage2" src="blue.png" onMouseOver="this.src = brandomImage();"></td>
</tr>
<tr>
<td height="54" align="left" valign="middle"><img name="myImage3" src="green.png" onMouseOver="this.src = grandomImage();"></td>
</tr>
<tr>
<td height="52" align="left" valign="middle"><img name="myImage4" src="violet.png" onMouseOver="this.src = vrandomImage();"></td>
</tr>
<tr>
<td height="52" align="left" valign="middle"><img name="myImage5" src="red.png" onMouseOver="this.src = rrandomImage();"></td>
</tr>
<tr>
<td height="57" align="left" valign="middle"><img name="myImage6" src="orange.png" onMouseOver="this.src = orandomImage();"></td>
</tr>
</table>


<map name="myImage0Map">
<area shape="poly" coords="275,110,216,13,159,110" href="#" onMouseOver="this.src = yrandomImage();">
</map>
</body>
</html>

Now then this does exactly what I wanted it to do, I have the Blooms Triangle and I have a range of images for each colour, I roll my mouse over a strip of corresponding colour (yellow.png etc.) and that initiates the random question image within the yellow range. Fine...

However... I want to go an extra bit here, I have made the top part of the triangle a hot spot but try as I might I simply can't get the hot spot on my triangle to act in the same way the yellow strip does. I know it's difficult without seeing the images but it's the coding for the hotspot that's got me beat, I've done it before for the other random one but for some reason that code won't work on this.

Any help'd be greatly appreciated.

Cheers,

J
jscheuer1
10-15-2012, 02:45 PM
OK, you could need a lot of triangle images. One for each possible state of the yellow zone. If you're going to do this with every zone, you will need many, many of these images, more so if you wish to preserve the rollover state of one zone when rolling over another. It boggles the mind. If you're only concerned about the yellow zone, it would be only 5 images for the 5 possibilities.

Now, you cannot change the src attribute of an image map's area tag. You can change the src attribute of its image. So instead of:


<area shape="poly" coords="275,110,216,13,159,110" href="#" onMouseOver="this.src = yrandomImage();">

You would have:


<area shape="poly" coords="275,110,216,13,159,110" href="#" onMouseOver="document.images.myImage0.src = yrandomImage();">

And instead of the current yrandomImage() function, you would have one that returns an otherwise identical triangle image with just the yellow zone changed.

A simpler option if you want to preserve the hotspot shapes and previous changes when changing subsequent zones requiring less images would be to instead of just one image map, have one for each zone, each with just one area tag. Stack them up to look like one image. Then swap out each one of them in the manner I just described. Or if you're not concerned with the shapes, you could just use one image for each zone and stack them up to look like the triangle and swap them in the same way you're swapping the current single images.
Jay Dog
10-15-2012, 09:09 PM
Sorry John, I'm a bit confused. I'll try to upload the code onto the website with the images, maybe it'll be easier to see it there. The triangle needs to stay the same, it's the ribbons that change but thanks anyway for your help.
jscheuer1
10-16-2012, 04:15 AM
I'm the one who was confused. I thought you wanted that section of the triangle image to change. If you just want the corresponding single image to change, that's quite a bit easier. Make it:


<area shape="poly" coords="275,110,216,13,159,110" href="#" onMouseOver="document.images.myImage1.src = yrandomImage();">
Jay Dog
10-16-2012, 09:25 AM
John, thank you very much, this is absolutely ideal! ;)