Javascript random image with assigned/accompanying quote
Hello,
I looked all over the forums here but couldn't find anything on this:
I'd like to have a js random image (1 out of 4) load each time a user visits my page. Along with that image, I'd like a specific quote and sub heading (text) to appear -the quote can be text or another graphic.
In other words, if random image '1' is loaded, 'quote 1' (text or another graphic) and 'sub head 1' (html text) is loaded, if random image '2' is loaded, 'quote 2' and 'sub head 2' (html text) is loaded, and so on...
Is this possible? I'm no js expert... if it's possible, how do I do it?
This is a long lost issue, but let me provide you a simple demo on how to deal with this thing.
Just be careful when you are editing the line's or the whole script will be worthless.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Randomly Synchronized Images and Quotes</title>
<script type="text/javascript">
// <![CDATA[
var message, path, load, randomizer;
var randomized = function() {
function display( ids ) {
return (( document.getElementById ) ? document.getElementById( ids ) : document.all[ids] );
}
return {
show : display,
activate : function() {
load = [ // All your images must go here, it can be as many as you want
{ img : ["image1.jpg",
"image2.gif",
"image3.png"] },
{ dir : [] },
// All Quotes must go here!
// Just make sure that it has the same length for the images that will be randomized -
// Or your quotes will displayed as undefined string.
{ msg : [ "Random quote 1", "Random quote 2", "Random quote 3"] } ]; // No need to edit beyond this part.
if ( document.images ) {
for ( x = 0; x <= load[0].img.length; x++ ) {
load[1].dir[x] = new Image();
load[1].dir[x].src = load[0].img[x];
randomizer = Math.floor(Math.random()*x); // This will perform synchronized display of image's and quote's.
path = load[1].dir[randomizer];
quotes = load[2].msg[randomizer];
} try {
randomized.show("myQuotes").innerHTML = quotes; document.images["myImage"].src = path.src;
} catch( e ) {
randomized.show("myQuotes").innerHTML = quotes; randomized.show("myImage").src = path.src;
}
} else {
alert("\nPlease enable your image support!");
}
}
};
}();
if ( window.addEventListener )
window.addEventListener("load",randomized.activate,false);
else if ( window.attachEvent )
window.attachEvent("onload",randomized.active)
else
window.onload = randomized.activate;
// ]]>
</script>
</head>
<body>
<div><img style="clear: left; float: left; margin: 0 1em 1em 0;" id="myImage" src="ie8.png" alt="Randomized Images" width="195" height="75" /><span id="myQuotes" title="Random Quotes"></span></div>
</body>
</html>
