www.webdeveloper.com
+ Reply to Thread
Results 1 to 5 of 5
  1. 01-27-2007 04:51 PM #1
    kasi_jo's Avatar
    kasi_jo
    kasi_jo is offline Hi
    Join Date
    Jan 2007
    Posts
    4

    Smile Random Images (more than 1 and not the same)

    Hi All ,
    Hi everyone,

    I am trying to put multiple random images on one page but I run into the random image script coming up with the same images often. How can I modify this script so that the same image won't be displayed at the same time?

    Here are my scripts

    // JavaScript Document


    <!--
    //
    NumberOfImagesToRotate = 16;

    FirstPart1 = '<img src="images/p';
    LastPart1 = '.jpg" height="89" width="124">';

    function printImage1() {
    var r1 = Math.ceil(Math.random() * 16);
    document.write(FirstPart1 + r1 + LastPart1);
    }

    NumberOfImagesToRotate = 16;

    FirstPart2 = '<img src="images/p';
    LastPart2 = '.jpg" height="89" width="124">';

    function printImage2() {
    var r2 = Math.ceil(Math.random() * 16);

    document.write(FirstPart2 + r2 + LastPart2);
    }

    NumberOfImagesToRotate = 16;

    FirstPart3 = '<img src="images/p';
    LastPart3 = '.jpg" height="89" width="124">';

    function printImage3() {
    var r3 = Math.ceil(Math.random() * 16);
    document.write(FirstPart3 + r3 + LastPart3);
    }


    //


    I put these into the HTML like this:
    <td width="134" align="left" valign="top"><script type="text/javascript" language="JavaScript"><!--
    printImage1();
    //--></script>
    </a></td>
    <td width="134" align="left" valign="top"><script type="text/javascript" language="JavaScript"><!--
    printImage2();
    //--></script></td>
    <td align="left" valign="top"><script type="text/javascript" language="JavaScript"><!--
    printImage3();
    //--></script></td>



    Any help would be great!

    Thanks!
    Reply With Quote Reply With Quote
  2. 01-27-2007 05:25 PM #2
    vwphillips
    vwphillips is offline Super Moderator
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,550
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
var ImgPath='http://www.vicsjavascripts.org.uk/StdImages/';
var ImgAry =new Array('Zero.gif','One.gif','Two.gif','Three.gif','Four.gif','Five.gif');

function RandomImgs(){
 var imgary=ImgAry.randomise(ImgAry);
 var args=RandomImgs.arguments;
 var cnt=0;
 for (var zxc0=0;zxc0<args.length;zxc0++){
  document.getElementById(args[zxc0]).src=ImgPath+imgary[cnt];
  cnt=++cnt%imgary.length;
 }
}

Array.prototype.randomise=function(){
 zxccnt=0; zxcta=[];
 while (zxccnt<this.length){
  zxctmp=Math.floor(Math.random()*this.length-1)+1;
  if (!zxcta[zxctmp]){zxcta[zxctmp]=this[zxccnt]; zxccnt++; }
 }
 return zxcta;
}

//-->
</script>
</head>

<body onload="RandomImgs('Img1','Img2','Img3');">
<img id="Img1" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >

<img id="Img2" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
<img id="Img3" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >

</body>

</html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org.uk
    If my post has been useful please donate to http://www.operationsmile.org.uk/
    Reply With Quote Reply With Quote
  3. 01-28-2007 05:20 PM #3
    kasi_jo's Avatar
    kasi_jo
    kasi_jo is offline Hi
    Join Date
    Jan 2007
    Posts
    4
    but I don't want the browser to load all 16 of my images...
    Reply With Quote Reply With Quote
  4. 01-28-2007 06:59 PM #4
    felgall's Avatar
    felgall
    felgall is offline Computer Consultant
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,973
    This keeps your HTML and just grabs the image names from an array that gets randomized.

    Code:
    <script type="text/javascript">
var ImgAry =['Zero','One','Two','Three','Four','Five'];
function randOrd(){return (Math.round(Math.random())-0.5); } 
ImgAry.sort(randOrd);

FirstPart = '<img src="images/p';
LastPart = '.jpg" height="89" width="124">';
function printImage(n) {
document.write(FirstPart + ImgAry[n-1] + LastPart);
}
</script>
    Code:
    <td width="134" align="left" valign="top"><script type="text/javascript">printImage(1);</script>
</a></td>
<td width="134" align="left" valign="top"><script type="text/javascript">
printImage(2);
</script></td>
<td align="left" valign="top"><script type="text/javascript" >printImage(3);
</script></td>
    Stephen
    Reply With Quote Reply With Quote
  5. 06-16-2012 09:29 AM #5
    RaptorX
    RaptorX is offline Member
    Join Date
    Jun 2012
    Posts
    1
    Quote Originally Posted by felgall View Post
    This keeps your HTML and just grabs the image names from an array that gets randomized.

    Code:
    <script type="text/javascript">
var ImgAry =['Zero','One','Two','Three','Four','Five'];
function randOrd(){return (Math.round(Math.random())-0.5); } 
ImgAry.sort(randOrd);

FirstPart = '<img src="images/p';
LastPart = '.jpg" height="89" width="124">';
function printImage(n) {
document.write(FirstPart + ImgAry[n-1] + LastPart);
}
</script>
    Code:
    <td width="134" align="left" valign="top"><script type="text/javascript">printImage(1);</script>
</a></td>
<td width="134" align="left" valign="top"><script type="text/javascript">
printImage(2);
</script></td>
<td align="left" valign="top"><script type="text/javascript" >printImage(3);
</script></td>


    Hi there. Now if you would like to have one certain pic out of the array be linked to a website, how would one go about doing that?
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

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

Forum Rules

 HTML5 Development Center



Recent Articles