473,387 Members | 1,532 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Changing text with picture

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
10 1764
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
"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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Calan | last post by:
I have a form with some picture boxes as buttons. I'm setting the picture property to a gif file for "normal", and to a different gif for the "pressed" state. This works fine. I get into trouble...
3
by: JJM | last post by:
Can anyone please help me with this I'm a total newbie and just getting started in JS. I have a page where I would like to display a picture and a short textual explanation of the picture. I...
4
by: Dj Frenzy | last post by:
Hi, I know how to use javascript to change a background image to another background image, and how to change a background colour to another background colour. Is there a way to change an image to a...
23
by: Wade | last post by:
08122005 1505 GMT-5 Hello. I am working on a webpage for the local school (just before school starts). Their outside hired company really screwed things up. Im trying to get their computers up...
6
by: John Ortt | last post by:
Hi there everyone, I have a part info form which has a faded image of our company logo as a background. I want to replace the faded image with a bright red warning image on items which have run...
2
by: Casey Miller | last post by:
I have a site, http://www.onemorewebsite.com, that has a menu on the left side and a picture on the right side with a middle div for content in the middle. When I mouse over the menu, the picture...
2
by: austinra | last post by:
i have a splash screen that i want to change a picture once a second for three seconds; then load my main form. what i want it to do is load a picture into a picture box; start a timer which will...
1
by: larystoy | last post by:
Newbie to VB6, comfortable with HTML, MS Access so I ain't totally stupid. Maybe just dumb. Am writing a Biblical Quiz program where I need to change a picture and midi sound file each time a user...
8
by: Jonathan Sachs | last post by:
I'm trying to compose a list of items, each of which consists of text that wraps around a picture at the left margin. The examples I have seen tell me to do it like this: <p><img src="xxxx.jpg"...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.