By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,479 Members | 1,229 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,479 IT Pros & Developers. It's quick & easy.

Changing text with picture

P: n/a
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">
<!-- Original: CodeLifter.com (su*****@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->

// 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[i] = new Image();
preLoad[i].src = Pic[i];
}
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>

Feb 16 '07 #1
Share this Question
Share on Google+
10 Replies

P: n/a
ASM
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.mori..._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">
<!-- Original: CodeLifter.com (su*****@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->

// 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[i] = new Image();
preLoad[i].src = Pic[i];
}
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>
<br>
<span id="employee"></span>
</td>
</tr>
</table>

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

</BODY>

</HTML>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Feb 18 '07 #2

P: n/a
"ASM" <st*********************@wanadoo.fr.invalidwrote in message
news:45**********************@news.orange.fr...
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.mori..._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
Feb 18 '07 #3

P: n/a
ASM
-Lost a écrit :
"ASM" <st*********************@wanadoo.fr.invalidwrote in message
news:45**********************@news.orange.fr...
>>
Tell me if this
http://perso.orange.fr/stephane.mori..._img_slide.htm
works with your IE

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.mori...g_slide_ie.htm
but variables here are global
and I think it's not a good idea for IE's memory ?

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Feb 18 '07 #4

P: n/a
ASM said the following on 2/18/2007 11:12 AM:
-Lost a écrit :
>"ASM" <st*********************@wanadoo.fr.invalidwrote in message
news:45**********************@news.orange.fr...
>>>
Tell me if this
http://perso.orange.fr/stephane.mori..._img_slide.htm
works with your IE

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
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.mori...g_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.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Feb 18 '07 #5

P: n/a
ASM
Randy Webb a écrit :
ASM said the following on 2/18/2007 11:12 AM:
>-Lost a écrit :
>>"ASM" <st*********************@wanadoo.fr.invalidwrote in message
news:45**********************@news.orange.fr.. .

Tell me if this
http://perso.orange.fr/stephane.mori..._img_slide.htm
works with your IE

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

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
>Tried to fix it :
http://perso.orange.fr/stephane.mori...g_slide_ie.htm

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>
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Feb 18 '07 #6

P: n/a
ASM said the following on 2/18/2007 2:54 PM:
Randy Webb a écrit :
>ASM said the following on 2/18/2007 11:12 AM:
>>-Lost a écrit :
"ASM" <st*********************@wanadoo.fr.invalidwrote in message
news:45**********************@news.orange.fr. ..
>
Tell me if this
http://perso.orange.fr/stephane.mori..._img_slide.htm
works with your IE

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

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
>>Tried to fix it :
http://perso.orange.fr/stephane.mori...g_slide_ie.htm

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>

Line: 46
Char: 1
Error: Not implemented

Line 46 is this line:

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

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Feb 18 '07 #7

P: n/a
ASM
Randy Webb a écrit :
ASM said the following on 2/18/2007 2:54 PM:
>Randy Webb a écrit :
>>>Tried to fix it :
http://perso.orange.fr/stephane.mori...g_slide_ie.htm

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>

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>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Feb 18 '07 #8

P: n/a
ASM said the following on 2/18/2007 4:58 PM:
Randy Webb a écrit :
>ASM said the following on 2/18/2007 2:54 PM:
>>Randy Webb a écrit :
Tried to fix it :
http://perso.orange.fr/stephane.mori...g_slide_ie.htm

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>

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>
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.
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Feb 18 '07 #9

P: n/a
ASM
Randy Webb a écrit :
ASM said the following on 2/18/2007 4:58 PM:
>Randy Webb a écrit :
>>ASM said the following on 2/18/2007 2:54 PM:
Randy Webb a écrit :
This one ?
<http://perso.orange.fr/stephane.moriaux/truc/fad_img_slide_ie_c.htm>

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.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Feb 19 '07 #10

P: n/a
On Feb 17, 8:23 pm, ASM <stephanemoriaux.NoAd...@wanadoo.fr.invalid>
wrote:
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.mori..._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">
<!-- Original: CodeLifter.com (supp...@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com-->
// 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[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans (duration=2)";
document.images.SlideShow.style.filter="blendTrans (duration=crossFadeDurati*on)";
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>

<br>
<span id="employee"></span>
</td>
</tr>
</table>
<p><center>
<b>
<font face="arial, helvetica" size"-2">The BOA Bombers</font>
</b>
</center><p>
</BODY>
</HTML>

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

Feb 27 '07 #11

This discussion thread is closed

Replies have been disabled for this discussion.