www.webdeveloper.com
Results 1 to 3 of 3

Thread: Adding links to random image array

  1. #1
    Join Date
    Oct 2008
    Posts
    3

    Adding links to random image array

    Code posted below, with over 80 cards (images) and only 5 to be selected at once. I've been trying to find the "code" that allows a link to be added to the randomly selected card that opens a browser window displaying information about that relative card. I assume I need to build the html pages for all the 80 cards "info", no probs, I just need the correct link to show up on the card. I can run rings around people in digital video, animation and design, but programming leaves me stumped I'm afraid. Any help would be humbly appreciated.

    If any one is shaking their head thinking there is a much simpler way, please feel free to let me know.

    Cheers
    Code:
    myPix1 = new Array("A_New_Dawn.jpg ","Accept_Heaven's_Help.jpg","Adriana.jpg","Akasha .jpg","Alchemy.jpg", "Archangel_Gabrielle.jpg", "Archangel_Michael.jpg", "Archangel_Raphael.jpg", "Archangel_Uriel.jpg", "Arielle.jpg", "Astara.jpg", "Athena.jpg", "Aurora.jpg", "Azure.jpg", "Bethany.jpg", "Blessed_Change.jpg", "Break_Free.jpg", "Bridgette.jpg", "Caressa.jpg", "Celeste.jpg", "Chantall.jpg", "Consult_an_Expert.jpg", "Contemplation_Time.jpg", "Crystal.jpg", "Daniel.jpg", "Desiree.jpg", " Divine_Magic.jpg",
    "Dream_Big.jpg", "Empowerment.jpg", "Explore_Your_Options.jpg", "Father_Healing.jpg", "Fiona.jpg", "Francesca.jpg", "Friendship.jpg", "Grace_&_Antoinette.jpg", "Have_Faith.jpg", "Healing_Heart.jpg", "Helpful_Person.jpg", "Indriel.jpg", "Isabella.jpg", "Isaiah.jpg", "Leila.jpg", "Let_Yourself_Receive.jpg", "Make_a_Decision.jpg", "Make_a_Wish.jpg", "Maya.jpg", "Merlina.jpg", "Morning_Affirmations.jpg", "Mother_ Healing.jpg", "Music_for_Manifesting.jpg", "Mystique.jpg", "Oceana.jpg", "Omega.jpg", "Opal.jpg",
    "Patience.jpg", "Pay_Attention.jpg", "Play_time.jpg", "Positive_Energy.jpg", "Protection.jpg", "Raye.jpg", "Ready_set_go.jpg", "Rest.jpg", "Rochelle.jpg", "Rosetta.jpg", "Self-Forgiveness.jpg", "Self_employment.jpg", "Serena.jpg", "Serephina.jpg", "Set_Your_Sights_Higher.jpg", "Shanti.jpg", "Simplify_Your_Life.jpg", "Sonya.jpg", "Soulmate_Relationship.jpg", "Stay_Optimistic.jpg", "Syncronicity.jpg", "Teresa.jpg", "Time_to_Move_On.jpg", "Tranquility.jpg", "Treasure_Chest.jpg", "Vanessa.jpg", "Wait.jpg", "Watch_Your_thoughts.jpg", "Waves_of_Prosperity.jpg", "Worthiness.jpg", "Yes.jpg", "You're_Being_Helped.jpg", "Yvonne.jpg", "Zanna.jpg" )
    myPix2 = ....etc etc...
    
    
    function choosePix() {
    if (document.images) {
    randomNum = Math.floor((Math.random() * myPix1.length))
    document.myPicture1.src = myPix1[randomNum]
    
    randomNum = Math.floor((Math.random() * myPix2.length))
    document.myPicture2.src = myPix2[randomNum]
    
    randomNum = Math.floor((Math.random() * myPix3.length))
    document.myPicture3.src = myPix3[randomNum]
    
    randomNum = Math.floor((Math.random() * myPix4.length))
    document.myPicture4.src = myPix4[randomNum]
    
    randomNum = Math.floor((Math.random() * myPix5.length))
    document.myPicture5.src = myPix5[randomNum]
    }
    }
    
    // End hiding script from old browsers -->
    
    function MM_openBrWindow(theURL,winName,features) { //v2.0
    window.open(theURL,winName,features);
    }
    //-->
    </script>
    
    
    </style>
    </head>
    
    <body onload="choosePix();">
    <div id="wrapper-TL"></div>
    
    <div id="wrapper-TR">
    <div align="center"></div>
    <table width="100%" border="0">
    <tr>
    <td colspan="3" align="center" valign="top"><table width="662" border="0" cellspacing="5">
    <tr align="left" valign="top">
    <td width="265">&nbsp;</td>
    <td width="265"><div align="center"><img src="Back_of_Card-low.jpg" alt="angel image" name="myPicture1" width="265" height="365" /><strong><br />
    5</strong></div></td>
    <td width="106">&nbsp;</td>
    </tr>
    <tr align="left" valign="top">
    <td height="396"><div align="center"><img src="Back_of_Card-low.jpg" width="265" height="365" name="myPicture3" alt="angel image" /><strong><br />
    3</strong></div></td>
    <td><div align="center"><img src="Back_of_Card-low.jpg" width="265" height="375" name="myPicture2" alt="angel image" /><strong><br />
    2</strong></div></td>
    <td><div align="center"><img src="Back_of_Card-low.jpg" width="265" height="375" name="myPicture4" alt="angel image" /><strong><br />
    4</strong></div></td>
    </tr>
    <tr align="left" valign="top">
    <td>&nbsp;</td>
    <td><div align="center"><img src="Back_of_Card-low.jpg" width="265" height="375" name="myPicture5" alt="angel image" /><strong><br />
    1</strong></div></td>
    <td>&nbsp;</td>
    </tr>
    </table> </td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Join Date
    Jan 2005
    Location
    Los Angeles, CA
    Posts
    4,887
    Slight JavaScript modification:
    Code:
    <script type="text/javascript">
    //Data:
    myImages=new Array("A_New_Dawn.jpg ","Accept_Heaven's_Help.jpg","Adriana.jpg","Akasha .jpg","Alchemy.jpg", "Archangel_Gabrielle.jpg", "Archangel_Michael.jpg", "Archangel_Raphael.jpg", "Archangel_Uriel.jpg", "Arielle.jpg", "Astara.jpg", "Athena.jpg", "Aurora.jpg", "Azure.jpg", "Bethany.jpg", "Blessed_Change.jpg", "Break_Free.jpg", "Bridgette.jpg", "Caressa.jpg", "Celeste.jpg", "Chantall.jpg", "Consult_an_Expert.jpg", "Contemplation_Time.jpg", "Crystal.jpg", "Daniel.jpg", "Desiree.jpg", " Divine_Magic.jpg",
    "Dream_Big.jpg", "Empowerment.jpg", "Explore_Your_Options.jpg", "Father_Healing.jpg", "Fiona.jpg", "Francesca.jpg", "Friendship.jpg", "Grace_&_Antoinette.jpg", "Have_Faith.jpg", "Healing_Heart.jpg", "Helpful_Person.jpg", "Indriel.jpg", "Isabella.jpg", "Isaiah.jpg", "Leila.jpg", "Let_Yourself_Receive.jpg", "Make_a_Decision.jpg", "Make_a_Wish.jpg", "Maya.jpg", "Merlina.jpg", "Morning_Affirmations.jpg", "Mother_ Healing.jpg", "Music_for_Manifesting.jpg", "Mystique.jpg", "Oceana.jpg", "Omega.jpg", "Opal.jpg",
    "Patience.jpg", "Pay_Attention.jpg", "Play_time.jpg", "Positive_Energy.jpg", "Protection.jpg", "Raye.jpg", "Ready_set_go.jpg", "Rest.jpg", "Rochelle.jpg", "Rosetta.jpg", "Self-Forgiveness.jpg", "Self_employment.jpg", "Serena.jpg", "Serephina.jpg", "Set_Your_Sights_Higher.jpg", "Shanti.jpg", "Simplify_Your_Life.jpg", "Sonya.jpg", "Soulmate_Relationship.jpg", "Stay_Optimistic.jpg", "Syncronicity.jpg", "Teresa.jpg", "Time_to_Move_On.jpg", "Tranquility.jpg", "Treasure_Chest.jpg", "Vanessa.jpg", "Wait.jpg", "Watch_Your_thoughts.jpg", "Waves_of_Prosperity.jpg", "Worthiness.jpg", "Yes.jpg", "You're_Being_Helped.jpg", "Yvonne.jpg", "Zanna.jpg" );
    //Data:
    myTexts=new Array();for(i=0;i<myImages.length;i++)myTexts[i]="Text"+i;
    </script>
    <script type="text/javascript">
    //Array.prototype.dealHand
    //Author: Ultimater
    Array.prototype.dealHand=function(n){
    var hand=new Array(),l=this.length;
    for(var i=0;i<l;i++)hand.splice(Math.floor(Math.random()*(i+1)),0,i);
    return hand.splice(0,n);
    }
    </script>
    <script type="text/javascript">
    function choosePix() {
    if(!document.images)return;
    var cards=myImages.dealHand(5);
    for(var i=0;i<cards.length;i++){
    document["myPicture"+(i+1)].src=myImages[cards[i]];
    document["myPicture"+(i+1)].nextSibling.innerHTML="<br /><a href=\""+myImages[cards[i]]+"\" target=\"_new\">"+myTexts[cards[i]]+"</a>";
    }//for
    }//function
    </script>
    Simply combine the above JavaScript with your HTML layout and it will add text-captions under your images with clickable links to the media.

    Regarding your inquiry regarding pop-up windows, it is possible to write a single blank.html page then have JavaScript write to it dynamically - to save you creating 88 separate pages.

    On the other hand, users generally loathe associating with pop-ups and for this reason I think it would be practical to seek an alternative.

  3. #3
    Join Date
    Oct 2008
    Posts
    3

    cheers

    Hey thanks, that was a fast and swift response, worked a treat, cheers.

Thread Information

Users Browsing this Thread

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

Posting Permissions

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



Recent Articles