Click on picture to change image

[Guest]

Hi all,

Using FP 2003 is it possible to set an image up so that when clicked it will
change to another image, and then so on through a range of 10-12 images? And
if so, how?

I have seen that you can swap to another image using layer behaviours but
that only allows a swap of 2 and then a different one on mouse out.

Any ideas gratefully received!

Andy

 

[Tom Gahagan]

Your best bet for what you have described will probably be a slide show
program.
There was a thread on a new slide show program in this group a few days ago.
You might look back to it.
You can also do a google search and get plenty of directions.

Best to you........
Tom Gahagan

 

[E. T. Culling]

Some suggestions:
http://www.eleanorstravels.com/PhotoGalleryPrograms/index.htm
Eleanor

 

[Jens Peter Karlsen[FP MVP]]

Not directly. You need a Custom Script.
Here is one you can use:

html
head
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Mike Canonigo ([email protected]) -->
<!-- Web Site: http://www.munkeehead.com -->

<!-- Modyfied by Jens Peter Karlsen 2003 -->

<!-- Begin
NewImg = new Array (
"images/1.jpg",
"images/2.jpg",
"images/3.jpg"
);

var p = NewImg.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = NewImg;
}
var ImgNum = 0;
var ImgLength = NewImg.length - 1;

//Time delay between Slides in milliseconds
var delay = 3000;
var t;
var lock = false;
var run;
function chgImg(direction) {

if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDur
ation)";
document.images.SlideShow.filters.blendTrans.Apply();
}
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}

if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.SlideShow.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}

// End -->
</script>

/head

body
<img src="images/1.jpg" name="SlideShow" width="125" height="100">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>
/body
/html


Notice the lack of <> around html, head and body tags. This is to
prevent your newsreader from displying it as HTML.

It should be easy enough to modify it to what you want.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

 

[Trevor L.]

Jens,
Thanks you once again.

I posted a query a little while ago on how to scroll through various images with a time delay between each, but no-one picked up on it. So this is great.

I'm currently using a script from Dynamic Drive HTML which puts forward and back arrows at the bottom of each image. Clicking on one instigates a change of image. I might try combining both. i.e. using a time delay, but one which is overridden if an arrow is clicked - that should be fun
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html

 

[Trevor L.]

Jens,

I now notice after using your script that it does exactly what I want.

Now all I have to do is figure out how. Then I'll know a bit more JavaScript.
---
Thanks
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html