PDA

View Full Version : random image and text pairs upon page load



po3
Sep 10th, 2007, 03:53 AM
I have 3 sets of images and html text (all styled with css) that I would like to randomly k one set to load when the page loads up. The items are in different areas of the page also. One is toward the top in a branding area while the image is actual lower on the page within some content.

Example:

ImageA & HTMLTextA
ImageB & HTMLTextB
ImageC & HTMLTextC

When page loads one set should be chossen to display for example ImageC & HTMLTextC NOT ImageC & HTMLTextA

2reikis
Sep 10th, 2007, 04:47 AM
<script language="javascript">
rndSet = [] // assign an array to hold the options
rndSet.push({'image': 'imageA.jpg','text':'Text block A'})
rndSet.push({'image': 'imageB.jpg','text':'Text Block B'})
rndSet.push({'image': 'imageC.jpg','text':'Text Block C'})
rndNum = Math.round(Math.random()*rndSet.length)
</script>
will get you a random set.


<div id='imageHolder'>
<script language = javascript>
document.write('<img src='+rndSet[rndNum]['image']+'>')
</script>
</div>
will place the graphic, although you don't really need the div tag. Just put the little bit of script where you would normally put the img tag. You can extend the document.write to include width and height if you know them (and they're all the same).


document.write('<img src='+rndSet[rndNum]['image']+' width="200" height="80">'
and for the text, pretty much the same....


<script language='javascript'>
document.write(rndSet[rndNum]['text']
</script>

HTH
2reikis

Actinia
Sep 10th, 2007, 01:09 PM
Another solution would be to place the three images into three divs, and similarly for the text blocks, and style each to a default display of hidden. Within each triple, there would be three classes (say c1, c2, c2). On load, you select one of these classes randomly, and change the display properties to block.

CSS code:


.c1, c2, c3 {display: hidden}


HTML code


<div class="c1">
<img src="image1.jpg" .../>
<div>
... plus two more, with classes c2 and c3
<div class=c1">
<p>Text for block One</p>
</div>
... plus two more, with classes c2 and c3


The onload function would linclude the following code:


var r = Math.ceil(Math.random()*3);
var classID = "c" + r;
var divset = getElementsByTagName(classID);
for (i = 0; i < 2; i++) {
divset[i].style.display = "block";
}

This code has not been tried,

John Rostron

po3
Sep 10th, 2007, 03:10 PM
thanks for the help guys! Is one version better than the other?

John, your version would require a longer load time right? because everything is being loaded into the page even though it isn't seen. However, if I use image replacement to display the images I would have to choose this direction right?

2reikis, your version wuld only require loading one image at a time and therefore be lighter weight (imagewise) right? I wouldn't be able to use css image replacement with option right?

Thanks!

Actinia
Sep 10th, 2007, 05:06 PM
Yes, those differences would be valid. It really will depend on how big your images are, and whether you would be wanting to access the other images elsewhere.

A third alternative would be to use Ajax to load one of three include files, each of which contains an image and a textblock. Again, you would generate a random number in [1,2,3] to decide which include file to load.

John

po3
Sep 10th, 2007, 09:05 PM
Yes, those differences would be valid. It really will depend on how big your images are...

My images are about 80-90k each bring the total for all three to 240-270k. What do you think? Prolly too much to load all at once right?

I guess I could remove the image replacement with css and then go the javascript route like 2reikis suggested.

John, what would the benifit of ajax over the javascript method be?

po3
Sep 10th, 2007, 11:01 PM
2reikis,

I'm working to implement your method for this random script but I'm running into some issues. Below is what I have done thus far.

in the head of my html document:

<script type="text/javascript" src="assets/scripts/random.js"></script>

In the body of the HTML document:

<div id="branding">
<ul id="utilityLinks">
<li><a href="#">link 2</a></li>
<li><a href="#">link 1</a></li>
</ul>
<h1>Logo Here</h1>
<script language='javascript'>
document.write(rndSet[rndNum]['text']
</script>
</div>

Later in the body of my HTML:

<div id="main">
<script language = javascript>
document.write('<img src='+rndSet[rndNum]['image']+' width="588" height="281">')
</script>
<p id="intro">bunch of text</p>
</div>

And finally my javascript file:

rndSet = [] // assign an array to hold the options
rndSet.push({'image': '../images/home/Sq-effective.jpg','text':'<p>text <em>key word</em> text.</p>'})
rndSet.push({'image': '../images/home/Sq-fluid.jpg','text':'<p>text <em>key word</em> text.</p>'})
rndSet.push({'image': '../images/home/Sq-relevent.jpg','text':'<p>text <em>key word</em> text.</p>'})
rndNum = Math.round(Math.random()*rndSet.length)


What did I do wrong?

I'm also wondering how I might add an 'alt' tag to each of the images.

Might I do something like this?

rndSet.push({'image': '../images/home/Sq-fluid.jpg', 'alt': 'alt text here', 'text':'<p>text <em>key word</em> text.</p>'})

<script language = javascript>
document.write('<img src='+rndSet[rndNum]['image']+['alt']+' width="588" height="281">')

2reikis
Sep 10th, 2007, 11:36 PM
Hi Po3,
It looks ok to me. What's it doing that it's not supposed to be (or vice versa)? Is there any way you could post a link to the page so I can bat it about a bit?

As for the alt text, re-write that code as

document.write('<img src="'+rndSet[rndNum]['image']+'" alt="'+rndSet[rndNum]['alt']+'" width="588" height="281">')

I'll keep checking back till this is complete.

Also, I note that your path to your images jumps up a directory, but your path to the javascript file doesn't. Is the path to your javascript file correct?

2reikis

po3
Sep 10th, 2007, 11:48 PM
Hi Po3,
It looks ok to me. What's it doing that it's not supposed to be (or vice versa)? Is there any way you could post a link to the page so I can bat it about a bit?

oh sorry, guess I should have explained what wasn't happening. The image and the text are not loading at all.

Here's a link (http://projecto3.com/clients/po3/index.html)

2reikis
Sep 11th, 2007, 12:02 AM
Well, the good news is, the script is working. There are a couple of minor edits you'll need to make, though.

This code is missing a parentheses


<div id="wrapper">
<div id="branding">
<ul id="utilityLinks">
<li><a href="#">client login</a></li>
<li><a href="#">contact</a></li>
</ul>
<h1>Project o3, LLC.</h1>
<script language='javascript'>
document.write(rndSet[rndNum]['text']
</script>
</div>
replace the line in red with


document.write(rndSet[rndNum]['text'])

and that will work. The image shows up as a broken link. The path to the image is broken. Replace that with the correct path and it will work too. If you right-click (IE) and choose properties, you'll see the path was inserted by the script correctly.

Try these out and let me know how it turns out.

2reikis

po3
Sep 11th, 2007, 01:38 AM
2reikis, it's real close. you're right I had the path to the image wrong. The only remaining issue is that the page sometimes comes up blank in the two areas I'm inserting the image and the text.

2reikis
Sep 11th, 2007, 02:28 AM
oops. My bad.... the formula for the random number should be


rndNum = Math.ceil(Math.random()*rndSet.length)-1

The way it was, you were getting a spread from 0 to 3 and what's needed here is a spread from 0 to 2 (3 members).

2reikis

po3
Sep 11th, 2007, 03:08 AM
I had a feeling it might be something like that, however I had no idea how to correct it or how to know if it was really doing what I suspected. I have some expierence with Flash and actionscript but no javascript at all...

Thanks so much for helping me out!