Revolving Images in Frontpage 2003

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I have a picture on a page in my website. I want to put 4 or 5 or 6 pictures
that will slowly change like a slide show in the same exact space. How do I
set multiple pictures (and transitions) in the same place? Also, do I have
to save 4 or 5 or 6 pictures at the exact same width and height so that ALL
pictures will transition and show in the same screen area?

(e-mail address removed)
 
Ronny said:
I have a picture on a page in my website. I want to put 4 or 5 or 6
pictures that will slowly change like a slide show in the same exact
space. How do I set multiple pictures (and transitions) in the same
place? Also, do I have to save 4 or 5 or 6 pictures at the exact
same width and height so that ALL pictures will transition and show
in the same screen area?

(e-mail address removed)
Click to expand...

From The Javascript Source.

This code sets the image size to 120*90.

I think I have seen (and used) code which will handle any image size

<html>
<head>

<!-- Original: Robert Bui ([email protected]) -->
<!-- Web Site: http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<script language="javascript">
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
document[place].title = 'image' + image_index
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
</script>
</head>
<body onload="rotateImage('rImage')">

<center>
<img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120
height=90>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</body>
</html>

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------
 
Tevor, I'm somewhat of a novice with JavaScript. I understand that the
script you gave me can be copied and placed within my HTML within MY
frontpage website. But how do I configure it so that the pictures show up
where I went them to show up? How do I tell it which pictures (and how many)
to use?
Ronny
--
Ronny


Trevor L. said:
Ronny said:
I have a picture on a page in my website. I want to put 4 or 5 or 6
pictures that will slowly change like a slide show in the same exact
space. How do I set multiple pictures (and transitions) in the same
place? Also, do I have to save 4 or 5 or 6 pictures at the exact
same width and height so that ALL pictures will transition and show
in the same screen area?

(e-mail address removed)
Click to expand...

From The Javascript Source.

This code sets the image size to 120*90.

I think I have seen (and used) code which will handle any image size

<html>
<head>

<!-- Original: Robert Bui ([email protected]) -->
<!-- Web Site: http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<script language="javascript">
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
document[place].title = 'image' + image_index
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
</script>
</head>
<body onload="rotateImage('rImage')">

<center>
<img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120
height=90>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</body>
</html>

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
Ronny said:
Tevor, I'm somewhat of a novice with JavaScript. I understand that
the script you gave me can be copied and placed within my HTML within
MY frontpage website. But how do I configure it so that the pictures
show up where I went them to show up? How do I tell it which
pictures (and how many) to use?
Ronny
Click to expand...

Yep, I know what it was like when I was a novice. But, you don't have to
worry too much. Don't change anything between:
<script language="javascript">
and:
</script>
and it will work OK
(Except that I make some suggestions below to answer another question)

But to try to answer the questions.

The pictures appear at the place where the <img> tag is in this code
<body onload="rotateImage('rImage')">
<center>
<img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg"
width=120 height=90>
</center>

You can move this to wherever you want. One idea is to put it in a table.
Another is to create a layer (absolutely positioned <div>), but I would try
a table.

As to specifying the pictures you want, this is actually quite easy. Find
this code
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");

Here you alter each line with imageItem(........)

Inside the brackets, put the name of the image file you want.

This does not have to be an absolute reference as in the examples; it can be
a relative reference.
For example, imageItem("myimage.jpg"); This will refer to a file
"myimage.jpg" in the same directory as the page from which it is called.
OR imageItem("images/myimage.jpg"); This will refer to a file "myimage.jpg"
in the directory "images" in the same directory as the page from which it is
called.

To add more than four pictures, put this line before the line
imageItem(......):
image_list[image_index++] = new

I don't actually like all of this code. I pasted it as it was on The
Javascipt Source. I could rewrite it to make it a little easier to use

If you post the URL of your page, I can have another look and maybe post
some code which works the way you want.

BTW, Also please post back if I have confused you.
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------
 
In the code Trevor gave you look for the lines that say:

image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");

change the imageItem like to the name and location of your images (ex:
images/mypic.jpg). To add more images just add more of these lines to the
script (note you need both lines per image you add)

Tp get it to show up where you want it, switch to Code View, go to the
location where you want the images to appear (ex: in a table cell) and paste
in this code:

<center>
<img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120
height=90>
</center>

(replace the scr= line with your image name and location)


Ronny Richker said:
Tevor, I'm somewhat of a novice with JavaScript. I understand that the
script you gave me can be copied and placed within my HTML within MY
frontpage website. But how do I configure it so that the pictures show up
where I went them to show up? How do I tell it which pictures (and how
many)
to use?
Ronny
--
Ronny


Trevor L. said:
Ronny said:
I have a picture on a page in my website. I want to put 4 or 5 or 6
pictures that will slowly change like a slide show in the same exact
space. How do I set multiple pictures (and transitions) in the same
place? Also, do I have to save 4 or 5 or 6 pictures at the exact
same width and height so that ALL pictures will transition and show
in the same screen area?

(e-mail address removed)
Click to expand...

From The Javascript Source.

This code sets the image size to 120*90.

I think I have seen (and used) code which will handle any image size

<html>
<head>

<!-- Original: Robert Bui ([email protected]) -->
<!-- Web Site: http://astrogate.virtualave.net -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<script language="javascript">
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");
var number_of_image = image_list.length;

function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}

function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}

function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}

function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
document[place].title = 'image' + image_index
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
</script>
</head>
<body onload="rotateImage('rImage')">

<center>
<img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120
height=90>
</center>

<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

</body>
</html>

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
Click to expand...
 
Trevor, do you have an e-mail address that I could correspond to?

Ronny

--
Ronny


Trevor L. said:
Ronny said:
Tevor, I'm somewhat of a novice with JavaScript. I understand that
the script you gave me can be copied and placed within my HTML within
MY frontpage website. But how do I configure it so that the pictures
show up where I went them to show up? How do I tell it which
pictures (and how many) to use?
Ronny
Click to expand...

Yep, I know what it was like when I was a novice. But, you don't have to
worry too much. Don't change anything between:
<script language="javascript">
and:
</script>
and it will work OK
(Except that I make some suggestions below to answer another question)

But to try to answer the questions.

The pictures appear at the place where the <img> tag is in this code
<body onload="rotateImage('rImage')">
<center>
<img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg"
width=120 height=90>
</center>

You can move this to wherever you want. One idea is to put it in a table.
Another is to create a layer (absolutely positioned <div>), but I would try
a table.

As to specifying the pictures you want, this is actually quite easy. Find
this code
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/01.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/02.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/03.jpg");
image_list[image_index++] = new
imageItem("http://javascript.internet.com/img/image-cycler/04.jpg");

Here you alter each line with imageItem(........)

Inside the brackets, put the name of the image file you want.

This does not have to be an absolute reference as in the examples; it can be
a relative reference.
For example, imageItem("myimage.jpg"); This will refer to a file
"myimage.jpg" in the same directory as the page from which it is called.
OR imageItem("images/myimage.jpg"); This will refer to a file "myimage.jpg"
in the directory "images" in the same directory as the page from which it is
called.

To add more than four pictures, put this line before the line
imageItem(......):
image_list[image_index++] = new

I don't actually like all of this code. I pasted it as it was on The
Javascipt Source. I could rewrite it to make it a little easier to use

If you post the URL of your page, I can have another look and maybe post
some code which works the way you want.

BTW, Also please post back if I have confused you.
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
Click to expand...
 
David,

How about that.

Your response was almost the same as mine (well, content wise, I think you
expressed it better than I did)

Do we think alike :-))

--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------
 
Ronny said:
Trevor, do you have an e-mail address that I could correspond to?
Click to expand...

Yeah sure,
I don't like to post it on the newsgroup because of the spammers.

But go to my website below and you will find a button marked Email Me.
(This hopefully gets less SPAM)


--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------
 
:) 100 different ways to say the same thing right? We seem to be answering
posts within minutes of each other tonight. Looks like you type faster
though based on the date/time stamps :)
 
David said:
:) 100 different ways to say the same thing right? We seem to be
answering posts within minutes of each other tonight. Looks like you
type faster though based on the date/time stamps :)
Click to expand...

Faster, but maybe not more accurately. I get typing dyslexia if I go too
fast and then have to spell check and correct everything.

I found 7 errors in the above sentence (and 3 in this)

But it isn't night here in OZ :-)). 1500 AEDST on Boxing Day
--
Cheers,
Trevor L.
[ Microsoft MVP - FrontPage ]
MVPS Website: http://trevorl.mvps.org/
----------------------------------------
 
Back
Top