Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: Multiple Random Images in specific field

  1. #1
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default Multiple Random Images in specific field

    I am working on this script here:

    Code:
    <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.
    Last edited by djr33; 10-11-2012 at 03:44 PM. Reason: added [code] tags

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    There could also be other problems but the code keeps going (3 times):

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    rollover = 'whatever';
    and later:

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

    Code:
    rollover1 = 'whatever';
    and:

    Code:
    rollover2 = 'something else';
    then you have both values available to work with in the code.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Jay Dog (10-13-2012)

  6. #5
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    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!

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #7
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    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/2...s_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.

  9. #8
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    ha ha... is ****ed the shortened name for Richard... crazy!

  10. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Jay Dog View Post
    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:

    dick

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

    BTW, that pyramid makes me feel like I need nap. Why are those things so boring?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    keyboard (10-13-2012)

  12. #10
    Join Date
    Oct 2012
    Location
    England
    Posts
    98
    Thanks
    27
    Thanked 2 Times in 1 Post

    Default

    Well I re-did the code, started afresh and came up with this:

    Code:
    <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
    Last edited by jscheuer1; 10-15-2012 at 02:19 PM. Reason: Format

Similar Threads

  1. Random Image Rotation - Multiple Images
    By claireym in forum PHP
    Replies: 21
    Last Post: 09-24-2011, 12:38 AM
  2. Replies: 0
    Last Post: 02-02-2011, 10:44 AM
  3. Form field check for specific input
    By codeparrot in forum JavaScript
    Replies: 4
    Last Post: 01-15-2011, 05:22 AM
  4. Comveyor Belt script / random images and multiple images
    By MangledPuppy in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 07-30-2008, 01:31 PM
  5. How do you set focus on a specific field?
    By Dance10Looks10 in forum HTML
    Replies: 9
    Last Post: 09-08-2005, 12:37 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •