Loading...
HOME
 |
Javascript Slideshow Tutorial - How to make a slideshow in JavaScript | ||
Discussion by andrewsmithy with 33 Replies.
Last Update: March 10, 2012, 9:43 pm ( View Rated (9) ) (View Latest) | Page 1 of 2 pages. | ||
 |
|||
 |
 |
|
 |
 |
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
 |
|
|
JavaScript Slideshow Tutorial
I'm going to show you how to make a impressive JavaScript slideshow. First, you're probably asking: why would I want to make a slideshow in JavaScript? There are a number of reasons. First, you don't have to build a new HTML page for each picture. Secondly, the page will load much faster because the of the compactness of the page.
Ok let's get started with this example.
First we'll add a <script> tag in the <head> of our HTML document. In that script tag we will build the following:
first = 1;
last = 4;
current = 1;
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
First, I want you to look at the variables. first describes the first picture id, which is 1; last defines the last picture, and current holds the index of the current picture. The function nextPicture() hides the currently displayed picture, and displays the next picture using CSS controls. The function previousPicture() is almost exactly the same as nextPicture() except that it travels back one picture. Notice that current variable holds the current picture index. We are going to make this page styled through CSS. Here is my CSS code. you can change this to whatever you want. Put this in the <style> tag of your <head> tag.
.slideShow {
background-color: #ebebeb;
text-align: center;
margin-bottom: 10px;
padding: 5px;
}
.slides {
position: relative;
z-index: 1;
display: none;
}
.setTitle, .slideTitle {
font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
}
.setTitle {
color: #995a01;
font-size: 14px;
font-weight: bold;
}
.slideTitle {
color: #666666;
font-size: 12px;
}
.controls {
position: relative;
z-index: 10;
}
#slide1 {
display: block;
}
img {
border: outset 1px #999999;
}
Ok, now we are going to put our pictures in our page. We do this through standard HTML. I'll explain this part after we go over the code.
<div class="slideShow">
<div class="setTitle">Jaguars Track and Field Photos</div>
<div id="slide1" class="slides">
<div class="slideTitle">Picture 01</div>
<img src="pic01.jpg" height="300" width="400" border="0" />
</div>
<div id="slide2" class="slides">
<div class="slideTitle">Picture 02</div>
<img src="pic02.jpg" height="300" width="400" border="0" />
</div>
<div class="controls">
<a href="javascript:previousPicture()" style="margin: 10px;">« Previous</a>
<a href="javascript:nextPicture()" style="margin: 10px;">Next »</a>
</div>
</div>
This code goes in the <body> tag. I just put two slides on here, but you can easily add more. Here is the format for adding more slides. You place another <div> inside of the <div class="slideShow"> like this:
<div id="slideShow">
...
<div id="slide10">
<div class="slideTitle">Your Slide Title</div>
<img src="pic10.jpg" height="600" width="430" border="0" />
</div>
....
</div>
Ok, when all of this is put together, you have a quite nice Javascript-enhanced slideshow! Here is the code for the whole page. Remember to edit the variable last to be the same as your last slide number.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Slideshow</title>
<script language="JavaScript" type="text/javascript">
//<!--
//<![CDATA[
first = 1;
last = 4;
current = 1;
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
//]]>
// -->
</script>
<style type="text/css">
<!--
.slideShow {
background-color: #ebebeb;
text-align: center;
margin-bottom: 10px;
padding: 5px;
}
.slides {
position: relative;
z-index: 1;
display: none;
}
.setTitle, .slideTitle {
font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
}
.setTitle {
color: #995a01;
font-size: 14px;
font-weight: bold;
}
.slideTitle {
color: #666666;
font-size: 12px;
}
.controls {
position: relative;
z-index: 10;
}
#slide1 {
display: block;
}
img {
border: outset 1px #999999;
}
-->
</style>
</head>
<body>
<div class="slideShow">
<div class="setTitle">Your Title</div>
<div id="slide1" class="slides">
<div class="slideTitle">Picture 01</div>
<img src="pic01.jpg" height="300" width="400" border="0" />
</div>
<div id="slide2" class="slides">
<div class="slideTitle">Picture 02</div>
<img src="pic02.jpg" height="300" width="400" border="0" />
</div>
<div id="slide3" class="slides">
<div class="slideTitle">Picture 03</div>
<img src="pic03.jpg" height="300" width="400" border="0" />
</div>
<div id="slide4" class="slides">
<div class="slideTitle">Picture 04</div>
<img src="pic04.jpg" height="300" width="400" border="0" />
</div>
<div class="controls">
<a href="javascript:previousPicture()" style="margin: 10px;">« Previous</a>
<a href="javascript:nextPicture()" style="margin: 10px;">Next »</a>
</div>
</div>
</body>
</html>
There you go! If you have any problems, suggestions, or questions please reply to this post. If you like this code, please rate me! Thanks
I'm going to show you how to make a impressive JavaScript slideshow. First, you're probably asking: why would I want to make a slideshow in JavaScript? There are a number of reasons. First, you don't have to build a new HTML page for each picture. Secondly, the page will load much faster because the of the compactness of the page.
Ok let's get started with this example.
First we'll add a <script> tag in the <head> of our HTML document. In that script tag we will build the following:
CODE
first = 1;
last = 4;
current = 1;
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
First, I want you to look at the variables. first describes the first picture id, which is 1; last defines the last picture, and current holds the index of the current picture. The function nextPicture() hides the currently displayed picture, and displays the next picture using CSS controls. The function previousPicture() is almost exactly the same as nextPicture() except that it travels back one picture. Notice that current variable holds the current picture index. We are going to make this page styled through CSS. Here is my CSS code. you can change this to whatever you want. Put this in the <style> tag of your <head> tag.
CODE
.slideShow {
background-color: #ebebeb;
text-align: center;
margin-bottom: 10px;
padding: 5px;
}
.slides {
position: relative;
z-index: 1;
display: none;
}
.setTitle, .slideTitle {
font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
}
.setTitle {
color: #995a01;
font-size: 14px;
font-weight: bold;
}
.slideTitle {
color: #666666;
font-size: 12px;
}
.controls {
position: relative;
z-index: 10;
}
#slide1 {
display: block;
}
img {
border: outset 1px #999999;
}
Ok, now we are going to put our pictures in our page. We do this through standard HTML. I'll explain this part after we go over the code.
CODE
<div class="slideShow">
<div class="setTitle">Jaguars Track and Field Photos</div>
<div id="slide1" class="slides">
<div class="slideTitle">Picture 01</div>
<img src="pic01.jpg" height="300" width="400" border="0" />
</div>
<div id="slide2" class="slides">
<div class="slideTitle">Picture 02</div>
<img src="pic02.jpg" height="300" width="400" border="0" />
</div>
<div class="controls">
<a href="javascript:previousPicture()" style="margin: 10px;">« Previous</a>
<a href="javascript:nextPicture()" style="margin: 10px;">Next »</a>
</div>
</div>
This code goes in the <body> tag. I just put two slides on here, but you can easily add more. Here is the format for adding more slides. You place another <div> inside of the <div class="slideShow"> like this:
CODE
<div id="slideShow">
...
<div id="slide10">
<div class="slideTitle">Your Slide Title</div>
<img src="pic10.jpg" height="600" width="430" border="0" />
</div>
....
</div>
Ok, when all of this is put together, you have a quite nice Javascript-enhanced slideshow! Here is the code for the whole page. Remember to edit the variable last to be the same as your last slide number.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Slideshow</title>
<script language="JavaScript" type="text/javascript">
//<!--
//<![CDATA[
first = 1;
last = 4;
current = 1;
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
//]]>
// -->
</script>
<style type="text/css">
<!--
.slideShow {
background-color: #ebebeb;
text-align: center;
margin-bottom: 10px;
padding: 5px;
}
.slides {
position: relative;
z-index: 1;
display: none;
}
.setTitle, .slideTitle {
font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
}
.setTitle {
color: #995a01;
font-size: 14px;
font-weight: bold;
}
.slideTitle {
color: #666666;
font-size: 12px;
}
.controls {
position: relative;
z-index: 10;
}
#slide1 {
display: block;
}
img {
border: outset 1px #999999;
}
-->
</style>
</head>
<body>
<div class="slideShow">
<div class="setTitle">Your Title</div>
<div id="slide1" class="slides">
<div class="slideTitle">Picture 01</div>
<img src="pic01.jpg" height="300" width="400" border="0" />
</div>
<div id="slide2" class="slides">
<div class="slideTitle">Picture 02</div>
<img src="pic02.jpg" height="300" width="400" border="0" />
</div>
<div id="slide3" class="slides">
<div class="slideTitle">Picture 03</div>
<img src="pic03.jpg" height="300" width="400" border="0" />
</div>
<div id="slide4" class="slides">
<div class="slideTitle">Picture 04</div>
<img src="pic04.jpg" height="300" width="400" border="0" />
</div>
<div class="controls">
<a href="javascript:previousPicture()" style="margin: 10px;">« Previous</a>
<a href="javascript:nextPicture()" style="margin: 10px;">Next »</a>
</div>
</div>
</body>
</html>
There you go! If you have any problems, suggestions, or questions please reply to this post. If you like this code, please rate me! Thanks
adding backgroundimage slide show.
Javascript Slideshow Tutorial
What would be the coding of adding backgroundimage slide show in javascript?
-shiv
Javascript Slideshow Tutorial
What would be the coding of adding backgroundimage slide show in javascript?
-shiv
This is actually pretty cool. Tested it and works like a charm. Is there any way in java to protect the pictures so they cant be downloaded using right-click once they're displayed?
QUOTE (FeedBacker)
adding backgroundimage slide show.Javascript Slideshow Tutorial
What would be the coding of adding backgroundimage slide show in javascript?
-shiv
Link: view Post: 365416
The easiest way of background image slideshow is by assigning different backgrounds to different <div> tags.
So the following part of above code:
CODE
<div id="slideShow">...
<div id="slide10">
Some Text Here...
</div>
....
</div>
can be changed to:
CODE
<div id="slideShow">...
<div id="slide10" style="background-image:url(bg_image_10.bmp)">
Some Text Here...
</div>
....
</div>
The style attribute can be given for all <div> tags. And if needed the text in all <div> tags can be same - this creates a background changing effect.
I hope that solved your problem
Where I can get the source code of this example?
Dooood Thats sooo cool love it thanks so much
how can i make it auto-play/play
thanks
how can i make it auto-play/play
thanks
QUOTE
This is actually pretty cool. Tested it and works like a charm. Is there any way in java to protect the pictures so they cant be downloaded using right-click once they're displayed?No, there is absolutely no way to stop a persistent person from getting your images.
you can disable the context menu, and call alerts on right click etc, but there are plenty of other ways of getting the image.
I have seen people position transparencies over their images, so you download a blank image when you try and right click it to save it.
Unfortunately, the browser needs the URL of the image to show it, for which reason, there is no way of protecting it.
QUOTE (agdurrette)
Dooood Thats sooo cool love it thanks so muchhow can i make it auto-play/play
thanks
Link: view Post: 414779
As soon as I set this up the first thing I did was make it autoplay, it just makes sense. If you haven't already figured it out or given up, here's how it goes:
add two elements:
CODE
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
setTimeout(nextPicture, 2500); //NEW LINE in the end of nextPicture function
} //a self repeating call at a delay of 2.5 secs
//adjust the seconds to your liking
(the line which needs to be added should be 24.)
then in line 79 change <body> to:
(it will be 78 if you haven't already made the first change)
CODE
<body onload="setTimeout(nextPicture, 2500);">
I'm sure within a day or two I'll get bored with this and make the pictures fade in and out to black and/or white. I'll probably give a how to on that as well.
Let me know if this works for you!
Start and STOPJavascript Slideshow Tutorial
It is nice that the slide show will start playing when loaded but what if you want to stop it and use the forward and backwards buttons? How about a pause or stop button? Any ideas on code for that?
Thanks
-question by brian
Slide Show JavaScript with Text ControlsJavascript Slideshow Tutorial
I need a JavaScript slideshow class customizable for text controlsInstead of thumbnails. I know I have seen them before, but I can't seemTo find one now. Anybody know of a open-source script that would doSomething like this. The highlighted text and slide auto scrolls, butCan be selected onMouseOver and clicking navigates to a specified URL. Is this something you have already coded or would be willing to quote?
-question by Jim Hollomon
AwesomeJavascript Slideshow Tutorial
Thanks so much for the code it's awesome![img]/txtmngr/images/smileys/smiley1.Gif[/img]
It seems like theAuto-play function is only working for the first couple of pictures,And stops at pic2. Do I have my code in the wrong place?
Thanks,
Jen
http://whatatoon.Servegame.Org/slideshow.Php
BrilliantJavascript Slideshow Tutorial
Thank you so much-this is totally brilliant and thanks for the auto-play version.I don't really know Java so thanks for explaining it piece by piece and them putting it together like I said Brilliant!
-reply by lordofsarcasm
Javascript Slideshow TutorialJavascript Slideshow Tutorial
This works great and cool.
One thing I found that, when I check on the next button twice or thrice the speed of the next or back slide increases and increases it keeps increases the keeps increasing.I have no control on the slide show.Is there a way to put pause or play button and how.
Thanks shan
-reply by Java learner
Multiple slideshows on one pageJavascript Slideshow Tutorial
First of all, thank you for doing this, it is extremely useful and straight forward, the best html java tutorial I've seen so far. Great Work. Is there anyway of including more Slideshows than one, though? When I try it, the second one browses the first one. And they have the same size?
Is there any solution to thisThank you again
-reply by Martin Samuelson
How to add a small icon photo spread Javascript Slideshow TutorialThis is great! I was curious, though, what it would take to add a miniature photo spreadsheet to one side of this slide show? I have several bunches of photos that I wanted to create a small spreadsheet of. When the user clicked one of the photos, an enlarged photo would appear to the right or left of this small spreadsheet. Is that possible?
QUOTE (asdftheking)
As soon as I set this up the first thing I did was make it autoplay, it just makes sense. If you haven't already figured it out or given up, here's how it goes:add two elements:
CODE
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
setTimeout(nextPicture, 2500); //NEW LINE in the end of nextPicture function
} //a self repeating call at a delay of 2.5 secs
//adjust the seconds to your liking
(the line which needs to be added should be 24.)
then in line 79 change <body> to:
(it will be 78 if you haven't already made the first change)
CODE
<body onload="setTimeout(nextPicture, 2500);">
I'm sure within a day or two I'll get bored with this and make the pictures fade in and out to black and/or white. I'll probably give a how to on that as well.
Let me know if this works for you!
Link: view Post: 418259
Really good tutorial, But I cant quite figure out the code to make the picture fade out and in when the next button is selected. And i also wanted to add something like 1/4 so the user knows how many images their are in total,
i'm new to all this, does anyone have any ideas?
Thanks
Kam.
I keep just getting a list of pictures - no slideshowJavascript Slideshow Tutorial
Instead of seeing a slideshow, I keep coming up with a 10 pictures in a line going down the page. What's going on? I've checked the code and it all seems to be right..
Help?!?
-question by Kate
how to add fading effect and auto running in this slideshowJavascript Slideshow Tutorial
Hi,
I liked this slideshow. But how to add fading images effect and auto run with next previous control in this slideshow.
Fade-In/Fade OutJavascript Slideshow Tutorial
Great tutorial!
Would really like to see this have a couple of options:
Fade-In/Fade Out or Crossfade (or other transition -- of course, simple is the key!)
Thumbnailer (To provide a sort of filmstrip or contact sheet from which user can select)
Fit to screen or Fit Within Defined Area.: A way to "embed" this code into, say, a pre-sized region. The interface changes size and shape based upon the size of each picture. Would like to see, for example, the entire show (filmstrips and all) fit within a "window" of say, 600x450. I could tuck it off to the side and still have other content flowing around it.
ERROR:
However, I'm getting an error of it flipping radically from one image to the next if I click the Next/Previous button(s). It seems to throw the timing off and all hell breaks loose! Anyone else experience this? Is there a fix for it?
Again, excellent work!
-question by DanielNotDan
Loop wonJavascript Slideshow Tutorial
I don't understand what I've done wrong but the loop function refuses to work in the nextpicture and lastpicture functions.
The code is identical to above but after the last slide it just draws a blank page and then hitting previous doesn't bring it back to the last slide and vice versa with going the other direction.
Been puzzling at it for hours and I can't see the problem which probably means its blindingly obvious. Any ideas?
change the imageJavascript Slideshow Tutorial
Hi,
I need a javascript code to change the image from one image to another by mouse click
for example if a user click over the image the should change to next image.
can u pls help me??
-question by ausmaya
Sir, if I may call you sir, are a genius and I can't thank you enough for helping me solve my need for a slideshow... I sincerely hope that you have an awesome year!
Brett
Can't thank you enough for your tutorial. I really appreciate the explanations. Thanks a million.
Thanks for the code man.........i really appreciate it............ 
Hi!
Tanks for this scripts.
What about the automatic slideshow with description associate to each picture.
Tanks for this scripts.
What about the automatic slideshow with description associate to each picture.
Your post was helpful in showing me how to add a next and previous button to the individual photos for my website photo galleries. My website has 4 photo galleries with thumbnail photos in each gallery. When clicking on an individual thumbnail, an enlarged photo appears along with a menu above it that points to the other photo galleries and a return button, which returns you to the thumbnail photo gallery. I am trying to add a prev and next button to the menu bar for the enlarged photo (rather than having to go back to the thumbnail gallery and then click on each individual thumbnail to view as an enlarged photo). I was somewhat successful using your code where the next and previous buttons appear in the menu bar above the enlarged photo, but not able to get them to advance to the next enlarged photo or return to the previous enlarged photo. Any advice would be appreciated. Thank you.
Hi, first this was so wonderful and worked beautifully. Thank-you.
And This might be a really dumb question, but ...
I saved the code as a html page with dreamweaver but I wanted to put the slide show just under my header on the homepage of my site.. do you have any idea how I can go about putting this code into my existing page?
If it doesn't make sense dont worry about it.
Thanks again for putting this up!
And This might be a really dumb question, but ...
I saved the code as a html page with dreamweaver but I wanted to put the slide show just under my header on the homepage of my site.. do you have any idea how I can go about putting this code into my existing page?
If it doesn't make sense dont worry about it.
Thanks again for putting this up!
For anyone having the problem where all your pictures display in a row and then trim themselves down to 1 picture each time the "next" button is clicked...
simply add a function to your script
for ( counter=2; counter<= last; counter++)
{
object = document.getElementById('slide' + counter);
object.style.display = 'none';
}
}
and then insert into your body tag.
simply add a function to your script
CODE
function hideExtra() {for ( counter=2; counter<= last; counter++)
{
object = document.getElementById('slide' + counter);
object.style.display = 'none';
}
}
and then insert
CODE
onload="hideExtra();"
Great Code.. Some of the best I have seen in a while.. That is really sad knowing that it is fairly simple..
There are just a lot of bad lines of code out there... anyway I am having a few problems.. but I have adjusted the code a little bit...
here is the URL if you would like to take a look... http://www.trafficjamevents.com/NewTestWebsite/
I am also looking to make the slides click-able where the first one with the credit card will go to Lightbox and show all of the credit cards.. the second and third will go to different pages on the site.
Anyway if anyone has any suggestions please let me know. I am a little stuck here and I think it is something easy that I am just not seeing.
Thanks
Scott
There are just a lot of bad lines of code out there... anyway I am having a few problems.. but I have adjusted the code a little bit...
here is the URL if you would like to take a look... http://www.trafficjamevents.com/NewTestWebsite/
I am also looking to make the slides click-able where the first one with the credit card will go to Lightbox and show all of the credit cards.. the second and third will go to different pages on the site.
Anyway if anyone has any suggestions please let me know. I am a little stuck here and I think it is something easy that I am just not seeing.
Thanks
Scott
This slide is great... but my website is very dynamic.. I am having problems when I click on the next slide image on the right side of the page it removes the first image but doesn't seem to put up the second or third image.. the code is below..
<head>
<title>Traffic Jam Events</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script language="JavaScript" type="text/javascript">
//<!--
//<![CDATA[
first = 1;
last = 3;
current = 1;
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
setTimeout(nextPicture, 4500);
}
function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
function hideExtra() {
for ( counter=2; counter<= last; counter++)
{
object = document.getElementById('slide' + counter);
object.style.display = 'none';
}
}
</script>
<script language="JavaScript" type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
.slideShow {
background-color: #000000;
text-align: center;
margin-bottom: 0px;
padding: 0px;
}
.slides {
position: relative;
z-index: 1;
display: none;
}
.setTitle, .slideTitle {
font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
}
.setTitle {
color: #995a01;
font-size: 14px;
font-weight: bold;
}
.control {
position: relative;
z-index: 1;
}
#slide1 {
display: block;
}
img {
border: outset 0px #999999;
}
</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Thu May 19 19:59:49 GMT-0400 (EDT) 2011-->
</head>
<body bgcolor="#000000" onload="hideExtra(); MM_preloadImages('images/TrafficJamEventsWebsite519-headerRoll_r1_c2.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c3.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c4.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c5.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c6.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c8.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c9.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r3_c7.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c2.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c5.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c6.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c7.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c8.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c9.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c10.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c2.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c3.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c4.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c6.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c8.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c9.png'); initLightbox()">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="TrafficJamEventsWebsite519-header.png" fwstyle="Dreamweaver" fwdocid = "1967789409" fwnested="0" -->
<tr>
<td><img name="TrafficJamEventsWebsite519header_r1_c1" src="images/TrafficJamEventsWebsite519-header_r1_c1.png" width="25" height="60" border="0" id="TrafficJamEventsWebsite519header_r1_c1" alt="" /></td>
<td><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image50','','images/TrafficJamEventsWebsite519-headerRoll_r1_c2.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c2.png" alt="Home" name="Image50" width="58" height="60" border="0" id="Image50" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/SpecialServices" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image51','','images/TrafficJamEventsWebsite519-headerRoll_r1_c3.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c3.png" alt="Special Services" name="Image51" width="128" height="60" border="0" id="Image51" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/About" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image52','','images/TrafficJamEventsWebsite519-headerRoll_r1_c4.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c4.png" alt="About Traffic Jam Events" name="Image52" width="76" height="60" border="0" id="Image52" /></a></td>
<td><a href="http://www.OurSampleLibrary.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image54','','images/TrafficJamEventsWebsite519-headerRoll_r1_c5.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c5.png" alt="Samples of our Work" name="Image54" width="72" height="60" border="0" id="Image54" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/Contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image53','','images/TrafficJamEventsWebsite519-headerRoll_r1_c6.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c6.png" alt="Contact Us" name="Image53" width="99" height="60" border="0" id="Image53" /></a></td>
<td><img name="TrafficJamEventsWebsite519header_r1_c7" src="images/TrafficJamEventsWebsite519-header_r1_c7.png" width="343" height="60" border="0" id="TrafficJamEventsWebsite519header_r1_c7" alt="" /></td>
<td><a href="http://www.AmericanMarketingAssociation.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image61','','images/TrafficJamEventsWebsite519-headerRoll_r1_c8.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c8.png" alt="Check us out on AMA" name="Image61" width="132" height="60" border="0" id="Image61" /></a></td>
<td><a href="www.dnb.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image62','','images/TrafficJamEventsWebsite519-headerRoll_r1_c9.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c9.png" alt="Dun & Bradstreet accreditation" name="Image62" width="67" height="60" border="0" id="Image62" /></a></td>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<div class="control">
<td><a href="javascript:previousPicture()"><img name="TrafficJamEventsWebsiteSlideCC_r2_c1" src="TrafficJamEventsWebsiteSlideCC_r2_c1.png" width="83" height="294" border="0" id="TrafficJamEventsWebsiteSlideCC_r2_c1" alt="" /></a></td></div>
<td class="slideshow">
<div id="slide1" class="slides">
<div><a href="images/image-1.png" rel="lightbox[CreditCards]" title="my caption"><img name="TJE Custom Credit Cards" src="TrafficJamEventsWebsiteSlideCC_r2_c2.png" width="850" height="294" border="0" id="TrafficJamEventsWebsiteSlideCC_r2_c2" alt="" /></a><a href="images/image-2.png" rel="lightbox[CreditCards]"></a><a href="images/image-3.png" rel="lightbox[CreditCards]"></a><a href="images/image-4.jpg" rel="lightbox[CreditCards]"></a>
</div>
<div id="slide2" class="slides">
<img name="TJE Custom Envelopes" src="TrafficJamEventsWebsiteSlideEnvelopes_r2_c2_s1.png" width="850" height="294" /></div>
<div id="slide3" class="slides">
<img name="TJE Custom" src="TrafficJamEventsWebsiteSlideKey_r2_c2_s1.png" width="850" height="294" /></div></div></td>
<div class="control">
<td><a href="javascript:nextPicture()"><img name="TrafficJamEventsWebsiteSlideCC_r2_c3" src="TrafficJamEventsWebsiteSlideCC_r2_c3.png" width="67" height="294" border="0" id="TrafficJamEventsWebsiteSlideCC_r2_c3" alt="" /></a></td></div>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td background="images/TrafficJamEventsWebsite519-VideoBG_r2_c1.png" width="1000" height="433" border="0" align="center" valign="middle"><!-- VZAAR START -->
<div class="vzaar_media_player">
<object id="video" width="576" height="432" type="application/x-shockwave-flash" data="http://view.vzaar.com/776761.flashplayer">
<param name="movie" value="http://view.vzaar.com/776761.flashplayer">
<param name="allowScriptAccess" value="always">
<param name="allowFullScreen" value="true">
<param name="wmode" value="transparent">
<param name="flashvars" value="border=none">
<embed src="http://view.vzaar.com/776761.flashplayer" type="application/x-shockwave-flash" wmode="transparent" width="576" height="432" allowScriptAccess="always" allowFullScreen="true" flashvars="border=none"></embed>
<video width="576" height="432" src="http://view.vzaar.com/776761.mobile" poster="http://view.vzaar.com/776761.image" controls onclick="this.play();"></video></object>
</div>
<!-- VZAAR END --></td>
<td><img src="images/spacer.gif" width="1" height="433" border="0" alt="" /></td>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="TrafficJamEventsWebsite519-NewBottom.png" fwstyle="Dreamweaver" fwdocid = "1344842774" fwnested="0" -->
<tr>
<td colspan="11"><img name="TrafficJamEventsWebsite519NewBottom_r2_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r2_c1.png" width="1000" height="366" border="0" id="TrafficJamEventsWebsite519NewBottom_r2_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="366" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="TrafficJamEventsWebsite519NewBottom_r3_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r3_c1.png" width="592" height="27" border="0" id="TrafficJamEventsWebsite519NewBottom_r3_c1" alt="" /></td>
<td colspan="2"><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image55','','images/TrafficJamEventsWebsite519-NewBottomRoll_r3_c7.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r3_c7.png" alt="Read More About Traffic Jam Events" name="Image55" width="202" height="27" border="0" id="Image55" /></a></td>
<td colspan="3"><img name="TrafficJamEventsWebsite519NewBottom_r3_c9" src="images/TrafficJamEventsWebsite519-NewBottom_r3_c9.png" width="206" height="27" border="0" id="TrafficJamEventsWebsite519NewBottom_r3_c9" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="27" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="TrafficJamEventsWebsite519NewBottom_r4_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r4_c1.png" width="1000" height="38" border="0" id="TrafficJamEventsWebsite519NewBottom_r4_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="38" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="TrafficJamEventsWebsite519NewBottom_r5_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r5_c1.png" width="60" height="21" border="0" id="TrafficJamEventsWebsite519NewBottom_r5_c1" alt="" /></td>
<td colspan="2"><a href="http://www.TrafficJamEvents.com/copyright" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image56','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c2.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c2.png" alt="Copyright 2006 Traffic Jam Events" name="Image56" width="260" height="21" border="0" id="Image56" /></a></td>
<td><img name="TrafficJamEventsWebsite519NewBottom_r5_c4" src="images/TrafficJamEventsWebsite519-NewBottom_r5_c4.png" width="110" height="21" border="0" id="TrafficJamEventsWebsite519NewBottom_r5_c4" alt="" /></td>
<td><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image57','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c5.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c5.png" alt="Home" name="Image57" width="60" height="21" border="0" id="Image57" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/SpecialServices" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image58','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c6.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c6.png" alt="Special Services" name="Image58" width="102" height="21" border="0" id="Image58" /></a></td>
<td><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image59','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c7.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c7.png" alt="Need a job..." name="Image59" width="66" height="21" border="0" id="Image59" /></a></td>
<td><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image60','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c8.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c8.png" alt="About Traffic Jam Events" name="Image60" width="136" height="21" border="0" id="Image60" /></a></td>
<td><a href="http://www.OurSampleLibrary.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image63','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c9.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c9.png" alt="Samples of our Work" name="Image63" width="67" height="21" border="0" id="Image63" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/Contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image64','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c10.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c10.png" alt="Contact Us at Traffic Jam Events" name="Image64" width="72" height="21" border="0" id="Image64" /></a></td>
<td><img name="TrafficJamEventsWebsite519NewBottom_r5_c11" src="images/TrafficJamEventsWebsite519-NewBottom_r5_c11.png" width="67" height="21" border="0" id="TrafficJamEventsWebsite519NewBottom_r5_c11" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="21" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="TrafficJamEventsWebsite519NewBottom_r6_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r6_c1.png" width="1000" height="33" border="0" id="TrafficJamEventsWebsite519NewBottom_r6_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="33" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="TrafficJamEventsWebsite519NewBottom_r7_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r7_c1.png" width="60" height="58" border="0" id="TrafficJamEventsWebsite519NewBottom_r7_c1" alt="" /></td>
<td><a href="http://www.Facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image65','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c2.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c2.png" alt="Find Us on Facebook" name="Image65" width="140" height="58" border="0" id="Image65" /></a></td>
<td><a href="http://www.Twitter.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image66','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c3.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c3.png" alt="Follow us on Twitter" name="Image66" width="120" height="58" border="0" id="Image66" /></a></td>
<td colspan="2"><a href="http://www.StumbleUpon.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image67','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c4.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c4.png" alt="Like our site on StumbleUpon" name="Image67" width="170" height="58" border="0" id="Image67" /></a></td>
<td colspan="2"><a href="http://www.Google.com/Buzz" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image68','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c6.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c6.png" alt="Google Buzz" name="Image68" width="168" height="58" border="0" id="Image68" /></a></td>
<td><a href="http://www.Delicious.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image69','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c8.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c8.png" alt="We hope you like our site on Delicious" name="Image69" width="136" height="58" border="0" id="Image69" /></a></td>
<td colspan="2"><a href="http://www.Google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image70','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c9.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c9.png" alt="Check out our RSS News Feed" name="Image70" width="139" height="58" border="0" id="Image70" /></a></td>
<td><img name="TrafficJamEventsWebsite519NewBottom_r7_c11" src="images/TrafficJamEventsWebsite519-NewBottom_r7_c11.png" width="67" height="58" border="0" id="TrafficJamEventsWebsite519NewBottom_r7_c11" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="58" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="TrafficJamEventsWebsite519NewBottom_r8_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r8_c1.png" width="1000" height="51" border="0" id="TrafficJamEventsWebsite519NewBottom_r8_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="51" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>
If you would like to see the site it is located at..
www (dot) Traffic Jam Events (dot) com/NewTestWebsite
Thank you
Any Help would be GREATLY appreciated...
Scott
CODE
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Traffic Jam Events</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script language="JavaScript" type="text/javascript">
//<!--
//<![CDATA[
first = 1;
last = 3;
current = 1;
function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
setTimeout(nextPicture, 4500);
}
function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';
if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
}
function hideExtra() {
for ( counter=2; counter<= last; counter++)
{
object = document.getElementById('slide' + counter);
object.style.display = 'none';
}
}
</script>
<script language="JavaScript" type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
.slideShow {
background-color: #000000;
text-align: center;
margin-bottom: 0px;
padding: 0px;
}
.slides {
position: relative;
z-index: 1;
display: none;
}
.setTitle, .slideTitle {
font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
}
.setTitle {
color: #995a01;
font-size: 14px;
font-weight: bold;
}
.control {
position: relative;
z-index: 1;
}
#slide1 {
display: block;
}
img {
border: outset 0px #999999;
}
</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Thu May 19 19:59:49 GMT-0400 (EDT) 2011-->
</head>
<body bgcolor="#000000" onload="hideExtra(); MM_preloadImages('images/TrafficJamEventsWebsite519-headerRoll_r1_c2.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c3.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c4.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c5.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c6.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c8.png','images/TrafficJamEventsWebsite519-headerRoll_r1_c9.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r3_c7.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c2.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c5.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c6.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c7.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c8.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c9.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c10.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c2.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c3.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c4.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c6.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c8.png','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c9.png'); initLightbox()">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="TrafficJamEventsWebsite519-header.png" fwstyle="Dreamweaver" fwdocid = "1967789409" fwnested="0" -->
<tr>
<td><img name="TrafficJamEventsWebsite519header_r1_c1" src="images/TrafficJamEventsWebsite519-header_r1_c1.png" width="25" height="60" border="0" id="TrafficJamEventsWebsite519header_r1_c1" alt="" /></td>
<td><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image50','','images/TrafficJamEventsWebsite519-headerRoll_r1_c2.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c2.png" alt="Home" name="Image50" width="58" height="60" border="0" id="Image50" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/SpecialServices" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image51','','images/TrafficJamEventsWebsite519-headerRoll_r1_c3.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c3.png" alt="Special Services" name="Image51" width="128" height="60" border="0" id="Image51" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/About" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image52','','images/TrafficJamEventsWebsite519-headerRoll_r1_c4.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c4.png" alt="About Traffic Jam Events" name="Image52" width="76" height="60" border="0" id="Image52" /></a></td>
<td><a href="http://www.OurSampleLibrary.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image54','','images/TrafficJamEventsWebsite519-headerRoll_r1_c5.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c5.png" alt="Samples of our Work" name="Image54" width="72" height="60" border="0" id="Image54" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/Contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image53','','images/TrafficJamEventsWebsite519-headerRoll_r1_c6.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c6.png" alt="Contact Us" name="Image53" width="99" height="60" border="0" id="Image53" /></a></td>
<td><img name="TrafficJamEventsWebsite519header_r1_c7" src="images/TrafficJamEventsWebsite519-header_r1_c7.png" width="343" height="60" border="0" id="TrafficJamEventsWebsite519header_r1_c7" alt="" /></td>
<td><a href="http://www.AmericanMarketingAssociation.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image61','','images/TrafficJamEventsWebsite519-headerRoll_r1_c8.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c8.png" alt="Check us out on AMA" name="Image61" width="132" height="60" border="0" id="Image61" /></a></td>
<td><a href="www.dnb.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image62','','images/TrafficJamEventsWebsite519-headerRoll_r1_c9.png',1)"><img src="images/TrafficJamEventsWebsite519-header_r1_c9.png" alt="Dun & Bradstreet accreditation" name="Image62" width="67" height="60" border="0" id="Image62" /></a></td>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<div class="control">
<td><a href="javascript:previousPicture()"><img name="TrafficJamEventsWebsiteSlideCC_r2_c1" src="TrafficJamEventsWebsiteSlideCC_r2_c1.png" width="83" height="294" border="0" id="TrafficJamEventsWebsiteSlideCC_r2_c1" alt="" /></a></td></div>
<td class="slideshow">
<div id="slide1" class="slides">
<div><a href="images/image-1.png" rel="lightbox[CreditCards]" title="my caption"><img name="TJE Custom Credit Cards" src="TrafficJamEventsWebsiteSlideCC_r2_c2.png" width="850" height="294" border="0" id="TrafficJamEventsWebsiteSlideCC_r2_c2" alt="" /></a><a href="images/image-2.png" rel="lightbox[CreditCards]"></a><a href="images/image-3.png" rel="lightbox[CreditCards]"></a><a href="images/image-4.jpg" rel="lightbox[CreditCards]"></a>
</div>
<div id="slide2" class="slides">
<img name="TJE Custom Envelopes" src="TrafficJamEventsWebsiteSlideEnvelopes_r2_c2_s1.png" width="850" height="294" /></div>
<div id="slide3" class="slides">
<img name="TJE Custom" src="TrafficJamEventsWebsiteSlideKey_r2_c2_s1.png" width="850" height="294" /></div></div></td>
<div class="control">
<td><a href="javascript:nextPicture()"><img name="TrafficJamEventsWebsiteSlideCC_r2_c3" src="TrafficJamEventsWebsiteSlideCC_r2_c3.png" width="67" height="294" border="0" id="TrafficJamEventsWebsiteSlideCC_r2_c3" alt="" /></a></td></div>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td background="images/TrafficJamEventsWebsite519-VideoBG_r2_c1.png" width="1000" height="433" border="0" align="center" valign="middle"><!-- VZAAR START -->
<div class="vzaar_media_player">
<object id="video" width="576" height="432" type="application/x-shockwave-flash" data="http://view.vzaar.com/776761.flashplayer">
<param name="movie" value="http://view.vzaar.com/776761.flashplayer">
<param name="allowScriptAccess" value="always">
<param name="allowFullScreen" value="true">
<param name="wmode" value="transparent">
<param name="flashvars" value="border=none">
<embed src="http://view.vzaar.com/776761.flashplayer" type="application/x-shockwave-flash" wmode="transparent" width="576" height="432" allowScriptAccess="always" allowFullScreen="true" flashvars="border=none"></embed>
<video width="576" height="432" src="http://view.vzaar.com/776761.mobile" poster="http://view.vzaar.com/776761.image" controls onclick="this.play();"></video></object>
</div>
<!-- VZAAR END --></td>
<td><img src="images/spacer.gif" width="1" height="433" border="0" alt="" /></td>
</tr>
</table>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="TrafficJamEventsWebsite519-NewBottom.png" fwstyle="Dreamweaver" fwdocid = "1344842774" fwnested="0" -->
<tr>
<td colspan="11"><img name="TrafficJamEventsWebsite519NewBottom_r2_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r2_c1.png" width="1000" height="366" border="0" id="TrafficJamEventsWebsite519NewBottom_r2_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="366" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="TrafficJamEventsWebsite519NewBottom_r3_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r3_c1.png" width="592" height="27" border="0" id="TrafficJamEventsWebsite519NewBottom_r3_c1" alt="" /></td>
<td colspan="2"><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image55','','images/TrafficJamEventsWebsite519-NewBottomRoll_r3_c7.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r3_c7.png" alt="Read More About Traffic Jam Events" name="Image55" width="202" height="27" border="0" id="Image55" /></a></td>
<td colspan="3"><img name="TrafficJamEventsWebsite519NewBottom_r3_c9" src="images/TrafficJamEventsWebsite519-NewBottom_r3_c9.png" width="206" height="27" border="0" id="TrafficJamEventsWebsite519NewBottom_r3_c9" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="27" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="TrafficJamEventsWebsite519NewBottom_r4_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r4_c1.png" width="1000" height="38" border="0" id="TrafficJamEventsWebsite519NewBottom_r4_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="38" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="TrafficJamEventsWebsite519NewBottom_r5_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r5_c1.png" width="60" height="21" border="0" id="TrafficJamEventsWebsite519NewBottom_r5_c1" alt="" /></td>
<td colspan="2"><a href="http://www.TrafficJamEvents.com/copyright" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image56','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c2.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c2.png" alt="Copyright 2006 Traffic Jam Events" name="Image56" width="260" height="21" border="0" id="Image56" /></a></td>
<td><img name="TrafficJamEventsWebsite519NewBottom_r5_c4" src="images/TrafficJamEventsWebsite519-NewBottom_r5_c4.png" width="110" height="21" border="0" id="TrafficJamEventsWebsite519NewBottom_r5_c4" alt="" /></td>
<td><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image57','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c5.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c5.png" alt="Home" name="Image57" width="60" height="21" border="0" id="Image57" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/SpecialServices" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image58','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c6.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c6.png" alt="Special Services" name="Image58" width="102" height="21" border="0" id="Image58" /></a></td>
<td><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image59','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c7.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c7.png" alt="Need a job..." name="Image59" width="66" height="21" border="0" id="Image59" /></a></td>
<td><a href="http://www.TrafficJamEvents.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image60','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c8.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c8.png" alt="About Traffic Jam Events" name="Image60" width="136" height="21" border="0" id="Image60" /></a></td>
<td><a href="http://www.OurSampleLibrary.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image63','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c9.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c9.png" alt="Samples of our Work" name="Image63" width="67" height="21" border="0" id="Image63" /></a></td>
<td><a href="http://www.TrafficJamEvents.com/Contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image64','','images/TrafficJamEventsWebsite519-NewBottomRoll_r5_c10.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r5_c10.png" alt="Contact Us at Traffic Jam Events" name="Image64" width="72" height="21" border="0" id="Image64" /></a></td>
<td><img name="TrafficJamEventsWebsite519NewBottom_r5_c11" src="images/TrafficJamEventsWebsite519-NewBottom_r5_c11.png" width="67" height="21" border="0" id="TrafficJamEventsWebsite519NewBottom_r5_c11" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="21" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="TrafficJamEventsWebsite519NewBottom_r6_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r6_c1.png" width="1000" height="33" border="0" id="TrafficJamEventsWebsite519NewBottom_r6_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="33" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="TrafficJamEventsWebsite519NewBottom_r7_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r7_c1.png" width="60" height="58" border="0" id="TrafficJamEventsWebsite519NewBottom_r7_c1" alt="" /></td>
<td><a href="http://www.Facebook.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image65','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c2.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c2.png" alt="Find Us on Facebook" name="Image65" width="140" height="58" border="0" id="Image65" /></a></td>
<td><a href="http://www.Twitter.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image66','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c3.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c3.png" alt="Follow us on Twitter" name="Image66" width="120" height="58" border="0" id="Image66" /></a></td>
<td colspan="2"><a href="http://www.StumbleUpon.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image67','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c4.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c4.png" alt="Like our site on StumbleUpon" name="Image67" width="170" height="58" border="0" id="Image67" /></a></td>
<td colspan="2"><a href="http://www.Google.com/Buzz" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image68','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c6.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c6.png" alt="Google Buzz" name="Image68" width="168" height="58" border="0" id="Image68" /></a></td>
<td><a href="http://www.Delicious.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image69','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c8.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c8.png" alt="We hope you like our site on Delicious" name="Image69" width="136" height="58" border="0" id="Image69" /></a></td>
<td colspan="2"><a href="http://www.Google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image70','','images/TrafficJamEventsWebsite519-NewBottomRoll_r7_c9.png',1)"><img src="images/TrafficJamEventsWebsite519-NewBottom_r7_c9.png" alt="Check out our RSS News Feed" name="Image70" width="139" height="58" border="0" id="Image70" /></a></td>
<td><img name="TrafficJamEventsWebsite519NewBottom_r7_c11" src="images/TrafficJamEventsWebsite519-NewBottom_r7_c11.png" width="67" height="58" border="0" id="TrafficJamEventsWebsite519NewBottom_r7_c11" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="58" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="11"><img name="TrafficJamEventsWebsite519NewBottom_r8_c1" src="images/TrafficJamEventsWebsite519-NewBottom_r8_c1.png" width="1000" height="51" border="0" id="TrafficJamEventsWebsite519NewBottom_r8_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="51" border="0" alt="" /></td>
</tr>
</table>
</body>
</html>
If you would like to see the site it is located at..
www (dot) Traffic Jam Events (dot) com/NewTestWebsite
Thank you
Any Help would be GREATLY appreciated...
Scott
|
|
|
|
|
|
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
Similar Topics:
Javascript Close Window
Move Javascript From The Java Sub c...
Php From File To Javascript
 Beginning Javascript Tutorial A basic introduction to JavaScript (0)
|
(5) Eror 404 For Trap17 The Code is Pretty Nice! 
|
JavaScript Tutorial : Image Slideshow
Create a Javascript Slideshow with URL Links attached to Images Tutorial
Simple jQuery Slideshow Tutorial
How to make a image slideshow for your website (HTML and JavaScript) Full Tutorial
Automatic jQuery Slideshow Part 1
jQuery Slideshow Tutorial
JavaScript Slide With Controls Tutorial Taster
JavaScript Tutorial _ Image Slideshow.flv
Javascript Slideshow Tutorial
Dreamweaver Tutorials - Create a slideshow using dreamweaver
