/    Sign up×
Community /Pin to ProfileBookmark

Image Function

Hi all,

I have this code and function that is intended to be put into the head section of a page, but I want to break it up and have it as a function in my separet tools.js page and call it ONLY when i need to, rather than having all of this code in my HEAD tag.

var theImages = new Array()

theImages[0] = ‘../images/randomimages/1.jpg’
theImages[1] = ‘../images/randomimages/2.jpg’

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}

var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
document.write(‘<img src=”‘+theImages[whichImage]+'”>’);
}

Can someone be kind enough to break it up so that it would work as a separate function called?

I think the bit I am missing is the ‘return’ bit at the end – is this correct?

Kind regards

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@saulssNov 08.2005 — do u mean something like this? &lt;input type="button" value="click" onclick="changeImage()"&gt;
&lt;script&gt;
var theImages = new Array()

theImages[0] = 'http://www.webdeveloper.com/forum/images/buttons/reply.gif'
theImages[1] = 'http://www.webdeveloper.com/forum/images/buttons/quote.gif'

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i &lt; p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}

var whichImage = Math.round(Math.random()*(p-1));

function showImage(){
//alert('&lt;img src="'+theImages[whichImage]+'"&gt;')
document.write('&lt;img id="randimg" src="'+theImages[whichImage]+'"&gt;');
}
showImage()//this line calls the function changeImage so that it can be modified later

function changeImage()
{
whichImage = Math.round(Math.random()*(p-1));
document.getElementById('randimg').src=theImages[whichImage];
}
&lt;/script&gt;
Copy linkTweet thisAlerts:
@krisconsauthorNov 08.2005 — Hi,

NO I simply want a script which changes an image randomly. This script will be in a tools.js page in my site.

When, and only when I need to, I want to call the function on a completely separate page in my site as follows:

<?php echo ShowImage(); ?>

The problem I am having is that the script above is not all in a function but I need it to be so i can call it like above when i need to - my question was - could someone sho w me how?

Many Thanks
Copy linkTweet thisAlerts:
@krisconsauthorNov 08.2005 — In addition, what i am trying to say is I will have NO Javascript embedded in my HEAD tags as ALL javascript is going to be in a tools.js page which consists of functions.

In this tools.js page, I need this entire random image function listed under a lets say ShowRandomImage(). This Javascript code as it stands, need to be placed into my head tags which is my problem. How can it be re-written so it is all in ONE function?
Copy linkTweet thisAlerts:
@saulssNov 08.2005 — function showRandomImage()
{

<i> </i>var theImages = new Array()

<i> </i>theImages[0] = 'http://www.webdeveloper.com/forum/images/buttons/reply.gif'
<i> </i>theImages[1] = 'http://www.webdeveloper.com/forum/images/buttons/quote.gif'

<i> </i>var j = 0
<i> </i>var p = theImages.length;

<i> </i>var preBuffer = new Array()
<i> </i>for (i = 0; i &lt; p; i++){
<i> </i>preBuffer[i] = new Image()
<i> </i>preBuffer[i].src = theImages[i]
<i> </i>}

<i> </i>var whichImage = Math.round(Math.random()*(p-1));

<i> </i>document.write('&lt;img id="randimg" src="'+theImages[whichImage]+'"&gt;');
}
×

Success!

Help @kriscons 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.4,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...