Looking for Random Image / Text Combination [Archive]

brianoakes

4-27-05, 11:35 AM

Hello,

I am looking for a JS that will alow me to map an image with text and then randomly display from several of these and also allow the text to be a clickable link.

So

Image A is Mapped to Text A
Image B is Mapped to Text B
Image C is Mapped to Text C

and so on and so forth, and when someone comes to a page, it will randomly display one of those groupings...

thanks

B&T

4-27-05, 11:42 AM

Don't use javascript. Use php:
http://tips-scripts.com/?tip=random#tip
You can do that and more - like weight the frequency.

brianoakes

4-27-05, 01:47 PM

for other reasons, I can not use PHP.

Kitchensink108

4-27-05, 01:50 PM

I won't write out the code, at least not now, but I'll tell you what to do. Just make two or three arrays. The first array contains the image names, second array their corresponding text, and a third array, the link. Set a default image/text/link combo somewhere on the page, giving each an ID (for text, use to set the id). Then, randomly generate a number. Set the .src of the image, innerText/innerHTML of the span, and innerHTML of the link to the index of the appropriate array.

brianoakes

4-27-05, 01:56 PM

I have something like that but it only works in IE...

here if you could take a look at this and tell me how to get it cross browser friendly...

Thanks...

<SCRIPT LANGUAGE="JavaScript">

var ic = 12; // Number of alternative images

var i = new Array(ic); // Array to hold filenames
var t = new Array(ic); // Array to hold filenames

i[0] = "images/meet_neil.gif";
t[0] = "V.P. Merchandise<HR size=1 color=#04132A>Neil Hart a.k.a. Kiltman</a> <A href='council.htm#merch' class=text>Learn More>></a>";

i[1] = "images/meet_bruce.gif";
t[1] = "V.P. Publicity<HR size=1 color=#04132A>Bruce McMillan a.k.a. PaintedHawk <A href='council.htm#pub' class=text>Learn More>></a>";

i[2] = "images/meet_brian.gif";
t[2] = "Creative Director <HR size=1 color=#04132A>Brian D. Oakes a.k.a. NewYawkSeahawk <A href='council.htm#web' class=text>Learn More>></a>";

i[3] = "images/meet_loren.gif";
t[3] = "V.P. At Large <HR size=1 color=#04132A>Lorin Sandretzky a.k.a. Seattle's Biggest Sports Fan <A href='council.htm#large' class=text>Learn More>></a>";

i[4] = "images/meet_smokey.gif";
t[4] = "President <HR size=1 color=#04132A>Smokey Simons <A href='council.htm#pres' class=text>Learn More>></a>";

i[5] = "images/meet_jody.gif";
t[5] = "Web Admin<HR size=1 color=#04132A>Jody Bossert <A href='council.htm#admin' class=text>Learn More>></a>";

i[6] = "images/meet_david.gif";
t[6] = "Liaison<HR size=1 color=#04132A>David Israel <A href='council.htm#liaison' class=text>Learn More>></a>";

i[7] = "images/meet_keenan.gif";
t[7] = "Web Admin<HR size=1 color=#04132A>Keenan Bowen <A href='council.htm#keenan' class=text>Learn More>></a>";

i[8] = "images/meet_traci.gif";
t[8] = "V.P. Membership<HR size=1 color=#04132A>Traci Williams <A href='council.htm#member' class=text>Learn More>></a>";

i[9] = "images/meet_tj.gif";
t[9] = "V.P. Entertainment<HR size=1 color=#04132A>T.J. Mason <A href='council.htm#ent' class=text>Learn More>></a>";

i[10] = "images/meet_laura.gif";
t[10] = "Secretary<HR size=1 color=#04132A>Laura Bass <A href='council.htm#sec' class=text>Learn More>></a>";

i[11] = "images/meet_sue.gif";
t[11] = "Treasurer<HR size=1 color=#04132A>Sue Farley <A href='council.htm#tres' class=text>Learn More>></a>";

function pickRandom(range)
{
if (Math.random)
{
return Math.round(Math.random() * (range-1));
}
else
{
var now = new Date();
return (now.getTime() / 1000) % range;
}
}

var choice1 = pickRandom(ic);

var choice2 = pickRandom(ic);
while (choice2 == choice1)
{
choice2 = pickRandom(ic);
}
var choice3 = pickRandom(ic);
while (choice3 == choice1 || choice3 == choice2)
{
choice3 = pickRandom(ic);
}

document.getElementById("RandomImage1").src = i[choice1];
document.getElementById("RandomText1").innerHTML = t[choice1];

document.getElementById("RandomImage2").src = i[choice2];
document.getElementById("RandomText2").innerHTML = t[choice2];

document.getElementById("RandomImage3").src = i[choice3];
document.getElementById("RandomText3").innerHTML = t[choice3];

</SCRIPT>

and this is the code that gets i to display.......

<table>
<tr><td rowspan="2">
<table border="0" width="35" cellspacing="0" cellpadding="0" style="border: 1 solid #04132A">
<tr><td width="100%"><img border="0" src="images/meet_bruce.gif" width="35" height="59" name="RandomImage3"></td></tr>
</table>
</td>
<td class="drk" style="border-bottom: 1 solid #04132A"></td>
</tr>
<tr><td class="drk" id="RandomText3"></td></tr>
</table>