• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

Random Pic Generator in Dreamweaver

edro

Lifer
I want a page with like 5 pictures on it, and everytime you refresh, a different pic randomly comes up. The pics that are shown, would be in a directory holding like 30 pictures. It would choose from those 30, 5 random ones to be shown.

Does Dreamweaver do this? How can I do that? If it involves a JavaScript, how exactly do I implement that?
 
The trick to this is naming your files in sequential order (image1.jpg, image2.jpg, etc..). Then you can couple it with Javascript's document.write and random number generator to randomly display an image.

I'm kinda rusty with my Javascript, but it can look something like this:

imagenumber = random(number here);
document.write('<img src=image' + imagenumber + '.jpg>');

So, when the page loads imagenumber will store a randomly generated number and document.write will write out the following:

<img src=image1.jpg> if imagenumber = 1
<img src=image2.jpg> if imagenumber = 2 ... and so on..

 
This will do exactly what you want.

<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var0="pic1.gif"
var1="pic2.gif"
var2="pic3.gif"
var3="pic4.gif"
var4="pic5.gif"
// Add the 30 picture names to the above list in the format shown


now=new Date()
num1=(now.getSeconds() )%5
num2= num1 +5
num3= num2 +5
num4= num3 +5
num5= num4 +5


if (num1 == 0)
{pic1=var0}
if (num1 == 1)
{pic1=var1}
if (num1 == 2)
{pic1=var2}
if (num1 == 3)
{pic1=var3}
if (num1 == 4)
{pic1=var4}

if (num2 == 5)
{pic2=var5}
if (num2 == 6)
{pic2=var6}
if (num2 == 7)
{pic2=var7}
if (num2 == 8)
{pic2=var8}
if (num2 == 9)
{pic2=var9}

// add in the other 3 sets of variable num3 num4 and so on. Each time the variable set will increase by 5
document.write("<img src='" +pic1+ "'>" + "<img src='" +pic2+ "'>" + "<img src='" +pic3+ "'>" + "<img src='" +pic4+ "'>" + "<img src='" +pic5+ "'>" )
</SCRIPT>
</BODY>
</HTML>
 
Thought of a more streamlined way of doing things.... still name all your pictures pic1.jpg...pic30.jpg



HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
now=new Date()
var0=((now.getSeconds() )%30) + 1
var1=((now.getSeconds() )%30) + 2
var2=((now.getSeconds() )%30) + 3
var3=((now.getSeconds() )%30) + 4
var4=((now.getSeconds() )%30 )+ 5

document.write("<img src='pic" +var0+ ".jpg'>" + "<img src='pic" +var1+ ".jpg'>" + "<img src='pic" +var2+ ".jpg'>" + "<img src='pic" +var3+ ".jpg'>" + "<img src='pic" +var4+ ".jpg'>" )
</SCRIPT>
</BODY>
</HTML>

 
Back
Top