Javascript for a randomized image and corresponding text.

February 25, 2007 7:52 AM

Help me find a javascript for selecting an image at random, and then some corresponding text lower down on the page.

I am making a webpage with several different versions of the main header graphic, each by a different artist. Every time the page loads, I want one of these images to load at random. Well beyond the header, down near the bottom of the sidebar, I want to credit the artist in question - ie, put some text and a link, corresponding to whichever image was loaded.

Put another way, I want something that generates the following code:



[then, much later on the page:]

header graphic by image1_artist.

Can anyone point me to - or devise - a javascript that will allow me to do this? I've looked at this AskMeFi question, and am currently using A List Apart's Better Rotator, but that doesn't allow me to do the other half of what I want.

Thanks so much!

posted by Marquis to computers & internet (6 comments total)

Yikes! I promise you that worked on Preview.

Let's try again - this is the kind of code I'm looking to use:

<img src="image1.jpg" alt="Image by image1_artist">

[then, much later on the page:]

header graphic by <a href="http://image1_artist_website">image1_artist</a>.
posted by Marquis at 7:55 AM on February 25, 2007

It shouldn't be hard to modify the Better Rotator to do what you want. You could add a line to each entry in the config file containing the attribution HTML (including the link). Then add a SPAN element with an id of "attribution" where you want the attribution, like this:

header graphic by <span id="attribution"><span>.

Then add a line to the showImage funtion in the PHP script that prints out this (I'll leave this as an exercise for the reader):


<script language="Javascript" type="text/javascript">
document.getElementById("attribution").innerHTML = [$img]['attribution'];
<script>

posted by cerebus19 at 8:12 AM on February 25, 2007

Actually, come to think of it, that might not work due to the span being generated after the Javascript referencing it. You might do better to have the PHP script generate, instead, Javascript that does this (inside script tags, naturally):

var attributionText = [$img]['attribution'];

And then, right after the attribution span, a script block that says this:

document.getElementById("attribution").innerHTML = attributionText;
posted by cerebus19 at 8:17 AM on February 25, 2007

I have exactly this setup on my website; you can copy the code straight from there. It's pretty short and self-explanatory. (I basically ripped it off from someone else the same way.)

Caveat: I seriously doubt that my method is fully standards-compliant, etc., although it works in IE and Firefox, at least. (Web design left me behind about 10 years ago...)
posted by equalpants at 8:50 AM on February 25, 2007

Upon further examination, since you need both an image and some text, if you use my code, you'll need to add an array for your texts in the same fashion as the "images" array, and then instead of using "images[rand(X)]" to fetch an image (where X = number of images), do

var i = rand(X);

first and then use "images[i]" and "texts[i]".
posted by equalpants at 8:59 AM on February 25, 2007

Ai ai ai, both of you look like you've solved my problem elegantly and with great thought - but I'm unable to decipher what exactly I should do. Javascript coder I ain't... Anyone able to offer some slightly more explicit instructions? (Sorry. :( )
posted by Marquis at 5:08 AM on February 26, 2007