JavaScript - Fade Images in Table background

**conrads** · 04-02-2007, 02:37 PM

1) Script Title: JavaScript - Fade Images in Table background

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...deshow_dev.htm

3) Describe problem: This is a great script for fading images but I am trying to get it to work for a background image in a table

I have found a script and process that does work for a background image in a table- however the script is very basic and inadequate (does not fade and is not cross browser) - but the process works well.
See this url http://www.sitepoint.com/forums/showthread.php?t=452865

I am looking for a way to get the fadeinslideshow script to work in a table background -

Thanks for any help in this matter

**jscheuer1** · 04-02-2007, 03:30 PM

The second script you mention would require at least one additional rotating image placed in the foreground in order to be able to use the fade method of the first script that you mention. This would require some minor style gymnastics in addition to a major script rewrite to work. So, I would suggest using the first script 'as is' plus a little style gymnastics:

Code:

<div style="position:relative;">
<div style="position:absolute;"><script type="text/javascript">
new fadeshow(fadeimages2, 140, 225, 0, 3000, 1)

</script></div>
<table style="position:relative;width:140px;height:225px;z-index:100000000;color:white">
<tr>
<td align="center" valign="middle">Hello!</td>
</tr>
</table></div>

**conrads** · 04-02-2007, 05:27 PM

John
Thanks for the Reply

I used the tth script at http://www.dynamicdrive.com/dynamici...deshow_dev.htm and removed the var fadeimages2 since I only want 1 background picture and placed it in a js file called rotate.js and called it in my html file in the head section

So I am trying to follow your reply - I dont follow where to place your code
Can you help one more time?

Thanks so much!!

**jscheuer1** · 04-02-2007, 05:34 PM

It goes on the page at the spot where you want this table, it is the table. Make sure the script call refers to the correct array, and that the script call and table style refer to the correct dimensions.

**conrads** · 04-02-2007, 06:10 PM

John

I feel like a Mental Midget!

Here is my test .htm doc
I cannot get it to work

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript1.2" src="/jsfiles/rotate2.js"></script>
</head>

<body>

<div style="position:relative;">
<div style="position:absolute;"><script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 3000, 1)

</script></div>
<table style="position:relative;width:400px;height:200px;z-index:100000000;color:white">

<tr align="left" valign="top">
<td colspan="2" class="text14">Here at TravelOnward we represent some of the finest Spa Resorts in the Country. Not only will you have a trip of a lifetime but you most certainly will have to opportunity to have some life changing experences. If your looking to not only to be pampered by the finest spa treatments in the world, but need to revitalize yourself with new or enhanced experiences: </td>
<td class="text14"> </td>
</tr>
<tr>
<td width="220" align="left" valign="top" class="text12">Hiking or Biking<BR>
Yoga, Pilates or Tai Chi<BR>
Heath Speacialist or Excercise Physiologist<BR>
Golf Performance<BR>
Equine Lessons </td>
<td width="100" align="left" valign="top" class="text12">Spriritual Awareness<BR>
Nutrition and Food<BR>
Life Coaching<BR>
Meditiation<BR>
Dance - Ballet, Nia, African or Brazilan </td>
<td width="64" align="left" valign="top" class="text12"> </td>
</tr>
</table>
</body>
</html>

The rotate2.js is attached:

Thanks Again!

**Script Kiddie** · 04-02-2007, 07:51 PM

I think that it doesn't work because the rotate2 file that you have attached has a *.txt extension (ends in .txt), when it should end is ".js". To do this, re-open the file in Notepad and save its filename as "rotate2.js" instead of just rotate2.

**jscheuer1** · 04-02-2007, 09:33 PM

Make sure you can get the slide show itself working alone on a page. If so, put up a demo of your page if you are still having problems and provide a link to it. In fact, if you are having problems with just the slide show, put up a demo of that and provide a link to it.

And - DD Usage terms require that the script credit appear on the page(s) that use the script, not just in the external file.

**conrads** · 04-02-2007, 10:34 PM

I got it working -
your code was perfect! - it was a silly mistake on my part

I cannot thank you enough - 3 days a trial and error finally over

Appreciate your timely response

Thread: JavaScript - Fade Images in Table background

Thread Tools

Search Thread

JavaScript - Fade Images in Table background

Bookmarks

Bookmarks

Posting Permissions