PDA

View Full Version : Help with code please



pamjea
02-02-2010, 02:27 PM
I have a script to have a slideshow in a table that isn't working. Can someone please take pity on me and help me figure out why? The captions should change with the pictures too.

Thanks again, I really appreciate it.

http://www.cincinnatidesigns.com/test%20site/build_new.htm

low tech
02-02-2010, 03:07 PM
Hi

This now works. Whether it's considered good code I don't know.

You need to change the image names back to your original ones. (I changed for testing)

and image sizes to match yr ones.

If you can just copy and paste back, then change img names etc--- should be ok.



<html>

<head>

<!--
Set up the caption font in the following style.
Place the style script in the head of the page.
//-->

<style>
.Caption {
font-family: Arial;
font-weight: bold;
color: #123456;
}
</style>


<script type="text/javascript">

// (C) 2002 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1] = 'logo1.gif';
Picture[2] = 'logo2.gif';
Picture[3] = 'logo3.gif';


// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

Caption[1] = "Our Building";
Caption[2] = "The Building Team";
Caption[3] = "Mahr Remodel";


// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}

</script>


<title>Commercial Building</title>


<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="description" content="Contractor, Construction, Landscape, Painting">
<meta name="keywords" content="Contractor, Construction, Commercial Contractor, Industrial Contractor, General Contractor, Building Contractor, Commercial Painting, Industrial Painting, Painting, Grounds Care, Grounds Maintenance, Lawn Fertilization, Mowing, Trimming, Edging, Weed and Insect control, Snow Plowing, Snow, Salt, Salting, Mulch, Mulching, Landscaping, Landscaping Services, Brush clearing, Brush trimming, Kentucky, Northern KY, Cincinnati, Greater Cincinnati &quot;">
<meta name="author" content="Pam Jeannet">
<meta name="copyright" content="Copyright 2009 Wright Contracting Services, Inc. - all rights reserved">
<meta name="robots" content="all">
<meta http-equiv="content-language" content="en">
</head>



<body onload="runSlideShow();" background="dark gray solid.jpg" vlink="#0fff00" alink="#000000" link="#000000" >

<style type="text/css"><!--
body {
scrollbar-face-color: B8860B;
scrollbar-shadow-color: B8860B;
scrollbar-highlight-color: B8860B;
scrollbar-3dlight-color:#FFE4B5;
scrollbar-darkshadow-color:#FFE4B5;
scrollbar-track-color:#FFE4B5;
scrollbar-arrow-color:#FFE4B5; }
//--></style>


<div align="center">

<br>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="000000" width="750">




<!-- Beginning of CSIM -->
<IMG SRC="new header.jpg" USEMAP="#new header.jpg" WIDTH=796 HEIGHT=228 BORDER=0>
<MAP NAME="new header.jpg">
<AREA SHAPE=RECT COORDS="1,203,53,225" HREF="http://www.cincinnatidesigns.com/w_index.htm" TARGET="_self" ALT="Home" OnMouseOver="window.status='Home Page'; return true">
<AREA SHAPE=RECT COORDS="56,204,218,226" HREF="http://cincinnatidesigns.com/w_build.htm" TARGET="_self" OnMouseOver="window.status='Builder'; return true">
<AREA SHAPE=RECT COORDS="396,202,497,225" HREF="http://cincinnatidesigns.com/w_maintenance.htm" TARGET="_self" OnMouseOver="window.status='Facilities Maintenance'; return true">
<AREA SHAPE=RECT COORDS="500,205,577,225" HREF="http://cincinnatidesigns.com/w_laminate.htm" TARGET="_self" OnMouseOver="window.status='Laminate '; return true">
<AREA SHAPE=RECT COORDS="590,105,793,195" HREF="http://cincinnatidesigns.com/w_map.htm" TARGET="_self" OnMouseOver="window.status='Map Us!'; return true">
<AREA SHAPE=RECT COORDS="580,203,646,225" HREF="http://cincinnatidesigns.com/w_contact.htm" TARGET="_self" OnMouseOver="window.status='Contact Us!'; return true">
<AREA SHAPE=RECT COORDS="647,204,717,226" HREF="http://cincinnatidesigns.com/w_customers.htm" TARGET="_self" OnMouseOver="window.status='Our Partner Customers'; return true">
<AREA SHAPE=RECT COORDS="716,203,793,224" HREF="http://cincinnatidesigns.com/w_about.htm" TARGET="_self" OnMouseOver="window.status='About Us!'; return true">
<AREA SHAPE=RECT COORDS="222,202,311,224" HREF="http://www.cincinnatidesigns.com/w_arrow.htm" TARGET="_self" ALT="Arrowhead Services" OnMouseOver="window.status='Arrowhead Services'; return true">
<AREA SHAPE=RECT COORDS="315,203,387,225" HREF="http://www.cincinnatidesigns.com/w_painters.htm" TARGET="_self" ALT="Painters" OnMouseOver="window.status='Painters'; return true">
</MAP>
<!-- End of CSIM -->


<table border=0 cellpadding=0 cellspacing=0>
<tr>
<!--
The next table cell holds the images.
Set cell and image width and height the same.
The img src must have name=PictureBox in its
tag. Usually the first image in the Picture
array in the script is used here.
//--><td><img src=bld_1.png>
<td width=150 height=51>
<img src=logo1.gif name=PictureBox width=150 height=51></td>

</tr>
<tr>
<!--
The next table cell holds the captions.
This table cell must have id=CaptionBox and
class=Caption in its tag. The default caption
shows whilst loading in all browsers; NS4
will show only the default caption, throughout.
//-->
<td><td id=CaptionBox class=Caption align=center bgcolor=#cococo>
Our Building
</td>
</tr>
</table>




</div>
<div align="center">
<IMG SRC="new_footer1.gif">

</div>


</table>

<p align="center">

<A href="mailto:pamj.wright@fuse.net">Email Pam</a></p>


<p align="center">
<EM><h5>Site Design by<br><a href="http://www.cincinnatidesigns.com"> Cincinnati Designs</EM></a>

<br>

</body>
</html>

low tech

low tech
02-02-2010, 03:22 PM
hi
oh sorry

I also took out bgcolor="#000000" from <body >

so you might want to put that back (sorry I forgot)

I took out <!- above <script> (it looked like not needed)

and I added </body> closing tag (you had missed it)

pamjea
02-02-2010, 07:32 PM
so does this mean I can't have the size of the box the size that is on the graphic? I really appreciate your help.

low tech
02-03-2010, 12:04 AM
Hi

No, you can have everything as it was, only the slideshow should be working. (All works for me, tested IE8 only)

I have done it for you.

Just copy paste this code back to the original page.

Providing you haven't done any major changes to yr page, it will be exactly as the page u provided.




<html>

<head>

<!--
Set up the caption font in the following style.
Place the style script in the head of the page.
//-->

<style>
.Caption {
font-family: Arial;
font-weight: bold;
color: #123456;
}
</style>


<script type="text/javascript">

// (C) 2002 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this header.

// ==============================
// Set the following variables...
// ==============================

// Set the slideshow speed (in milliseconds)
var SlideShowSpeed = 3000;

// Set the duration of crossfade (in seconds)
var CrossFadeDuration = 3;

var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this

// Specify the image files...
// To add more images, just continue
// the pattern, adding to the array below.
// To use fewer images, remove lines
// starting at the end of the Picture array.
// Caution: The number of Pictures *must*
// equal the number of Captions!

Picture[1] = 'bld_2.png';
Picture[2] = 'team.jpg';
Picture[3] = 'mahr.jpg';


// Specify the Captions...
// To add more captions, just continue
// the pattern, adding to the array below.
// To use fewer captions, remove lines
// starting at the end of the Caption array.
// Caution: The number of Captions *must*
// equal the number of Pictures!

Caption[1] = "Our Building";
Caption[2] = "The Building Team";
Caption[3] = "Mahr Remodel";


// =====================================
// Do not edit anything below this line!
// =====================================

var tss;
var iss;
var jss = 1;
var pss = Picture.length-1;

var preLoad = new Array();
for (iss = 1; iss < pss+1; iss++){
preLoad[iss] = new Image();
preLoad[iss].src = Picture[iss];}

function runSlideShow(){
if (document.all){
document.images.PictureBox.style.filter="blendTrans(duration=2)";
document.images.PictureBox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.PictureBox.filters.blendTrans.Apply();}
document.images.PictureBox.src = preLoad[jss].src;
if (document.getElementById) document.getElementById("CaptionBox").innerHTML= Caption[jss];
if (document.all) document.images.PictureBox.filters.blendTrans.Play();
jss = jss + 1;
if (jss > (pss)) jss=1;
tss = setTimeout('runSlideShow()', SlideShowSpeed);
}

</script>


<title>Commercial Building</title>


<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="description" content="Contractor, Construction, Landscape, Painting">
<meta name="keywords" content="Contractor, Construction, Commercial Contractor, Industrial Contractor, General Contractor, Building Contractor, Commercial Painting, Industrial Painting, Painting, Grounds Care, Grounds Maintenance, Lawn Fertilization, Mowing, Trimming, Edging, Weed and Insect control, Snow Plowing, Snow, Salt, Salting, Mulch, Mulching, Landscaping, Landscaping Services, Brush clearing, Brush trimming, Kentucky, Northern KY, Cincinnati, Greater Cincinnati &quot;">
<meta name="author" content="Pam Jeannet">
<meta name="copyright" content="Copyright 2009 Wright Contracting Services, Inc. - all rights reserved">
<meta name="robots" content="all">
<meta http-equiv="content-language" content="en">
</head>



<body onload="runSlideShow();" background="dark gray solid.jpg" vlink="#0fff00" alink="#000000" link="#000000" >

<style type="text/css"><!--
body {
scrollbar-face-color: B8860B;
scrollbar-shadow-color: B8860B;
scrollbar-highlight-color: B8860B;
scrollbar-3dlight-color:#FFE4B5;
scrollbar-darkshadow-color:#FFE4B5;
scrollbar-track-color:#FFE4B5;
scrollbar-arrow-color:#FFE4B5; }
//--></style>


<div align="center">

<br>

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="000000" width="750">




<!-- Beginning of CSIM -->
<IMG SRC="new header.jpg" USEMAP="#new header.jpg" WIDTH=796 HEIGHT=228 BORDER=0>
<MAP NAME="new header.jpg">
<AREA SHAPE=RECT COORDS="1,203,53,225" HREF="http://www.cincinnatidesigns.com/w_index.htm" TARGET="_self" ALT="Home" OnMouseOver="window.status='Home Page'; return true">
<AREA SHAPE=RECT COORDS="56,204,218,226" HREF="http://cincinnatidesigns.com/w_build.htm" TARGET="_self" OnMouseOver="window.status='Builder'; return true">
<AREA SHAPE=RECT COORDS="396,202,497,225" HREF="http://cincinnatidesigns.com/w_maintenance.htm" TARGET="_self" OnMouseOver="window.status='Facilities Maintenance'; return true">
<AREA SHAPE=RECT COORDS="500,205,577,225" HREF="http://cincinnatidesigns.com/w_laminate.htm" TARGET="_self" OnMouseOver="window.status='Laminate '; return true">
<AREA SHAPE=RECT COORDS="590,105,793,195" HREF="http://cincinnatidesigns.com/w_map.htm" TARGET="_self" OnMouseOver="window.status='Map Us!'; return true">
<AREA SHAPE=RECT COORDS="580,203,646,225" HREF="http://cincinnatidesigns.com/w_contact.htm" TARGET="_self" OnMouseOver="window.status='Contact Us!'; return true">
<AREA SHAPE=RECT COORDS="647,204,717,226" HREF="http://cincinnatidesigns.com/w_customers.htm" TARGET="_self" OnMouseOver="window.status='Our Partner Customers'; return true">
<AREA SHAPE=RECT COORDS="716,203,793,224" HREF="http://cincinnatidesigns.com/w_about.htm" TARGET="_self" OnMouseOver="window.status='About Us!'; return true">
<AREA SHAPE=RECT COORDS="222,202,311,224" HREF="http://www.cincinnatidesigns.com/w_arrow.htm" TARGET="_self" ALT="Arrowhead Services" OnMouseOver="window.status='Arrowhead Services'; return true">
<AREA SHAPE=RECT COORDS="315,203,387,225" HREF="http://www.cincinnatidesigns.com/w_painters.htm" TARGET="_self" ALT="Painters" OnMouseOver="window.status='Painters'; return true">
</MAP>
<!-- End of CSIM -->


<table border=0 cellpadding=0 cellspacing=0>
<tr>
<!--
The next table cell holds the images.
Set cell and image width and height the same.
The img src must have name=PictureBox in its
tag. Usually the first image in the Picture
array in the script is used here.
//--><td><img src=bld_1.png>
<td width=320 height=297>
<img src="bld_2.png" name="PictureBox" width="320" height="297"></td>

</tr>
<tr>
<!--
The next table cell holds the captions.
This table cell must have id=CaptionBox and
class=Caption in its tag. The default caption
shows whilst loading in all browsers; NS4
will show only the default caption, throughout.
//-->
<td><td id="CaptionBox" class="Caption" align="cente"r bgcolor="#cococo">
Our Building
</td>
</tr>
</table>




</div>
<div align="center">
<IMG SRC="new_footer1.gif">

</div>


</table>

<p align="center">

<A href="mailto:pamj.wright@fuse.net">Email Pam</a></p>


<p align="center">
<EM><h5>Site Design by<br><a href="http://www.cincinnatidesigns.com"> Cincinnati Designs</EM></a>

<br>

</body>
</html>




EDIT Also checked in FireFox:-)

pamjea
02-03-2010, 02:36 PM
Thanks so much for your help! The only thing I noticed (want to see if you saw it too) was a little bit of lag in the caption changing. I'm thrilled that it works though! Thanks again!!

low tech
02-03-2010, 03:23 PM
Hi
I'm only a beginner so I wouldn't want to get iinto trying to change anything further.

But my advice would be that if you unhappy with the scipt to repost a new thread (with code), expalin the problem and ask:

if anybody can improve the code to meet yr requirements
or
if anybody has a better code that performs teh same task ie rotates picture with slide content.
or
maybe somebody will poiint you in a direction where you can find one.


hope that is ok

LT

low tech
02-04-2010, 03:31 AM
Hi

I went to take another look at yr page http://www.cincinnatidesigns.com/tes.../build_new.htm

I didn't notice any unacceptable delay between picture and caption.

However I believe there are still problems.

the RED hightlight appears to be not needed. It looks like a leftover tag.
Also you are missing "" quotes around your width and height.


<td><img src=bld_1.jpg>
<td width=315 height=290>
<img src="our_bld.jpg" name="PictureBox" width="315" height="290"></td>


AND in the caption area, the RED part again seems to be left over and not needed.


<td bgcolor="#cococo">
<td id="CaptionBox" class="Caption" align="center" bgcolor="#cococo">
Our Building
</td>


As far as I know <td> TAGS SHOULD be paired <td></td>. But I think your ones are just left over code. Not needed.

LT

pamjea
03-04-2010, 11:43 PM
Thank you again!