Results 1 to 2 of 2

Thread: Random image rollover change from specific list of images

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

    Default Random image rollover change from specific list of images

    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>

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

    Default

    ha ha! I think I have cracked it. I will put up the final code once it is complete!

Similar Threads

  1. Multiple Random Images in specific field
    By Jay Dog in forum JavaScript
    Replies: 13
    Last Post: 10-16-2012, 09:25 AM
  2. Random Image Load with image specific hovers (rollovers)
    By PhoenixDigitalMedia in forum JavaScript
    Replies: 3
    Last Post: 06-01-2011, 04:29 AM
  3. Multiple Images Change on Rollover
    By Abbster22 in forum Looking for such a script or service
    Replies: 2
    Last Post: 10-02-2010, 08:33 PM
  4. how do you to start on specific image & then random
    By sussery in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-18-2010, 12:40 AM
  5. Random Image with Specific Links
    By Sachmet in forum JavaScript
    Replies: 2
    Last Post: 03-09-2009, 10:22 PM

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
  •