Adding links to random image array

**soulfuel** · 10-12-2008 02:01 AM

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>

**Ultimater** · 10-12-2008 08:22 AM

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.

**soulfuel** · 10-13-2008 02:10 AM

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

Thread: Adding links to random image array

Thread Tools

Display

Adding links to random image array

cheers

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions