Changing text with picture

Anthony · Feb 16, 2007

I am using the following code to display fading pictures on a team
website. Can someone show me how to modify it such that I can display
the names of each employee when the picture changes? This is not the
complete code for the page but only the code relevant to what I am
asking here. Some background information for you: the page is set up
using a layout table and the pictures are displayed in a layout cell.I
appreciate any help.

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">



// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/stepanie.jpg'
Pic[1] = 'images/leslie.jpg'
Pic[2] = 'images/nate.jpg'
Pic[3] = 'images/jeff.jpg'
Pic[4] = 'images/vincent.jpg'

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>

</HEAD>

<BODY onLoad="runSlideShow()">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150>
</td>
</tr>
</table>

<p><center>
<b>
<font face="arial, helvetica" size"-2">The BOA Bombers</font>
</b>
</center><p>

</BODY>

</HTML>

ASM · Feb 18, 2007

Anthony a écrit :

I am using the following code to display fading pictures on a team
website.

That will only run With IE on PC Win :-(

Tell me if this
http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide.htm
works with your IE

Can someone show me how to modify it such that I can display
the names of each employee when the picture changes?

first, array of employees :

var employees = ["Dupont","Smith","Mc O'Brian","Gary","Roberto"];

as soon as the new picture is displayed, you innerHTML the name

document.getElementById('employee').innerHTML = employees[x];

This is not the
complete code for the page but only the code relevant to what I am
asking here. Some background information for you: the page is set up
using a layout table and the pictures are displayed in a layout cell.I
appreciate any help.

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">



// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'images/stepanie.jpg'
Pic[1] = 'images/leslie.jpg'
Pic[2] = 'images/nate.jpg'
Pic[3] = 'images/jeff.jpg'
Pic[4] = 'images/vincent.jpg'

var employees = ["Dupont","Smith","Mc O'Brian","Gary","Roberto"];

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;

document.getElementById('employee').innerHTML = employees[j];

if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>

</HEAD>

<BODY onLoad="runSlideShow()">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150>

Click to expand...

<br>

-Lost · Feb 18, 2007

ASM said:
Anthony a écrit :

That will only run With IE on PC Win :-(

Tell me if this
http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide.htm
works with your IE

That does not work in Internet Explorer 6 or Opera 9. Firefox seems to enjoy it though.

-Lost

ASM · Feb 18, 2007

-Lost a écrit :

That does not work in Internet Explorer 6 or Opera 9. Firefox seems to enjoy it though.

Do not understand :
it works fine with my FF 2, Safari 1.3, and even Opera 9

With my IE Mac indeed that doesn't work.
(something to much hard to understand about timing ?)

However I don't know what I did wrong about IE Windows.
Doesn't he understand 'onload' with image ?

var I = new Image()
I.onload = function() { alert('loaded'); }
I.src = 'myImage.jpg';

Tried to fix it :
http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie.htm
but variables here are global
and I think it's not a good idea for IE's memory ?

Randy Webb · Feb 18, 2007

ASM said the following on 2/18/2007 11:12 AM:

-Lost a écrit :

Do not understand :
it works fine with my FF 2, Safari 1.3, and even Opera 9

And it works in IE7.

With my IE Mac indeed that doesn't work.
(something to much hard to understand about timing ?)

Not a lot "works" in IE Mac though. It could be the function to
setTimeout or the onload= that IE Mac doesn't like though.

However I don't know what I did wrong about IE Windows.
Doesn't he understand 'onload' with image ?

Yes, quite well.

var I = new Image()
I.onload = function() { alert('loaded'); }
I.src = 'myImage.jpg';

Tried to fix it :
http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie.htm
but variables here are global
and I think it's not a good idea for IE's memory ?

That one doesn't work in IE7 though.

ASM · Feb 18, 2007

Randy Webb a écrit :

ASM said the following on 2/18/2007 11:12 AM:

And it works in IE7.

Good ! Great ! Splendid !

Why won't it work with IE6 ?
Does IE6 not understand :
something.style.filter = "alpha(opacity:"+opacity+")";
where 0 < opacity < 100

That one doesn't work in IE7 though.

Pfffftttt !
and this time ?
<http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie_b.htm>

Randy Webb · Feb 18, 2007

ASM said the following on 2/18/2007 2:54 PM:

Randy Webb a écrit :

Good ! Great ! Splendid !

Why won't it work with IE6 ?
Does IE6 not understand :
something.style.filter = "alpha(opacity:"+opacity+")";
where 0 < opacity < 100

Pfffftttt !
and this time ?
<http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie_b.htm>

Line: 46
Char: 1
Error: Not implemented

Line 46 is this line:

I.onload = setTimeout('fadderLess()',800);

ASM · Feb 18, 2007

Randy Webb a écrit :

ASM said the following on 2/18/2007 2:54 PM:

Line: 46
Char: 1
Error: Not implemented

I.onload = setTimeout('fadderLess()',800);

Ha! Oui! pas malin !
However any of my browsers cries about that.

This one ?
<http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie_c.htm>
or more dirty :
<http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie_d.htm>

Randy Webb · Feb 18, 2007

ASM said the following on 2/18/2007 4:58 PM:

Randy Webb a écrit :

Ha! Oui! pas malin !
However any of my browsers cries about that.

This one ?
<http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie_c.htm>

That one works fine. You may want to tweak the times when it goes white
(It seems to stay white too long).

or more dirty :
<http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie_d.htm>

Fine, still seems too long as white.
No errors though.

ASM · Feb 19, 2007

Randy Webb a écrit :

ASM said the following on 2/18/2007 4:58 PM:

That one works fine.

Ha! Super !
Thanks to have tested.

You may want to tweak the times when it goes white
(It seems to stay white too long).

I've put timers (1/2 second) to display the messages
- "Wait loading"
- "Loaded"
to see what happens during the test.

But I also fad-down to 1 (on 100)
On my screen it is OK,
I see something as soon as filter reaches step 2 or 3.

Last test, lighted (without delays), an heavier :
added radio-buttons to choice minimal fad/filter.
<http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie_e.htm>
Tell me with which min it's ok for you.

Anthony · Feb 27, 2007

Anthony a écrit :

I am using the following code to display fading pictures on a team
website.

Click to expand...

That will only run With IE on PC Win :-(

Tell me if this
http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide.htm
works with your IE

Can someone show me how to modify it such that I can display
the names of each employee when the picture changes?

Click to expand...

first, array of employees :

var employees = ["Dupont","Smith","Mc O'Brian","Gary","Roberto"];

as soon as the new picture is displayed, you innerHTML the name

document.getElementById('employee').innerHTML = employees[x];

This is not the
complete code for the page but only the code relevant to what I am
asking here. Some background information for you: the page is set up
using a layout table and the pictures are displayed in a layout cell.I
appreciate any help.

<SCRIPT LANGUAGE="JavaScript">



Click to expand...

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Click to expand...

Pic[0] = 'images/stepanie.jpg'
Pic[1] = 'images/leslie.jpg'
Pic[2] = 'images/nate.jpg'
Pic[3] = 'images/jeff.jpg'
Pic[4] = 'images/vincent.jpg'

Click to expand...

var employees = ["Dupont","Smith","Mc O'Brian","Gary","Roberto"];

// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;

Click to expand...

document.getElementById('employee').innerHTML = employees[j];

if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
</script>

<BODY onLoad="runSlideShow()">

Click to expand...

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="VU" height=150 width=150>
<img src="1.jpg" name='SlideShow' width=150 height=150>
<br>

<p><center>
<b>
<font face="arial, helvetica" size"-2">The BOA Bombers</font>
</b>
</center><p>

</HTML>

Click to expand...

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé- Hide quoted text -

- Show quoted text -- Hide quoted text -

- Show quoted text -- Hide quoted text -

- Show quoted text -

I added the lines of code that you supplied and it works great.
Thanks for all your help.

javascript animation eating all memory	1	Aug 28, 2006
Add randomizing function to fade-effect slideshow?	2	Dec 18, 2003
Slide Show	1	Jan 15, 2007
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
background image	5	Apr 27, 2008
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Help with code	0	Jun 12, 2022
Help with my responsive home page	2	Dec 14, 2022

Changing text with picture

Anthony

ASM

-Lost

ASM

Randy Webb

ASM

Randy Webb

ASM

Randy Webb

ASM

Anthony

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads