Web Analytics Made Easy - StatCounter Need a trick for my Array - CodingForum

Announcement

Collapse
No announcement yet.

Need a trick for my Array

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Need a trick for my Array

    I have made the following code to display an array of images in random order on a page, however, I can't think of a way to link a href tag to the corresponding image. I want to use these images as thumbnails that lead to html pages, but because the array is randomized, I can't match the hrefs to the srcs! Any ideas would save my life.

    heres the code.

    <html>
    <head>
    <title>test</test>

    <script language="javascript">
    function randOrd(){
    return (Math.round(Math.random())-0.5); }

    </script>
    </head>
    <body>
    <a href="http://www.google.com/logos/8th_birthday.gif"><img src="http://www.google.com/logos/8th_birthday.gif" name="0"></a>
    <a href="http://www.google.com/logos/7th_birthday.gif"><img src="http://www.google.com/logos/7th_birthday.gif" name="1"></a>
    <a href="http://www.google.com/logos/6th_birthday.gif"><img src="http://www.google.com/logos/6th_birthday.gif" name="2"></a>
    <a href="http://www.google.com/logos/5th_birthday.gif"><img src="http://www.google.com/logos/5th_birthday.gif" name="3"></a>
    <a href="http://www.google.com/logos/4th_birthday.gif"><img src="http://www.google.com/logos/4th_birthday.gif" name="4"></a>
    <a href="http://www.google.com/logos/3th_birthday.gif"><img src="http://www.google.com/logos/3th_birthday.gif" name="5"></a>
    <script language="javascript">


    var Iar = new Array();
    Iar[0] = "http://www.google.com/logos/8th_birthday.gif"
    Iar[1] = "http://www.google.com/logos/7th_birthday.gif"
    Iar[2] = "http://www.google.com/logos/6th_birthday.gif"
    Iar[3] = "http://www.google.com/logos/5th_birthday.gif"
    Iar[4] = "http://www.google.com/logos/4th_birthday.gif"
    Iar[5] = "http://www.google.com/logos/3th_birthday.gif"

    Iar.sort(randOrd)

    document[0].src=Iar[0]
    document[1].src=Iar[1]
    document[2].src=Iar[2]
    document[3].src=Iar[3]
    document[4].src=Iar[4]
    document[5].src=Iar[5]


    </script>

    </body>
    </html>
    Tags: None
  • #2
    Why don't you use a different way of randomizing?

    var condition = getTime()
    if(condition % 4 = 0){
    var condition2 = 1
    }else if(condition % 4 = 1){
    var condition2 = 2
    }else if(condition % 4 = 2){
    var condition2 = 3
    }else if(condition % 4 = 4){
    var condition2 = 4
    }

    This way, you could do an if statement, if(condition2 = 1), and then the images in any order you want. Then you could make the order in any way you want, although it may take a while, but you should use this if you can find a quicker way of doing it.
    var currentTime = new Date()
    var chance = currentTime.getTime()
    var chance2 = chance % 3
    alert(chance2)

    Comment

    • #3
      Interesting solution, but I want to be able to add values into the array later without having to recode. However, if I can't find a way that will def. work. Thanks.

      Comment

      • #4
        By the by, I'm pretty sure names and ids for HTML elements must begin with a character. Also, if you wrap your code in [ code][/code] tags, it will be easier for everyone to read.

        Just put an id in the same format on the anchors as you have on the images.

        Code:
        <html>
<head>
<title>test</test>

<script language="javascript">
function randOrd(){
return (Math.round(Math.random())-0.5); }
</script>
</head>
<body>
<a href="http://www.google.com/logos/8th_birthday.gif" id="a0"><img src="http://www.google.com/logos/8th_birthday.gif" id="i0"></a>
<a href="http://www.google.com/logos/7th_birthday.gif" id="a1"><img src="http://www.google.com/logos/7th_birthday.gif" id="i1"></a>
<a href="http://www.google.com/logos/6th_birthday.gif" id="a2"><img src="http://www.google.com/logos/6th_birthday.gif" id="i2"></a>
<a href="http://www.google.com/logos/5th_birthday.gif" id="a3"><img src="http://www.google.com/logos/5th_birthday.gif" id="i3"></a>
<a href="http://www.google.com/logos/4th_birthday.gif" id="a4"><img src="http://www.google.com/logos/4th_birthday.gif" i="i4"></a>
<a href="http://www.google.com/logos/3th_birthday.gif" id="a5"><img src="http://www.google.com/logos/3th_birthday.gif" id="i5"></a>
<script language="javascript">


var Iar = new Array();
Iar[0] = "http://www.google.com/logos/8th_birthday.gif"
Iar[1] = "http://www.google.com/logos/7th_birthday.gif"
Iar[2] = "http://www.google.com/logos/6th_birthday.gif"
Iar[3] = "http://www.google.com/logos/5th_birthday.gif"
Iar[4] = "http://www.google.com/logos/4th_birthday.gif"
Iar[5] = "http://www.google.com/logos/3th_birthday.gif"

Iar.sort(randOrd)

document.getElementById('i0').src=Iar[0];
document.getElementById('a0').href=Iar[0];
document.getElementById('i1').src=Iar[1];
document.getElementById('a1').href=Iar[1];
document.getElementById('i2').src=Iar[2];
document.getElementById('a2').href=Iar[2];
document.getElementById('i3').src=Iar[3];
document.getElementById('a3').href=Iar[3];
document.getElementById('i4').src=Iar[4];
document.getElementById('a4').href=Iar[4];
document.getElementById('i5').src=Iar[5];
document.getElementById('a5').href=Iar[5];
</script>

</body>
</html>

        Comment

        • #5
          Thanks so much Beagle, this is the exact fix I was looking for. You were right about the incorrectly named images.

          Still one more problem. If I want the href to be different from the src, is there a way for me to randomize a second array in the same way as the first?

          Code:
          var Iar = new Array();
Iar[0] = "http://www.google.com/logos/8th_birthday.gif"
Iar[1] = "http://www.google.com/logos/7th_birthday.gif"

var Ias = new Array();
Ias[0] = "http://www.google.com/"
Ias[1] = "http://www.yahoo.com/"
          My random sort function sorts each list differently. Is there a way sort both arrays the same way. Like use the variable generated at random for both arrays instead of generating a differed var for each array?

          Something like this?
          Code:
          var dd=randOrd
Iar.sort(dd)
Ias.sort(dd)
          I'm not too experienced with java syntax, if you couldn't tell, but this is the jist of what I want to accomplish.
          Last edited by sabin; Sep 28, 2006, 03:55 PM.

          Comment

          • #6
            Another slight comment on your post, JavaScript is entirlely different than Java, don't mix them up in conversation, some people get fiesty.

            Anyway, you can make a tuple, which is basically a group of entities, and store those in one array. Basically, you'll be creating an object to associate an image with a link. You can add as many entities to the object as you'd like. These are called members.
            Code:
            var Ia = new Array();
Ia[0] = {
  'img':"http://www.google.com/logos/8th_birthday.gif",
  'link':"http://www.google.com/"
};
Ia[1] = {
  'img':"http://www.google.com/logos/7th_birthday.gif",
  'link':"http://www.yahoo.com/"
};

Ia.sort(randOrd);

document.getElementById('i0').src=Ia[0].img;
document.getElementById('a0').href=Ia[0].link;
            I hope that makes sense. The syntax for creating the objects I just used, with the curly braces and name/value pairs is referred to JSON, or JavaScript Object Notation, because it's the syntax JavaScript uses to define objects. So the code above creates 2 objects, each with 2 members, one to store the img src and one to store the url. You get them out using dot notation as above.

            JavaScript is really cool like that. You can just keep adding arbitrary objects, no need to define classes. Everything can be dynamically extended. There'sa lot to learn. Have fun!

            Comment

            • #7
              Thank you so much, this is exactly what I was looking for!

              Comment

              Previous template Next
              Working...
              X