how is this done?

  • Thread starter Thread starter vince6316
  • Start date Start date
vince6316 said:
Hi, I see these pictures that rotate and change within emails and on links
.... where do I go to get started on doing this for myself. Thanks

http://phoenix.craigslist.org/biz/510521462.html
Click to expand...

Here is some code which orates 3 images.

The images are on the folder images
i.e.
images/1.jpg
images/2.jpg
images/3.jpg
images/4.jpg
images/5.jpg
images/6.jpg

Just amend it to suit your purposes (or post back if you need help)

<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 -->

<!-- Amended by Trevor Lawrence http://trevorl.mvps.org/ -->

<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_list1 = new Array(
new imageItem("images/1.jpg"),
new imageItem("images/2.jpg")
)

var image_list2 = new Array(
new imageItem("images/3.jpg"),
new imageItem("images/4.jpg")
)

var image_list3 = new Array(
new imageItem("images/5.jpg"),
new imageItem("images/6.jpg")
)

var image_list = new Array(image_list1,image_list2,image_list3)
var image_index = new Array(0,0,0)
var number_of_image = new
Array(image_list[0].length,image_list[1].length,image_list[2].length)

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

function getNextImage(j) {
image_index[j] = (random_display)
? Math.floor(Math.random() * number_of_image[j])
: (image_index[j]+1) % number_of_image[j]
return(image_list[j][image_index[j]].image_item.src)
}

function rotateImage() {
for (var i = 1; i <= image_list.length ; i++)
{
var place = "rImage" + i
document[place].src = getNextImage(i-1)
document[place].title = 'image' + i
}
setTimeout("rotateImage('" +place +"')", interval)
}
</script>
</head>
<body onload="rotateImage()">

<center>
<!--img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120
height=90-->
<img name="rImage1" src="" width=120>
<img name="rImage2" src="" width=120>
<img name="rImage3" src="" width=120>
</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>
 
Great thread, just what I am after. What do I update to just have 1 picture
though? I have tried deleting bits n bobs but it stops working completely.
I just want 1 bigger picture to rotate. I've sussed the size etc, but need
to delete all code for image 2 and 3.
Thanks

Trevor Lawrence said:
vince6316 said:
Hi, I see these pictures that rotate and change within emails and on links
.... where do I go to get started on doing this for myself. Thanks

http://phoenix.craigslist.org/biz/510521462.html
Click to expand...

Here is some code which orates 3 images.

The images are on the folder images
i.e.
images/1.jpg
images/2.jpg
images/3.jpg
images/4.jpg
images/5.jpg
images/6.jpg

Just amend it to suit your purposes (or post back if you need help)

<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 -->

<!-- Amended by Trevor Lawrence http://trevorl.mvps.org/ -->

<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_list1 = new Array(
new imageItem("images/1.jpg"),
new imageItem("images/2.jpg")
)

var image_list2 = new Array(
new imageItem("images/3.jpg"),
new imageItem("images/4.jpg")
)

var image_list3 = new Array(
new imageItem("images/5.jpg"),
new imageItem("images/6.jpg")
)

var image_list = new Array(image_list1,image_list2,image_list3)
var image_index = new Array(0,0,0)
var number_of_image = new
Array(image_list[0].length,image_list[1].length,image_list[2].length)

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

function getNextImage(j) {
image_index[j] = (random_display)
? Math.floor(Math.random() * number_of_image[j])
: (image_index[j]+1) % number_of_image[j]
return(image_list[j][image_index[j]].image_item.src)
}

function rotateImage() {
for (var i = 1; i <= image_list.length ; i++)
{
var place = "rImage" + i
document[place].src = getNextImage(i-1)
document[place].title = 'image' + i
}
setTimeout("rotateImage('" +place +"')", interval)
}
</script>
</head>
<body onload="rotateImage()">

<center>
<!--img name="rImage"
src="http://javascript.internet.com/img/image-cycler/01.jpg" width=120
height=90-->
<img name="rImage1" src="" width=120>
<img name="rImage2" src="" width=120>
<img name="rImage3" src="" width=120>
</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>

--
Trevor Lawrence
Canberra
Microsoft MVP - FrontPage
MVP Web Site http://trevorl.mvps.org
Click to expand...
 
defraine said:
Great thread, just what I am after. What do I update to just have 1
picture
though? I have tried deleting bits n bobs but it stops working
completely.
I just want 1 bigger picture to rotate. I've sussed the size etc, but
need
to delete all code for image 2 and 3.
Click to expand...

I am confused.

How can one rotate a single picture image. It is either there or it isn't.

Or do you mean one "frame" in which several images rotate

I will work on this assumption and post back later, but if you don't mean
that, please explain a bit more what it is that you want to happen
 
Trevor Lawrence said:
I will work on this assumption and post back later, but if you don't mean
that, please explain a bit more what it is that you want to happen
Click to expand...

This may not be perfect but it works
<html>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'images/1.jpg'
theImages[1] = 'images/2.jpg'
theImages[2] = 'images/3.jpg'
theImages[3] = 'images/4.jpg'

// delay between rotating images (in seconds)
var interval = 2.5
interval *= 1000

// do not edit anything below this line

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

function showImage(){
var whichImage = Math.round(Math.random()*(p-1));
document.getElementById("place").innerHTML = '<img
src="'+theImages[whichImage]+'">'
setTimeout("showImage()", interval)
}

</script>
</HEAD>
<BODY onload="showImage()">

<div id="place"></div>

<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>
 
Back
Top