/    Sign up×
Community /Pin to ProfileBookmark

HELP! Simple random image and text generator…

Hello,

I have used the below code, found on a forum from 2006, to generate a random image on my website with a link and accompanying text.

The image works fine, the link that goes with each image is fine…

Problem is: the text beneath the image does not match the image and link. This seems to be generated as a separate random element.

Can anyone tell me how I can make my site display image 1 + link 1 + quotation 1? The code is tested here: [url]http://www.velvetcommunications.co.uk/randomtest.html[/url]

The code is below. Hope someone can help ?

[CODE]<script language=”JavaScript”>
<!– Hide from old browsers

var imagenumber = 9 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;

images = new Array
images[1] = “jpg/clientlist/collagenics.jpg”
images[2] = “jpg/clientlist/cosmeticdental.jpg”
images[3] = “jpg/clientlist/cpt.jpg”
images[4] = “jpg/clientlist/glamal.jpg”
images[5] = “jpg/clientlist/mac_logo.jpg”
images[6] = “jpg/clientlist/mb.jpg”
images[7] = “jpg/clientlist/myi.jpg”
images[8] = “jpg/clientlist/ruck_logo.jpg”
images[9] = “jpg/clientlist/stagecoach.jpg”
var image = images[rand1]

links = new Array
links[1] = “collagen.html”
links[2] = “cosmetic.html”
links[3] = “cpt.html”
links[4] = “glamal.html”
links[5] = “mac.html”
links[6] = “megabus.html”
links[7] = “myi.html”
links[8] = “ruck.html”
links[9] = “stagecoach.html”
var link = links[rand1]

var Quotation=new Array()

Quotation[1] = “collagen”;
Quotation[2] = “cosmetic.”;
Quotation[3] = “cpt.”;
Quotation[4] = “glamal.”;
Quotation[5] = “mac.”;
Quotation[6] = “megabus.”;
Quotation[7] = “myi.”;
Quotation[8] = “ruck.”;
Quotation[9] = “stagecoach.”;

document.write(‘<A HREF=”‘ + link + ‘”><IMG SRC=”‘ + image + ‘” border=”0″></a>’)</script></td>

<td valign=”top” width=”98%”>
<script language=”JavaScript”>var Q = Quotation.length;
var whichQuotation=Math.round(Math.random()*(Q-1));
function showQuotation(){document.write(Quotation[whichQuotation]);}
showQuotation();</script>[/CODE]

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@tirnaMar 28.2010 — I've just had a very quick look at our code and it looks to me that the value of rand1 needs to equal the value of whichQuotation to get what you want.
Copy linkTweet thisAlerts:
@alamoryanauthorMar 28.2010 — I've just had a very quick look at our code and it looks to me that the value of rand1 needs to equal the value of whichQuotation to get what you want.[/QUOTE]

Many thanks Trina. I've absolutely no idea when it comes to coding. Could you possibly tell me how to do this? I've changed numbers and copied bits of code here there and everywhere and it usually results in a blank page! ?
Copy linkTweet thisAlerts:
@tirnaMar 28.2010 — ok, I fixed up your code and tested it with 4 test images and the images, links and quotes now match up to whatever random number is generated.

I think part of your problem was also using reserved words for variable names so I changed those just in case.

You'll have to change the image and link values to suit your web page. I set them to what they are for testing purposes. Copy and paste the code in the 2 divs that contain the image and quote to the appropriate place in your code.

[B]Change imagenumber back to 9 (4 was for my testing) and put back the additional images in the array.[/B]

Anyway, this works in IE8 and should work in other browsers as well.


&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/URL]"&gt;
&lt;html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script type="text/javascript"&gt;
var imagenumber = 4 ;
var randomnumber = Math.random() ;
var rand1 = Math.round((imagenumber) * randomnumber+0.5) ;

imagesxx = new Array();
imagesxx[1] = "pic1.jpg";
imagesxx[2] = "pic2.jpg";
imagesxx[3] = "pic3.jpg";
imagesxx[4] = "pic4.jpg";
var imagexx = imagesxx[rand1];

links = new Array();
links[1] = "link1.html";
links[2] = "link2.html";
links[3] = "link3.html";
links[4] = "lin4.html";
links[5] = "mac.html";
links[6] = "megabus.html";
links[7] = "myi.html";
links[8] = "ruck.html";
links[9] = "stagecoach.html";
var linkxx = links[rand1];

var Quotation=new Array();


Quotation[1] = "quote1";
Quotation[2] = "quote2.";
Quotation[3] = "quote3.";
Quotation[4] = "quote4";
Quotation[5] = "mac.";
Quotation[6] = "megabus.";
Quotation[7] = "myi.";
Quotation[8] = "ruck.";
Quotation[9] = "stagecoach.";
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
document.write('&lt;a href="' + linkxx + '"&gt;&lt;img src="' + imagexx + '" border="0" /&gt;&lt;/a&gt;');
//--&gt;
&lt;/script&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;script type="text/javascript"&gt;
function showQuotation(){
document.write(Quotation[rand1]);
}

showQuotation();
&lt;/script&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

Copy linkTweet thisAlerts:
@alamoryanauthorMar 28.2010 — ok, I fixed up your code and tested it with 4 test images and the images, links and quotes now match up to whatever random number is generated.[/QUOTE]

that works perfectly - thanks for all your help Tirna ??
Copy linkTweet thisAlerts:
@whataboutchrisApr 20.2010 — Great script Tirna! I have a question: Is it possible for the image to load in the background? In the <body> maybe?
Copy linkTweet thisAlerts:
@tirnaApr 20.2010 — [U]@alamoryan[/U]

no problem - glad to help ?

[U]@whataboutchris[/U]

If you want just a random background image then maybe use something like this as a template:

[code=php]
<!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">
<head>
<title></title>
<script type="text/javascript">

var imagenumber = 4 ;
var randomnumber = Math.random() ;
var rand1 = Math.round((imagenumber) * randomnumber+0.5) ;

imagesxx = new Array();
imagesxx[1] = "pic1.jpg";
imagesxx[2] = "pic2.jpg";
imagesxx[3] = "pic3.jpg";
imagesxx[4] = "pic4.jpg";

var randImg = imagesxx[rand1];

window.onload=function() {
var bodyElem = document.getElementsByTagName("body");
bodyElem[0].style.backgroundImage = "url('"+randImg+"')";
}

</script>

</head>
<body>

<div>
<h1>Hello World...!!</h1>
</div>

</body>
</html>
[/code]
×

Success!

Help @alamoryan spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...