Member Avatar for jonpb

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?

Many thanks in advance,

Cheers,

jon

  • 4 Contributors
  • 4 Replies
  • 277 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by essential

Recommended Answers

All 4 Replies

Member Avatar for tearslake

Have you solved this task? I need the same code and if you have it please post here. Much appreciated!

Member Avatar for essential

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>

Hope you find this useful...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.