Adding hyperlink capability to cut and paste javascript slideshow from codelifter.com
The slide show at http://www.codelifter.com/main/javascript/slideshow4.html has everything I want in a slideshow except for hyperlink capability. I would like to add links to the images but have not been able to do so. If it isn't too much trouble I would appreciate if some one would add hyperlink capability to the existing code. The url is above and the code is below. A big thanks in advance if someone could help me out.
<html>
<head>
<title>PushButton SlideShow</title>
<!--
Set up the caption font in the following style.
Place the following script in the head of the page.
Follow the set-up instructions within the script.
//-->
<script>
// (C) 2003 by 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 = 2;
var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var showHot = false; // 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] = 'Nebula01.jpg';
Picture[2] = 'Nebula02.jpg';
Picture[3] = 'Nebula03.jpg';
Picture[4] = 'Nebula04.jpg';
Picture[5] = 'Nebula05.jpg';
Picture[6] = 'Nebula06.jpg';
Picture[7] = 'Nebula07.jpg';
Picture[8] = 'Nebula08.jpg';
Picture[9] = 'Nebula09.jpg';
Picture[10] = 'Nebula10.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] = "This is the first caption.";
Caption[2] = "This is the second caption.";
Caption[3] = "This is the third caption.";
Caption[4] = "This is the fourth caption.";
Caption[5] = "This is the fifth caption.";
Caption[6] = "This is the sixth caption.";
Caption[7] = "This is the seventh caption.";
Caption[8] = "This is the eighth caption.";
Caption[9] = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";
// ==========================
// Do not edit anything below this line!
// ==========================
var tss;
var iss;
var jss = 0;
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 control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox
document.images.PictureBox
document.images.PictureBox
document.images.PictureBox
if (document.getElementById) document.getElementById("C
if (document.all) document.images.PictureBox
}}
</script>
</head>
<!--
Add onload='showHot=true;' to the body tag. This is
needed to prevent false object calls while the page
is loading. Optional: If you are using this in a
popup, as in this demo, adding self.focus() to the
onload event in the body tag will bring the popup
to the front each time it is loaded [recommended].
//-->
<body onload='showHot=true;self.
<!--
The following table holds the images, captions, and controls.
Place the table in your page where you want the slideshow
to appear. Follow the instructions for each table cell.
//-->
<div align="center">
<center>
<table border=0 cellpadding=10 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. Often, the first image in the Picture
array in the script is used here; but you
may also use a different, introductory image
as we have here, since this image is shown
only on start-up.
//-->
<td width=350 height=280 colspan="3">
<img src=Nebula00.gif name=PictureBox width=350 height=280>
</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 id=CaptionBox class=Caption align=center colspan="3">
This is the default caption.
</td>
</tr>
<!--
The following three cells contain the controls.
Each of the control a href's must contain class=
Controls, to attach the styles (see top of script).
To dress this up a bit, you can of course substitute
<img src> images for the text in the links.
//-->
<tr>
<td align="center">
<a class=Controls href="#" onClick="javascript:contro
</td>
<td align="center">
<a class=Controls href="#" onClick="javascript:contro
</td>
<td align="center">
<a class=Controls href="#" onClick="javascript:contro
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
<html>
<head>
<title>PushButton SlideShow</title>
<!--
Set up the caption font in the following style.
Place the following script in the head of the page.
Follow the set-up instructions within the script.
//-->
<script>
// (C) 2003 by 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 = 2;
var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var showHot = false; // 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] = 'Nebula01.jpg';
Picture[2] = 'Nebula02.jpg';
Picture[3] = 'Nebula03.jpg';
Picture[4] = 'Nebula04.jpg';
Picture[5] = 'Nebula05.jpg';
Picture[6] = 'Nebula06.jpg';
Picture[7] = 'Nebula07.jpg';
Picture[8] = 'Nebula08.jpg';
Picture[9] = 'Nebula09.jpg';
Picture[10] = 'Nebula10.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] = "This is the first caption.";
Caption[2] = "This is the second caption.";
Caption[3] = "This is the third caption.";
Caption[4] = "This is the fourth caption.";
Caption[5] = "This is the fifth caption.";
Caption[6] = "This is the sixth caption.";
Caption[7] = "This is the seventh caption.";
Caption[8] = "This is the eighth caption.";
Caption[9] = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";
// ==========================
// Do not edit anything below this line!
// ==========================
var tss;
var iss;
var jss = 0;
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 control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox
document.images.PictureBox
document.images.PictureBox
document.images.PictureBox
if (document.getElementById) document.getElementById("C
if (document.all) document.images.PictureBox
}}
</script>
</head>
<!--
Add onload='showHot=true;' to the body tag. This is
needed to prevent false object calls while the page
is loading. Optional: If you are using this in a
popup, as in this demo, adding self.focus() to the
onload event in the body tag will bring the popup
to the front each time it is loaded [recommended].
//-->
<body onload='showHot=true;self.
<!--
The following table holds the images, captions, and controls.
Place the table in your page where you want the slideshow
to appear. Follow the instructions for each table cell.
//-->
<div align="center">
<center>
<table border=0 cellpadding=10 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. Often, the first image in the Picture
array in the script is used here; but you
may also use a different, introductory image
as we have here, since this image is shown
only on start-up.
//-->
<td width=350 height=280 colspan="3">
<img src=Nebula00.gif name=PictureBox width=350 height=280>
</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 id=CaptionBox class=Caption align=center colspan="3">
This is the default caption.
</td>
</tr>
<!--
The following three cells contain the controls.
Each of the control a href's must contain class=
Controls, to attach the styles (see top of script).
To dress this up a bit, you can of course substitute
<img src> images for the text in the links.
//-->
<tr>
<td align="center">
<a class=Controls href="#" onClick="javascript:contro
</td>
<td align="center">
<a class=Controls href="#" onClick="javascript:contro
</td>
<td align="center">
<a class=Controls href="#" onClick="javascript:contro
</td>
</tr>
</table>
</center>
</div>
</body>
</html>
ASKER
bol,
Yes, I would like to be able to click on the photo and have it take the user to another webpage in my site.
I tried the revision that you made and unfortunately, it doesn' work. When I hover over the photo, there is no indication that I am on a hyperlink and clicking doesn't do anything either.
This is what I added to the url section:
Links[1] = "http://www.sharonrieger.com";
Do I need to add more than that to the script?
alabina
Yes, I would like to be able to click on the photo and have it take the user to another webpage in my site.
I tried the revision that you made and unfortunately, it doesn' work. When I hover over the photo, there is no indication that I am on a hyperlink and clicking doesn't do anything either.
This is what I added to the url section:
Links[1] = "http://www.sharonrieger.com";
Do I need to add more than that to the script?
alabina
If you just added the line(s) above then you did miss about 3 other changes. I will try to summarize what I added below. Hopefully I won't miss anything. :)
var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var Links = new Array();
var showHot = false; // don't change this
I added the line to "make" the Links variable/array.
// Specify the URL
Links[1] = "URL to go in anchor's href.";
Links[2] = "This is the second Links.";
Links[3] = "This is the third Links.";
Links[4] = "This is the fourth Links.";
Links[5] = "This is the fifth Links.";
Links[6] = "This is the sixth Links.";
Links[7] = "This is the seventh Links.";
Links[8] = "This is the eighth Links.";
Links[9] = "This is the ninth Links.";
Links[10] = "This is the tenth Links.";
This is probably the section you did add. The string should contain the URL. It is whatever you would normally want in the href attribute of an anchor tag. It can be relative (i.e. "pages/page1.htm") or a full URL like in your last comment.
if (document.getElementById) {
document.getElementById("C
document.getElementById("i
}
I only added one line to the block above but had to change the If statement too.
<td width=350 height=280 colspan="3">
<a href="/" id="imgLink"><img src=Nebula00.gif name=PictureBox width=350 height=280></a>
</td>
This is the section in the HTML that actually makes the anchor element. Notice the ID attribute. You can change the value and use a different ID but would need to change it in the If statement too.
That should be everything. Let me know if you have a question or how that works.
bol
var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var Links = new Array();
var showHot = false; // don't change this
I added the line to "make" the Links variable/array.
// Specify the URL
Links[1] = "URL to go in anchor's href.";
Links[2] = "This is the second Links.";
Links[3] = "This is the third Links.";
Links[4] = "This is the fourth Links.";
Links[5] = "This is the fifth Links.";
Links[6] = "This is the sixth Links.";
Links[7] = "This is the seventh Links.";
Links[8] = "This is the eighth Links.";
Links[9] = "This is the ninth Links.";
Links[10] = "This is the tenth Links.";
This is probably the section you did add. The string should contain the URL. It is whatever you would normally want in the href attribute of an anchor tag. It can be relative (i.e. "pages/page1.htm") or a full URL like in your last comment.
if (document.getElementById) {
document.getElementById("C
document.getElementById("i
}
I only added one line to the block above but had to change the If statement too.
<td width=350 height=280 colspan="3">
<a href="/" id="imgLink"><img src=Nebula00.gif name=PictureBox width=350 height=280></a>
</td>
This is the section in the HTML that actually makes the anchor element. Notice the ID attribute. You can change the value and use a different ID but would need to change it in the If statement too.
That should be everything. Let me know if you have a question or how that works.
bol
ASKER
Hooray! That did it. I had missed the <a href="/" id="imgLink"> tag.
I'm going to modify codelifter's slideshow to accomodate my own I'm not using tables, only divs and CSS. Do you foresee any problems with that? If I find trouble, I'll post again.
Thanks so much
a
I'm going to modify codelifter's slideshow to accomodate my own I'm not using tables, only divs and CSS. Do you foresee any problems with that? If I find trouble, I'll post again.
Thanks so much
a
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
bol was very helpful and quick.
Thanks for the fun question, the grade and the points.
bol
bol
bol
<html>
<head>
<title>PushButton SlideShow</title>
<!--
Set up the caption font in the following style.
Place the following script in the head of the page.
Follow the set-up instructions within the script.
//-->
<script>
// (C) 2003 by 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 = 2;
var Picture = new Array(); // don't change this
var Caption = new Array(); // don't change this
var Links = new Array();
var showHot = false; // 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] = 'Nebula01.jpg';
Picture[2] = 'Nebula02.jpg';
Picture[3] = 'Nebula03.jpg';
Picture[4] = 'Nebula04.jpg';
Picture[5] = 'Nebula05.jpg';
Picture[6] = 'Nebula06.jpg';
Picture[7] = 'Nebula07.jpg';
Picture[8] = 'Nebula08.jpg';
Picture[9] = 'Nebula09.jpg';
Picture[10] = 'Nebula10.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] = "This is the first caption.";
Caption[2] = "This is the second caption.";
Caption[3] = "This is the third caption.";
Caption[4] = "This is the fourth caption.";
Caption[5] = "This is the fifth caption.";
Caption[6] = "This is the sixth caption.";
Caption[7] = "This is the seventh caption.";
Caption[8] = "This is the eighth caption.";
Caption[9] = "This is the ninth caption.";
Caption[10] = "This is the tenth caption.";
// Specify the URL
Links[1] = "URL to go in anchor's href.";
Links[2] = "This is the second Links.";
Links[3] = "This is the third Links.";
Links[4] = "This is the fourth Links.";
Links[5] = "This is the fifth Links.";
Links[6] = "This is the sixth Links.";
Links[7] = "This is the seventh Links.";
Links[8] = "This is the eighth Links.";
Links[9] = "This is the ninth Links.";
Links[10] = "This is the tenth Links.";
// ==========================
// Do not edit anything below this line!
// ==========================
var tss;
var iss;
var jss = 0;
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 control(how){
if (showHot){
if (how=="H") jss = 1;
if (how=="F") jss = jss + 1;
if (how=="B") jss = jss - 1;
if (jss > (pss)) jss=1;
if (jss < 1) jss = pss;
if (document.all){
document.images.PictureBox
document.images.PictureBox
document.images.PictureBox
document.images.PictureBox
if (document.getElementById) {
document.getElementById("C
document.getElementById("i
}
if (document.all) document.images.PictureBox
}}
</script>
</head>
<!--
Add onload='showHot=true;' to the body tag. This is
needed to prevent false object calls while the page
is loading. Optional: If you are using this in a
popup, as in this demo, adding self.focus() to the
onload event in the body tag will bring the popup
to the front each time it is loaded [recommended].
//-->
<body onload='showHot=true;self.
<!--
The following table holds the images, captions, and controls.
Place the table in your page where you want the slideshow
to appear. Follow the instructions for each table cell.
//-->
<div align="center">
<center>
<table border=0 cellpadding=10 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. Often, the first image in the Picture
array in the script is used here; but you
may also use a different, introductory image
as we have here, since this image is shown
only on start-up.
//-->
<td width=350 height=280 colspan="3">
<a href="/" id="imgLink"><img src=Nebula00.gif name=PictureBox width=350 height=280></a>
</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 id=CaptionBox class=Caption align=center colspan="3">
This is the default caption.
</td>
</tr>
<!--
The following three cells contain the controls.
Each of the control a href's must contain class=
Controls, to attach the styles (see top of script).
To dress this up a bit, you can of course substitute
<img src> images for the text in the links.
//-->
<tr>
<td align="center">
<a class=Controls href="#" onClick="javascript:contro
</td>
<td align="center">
<a class=Controls href="#" onClick="javascript:contro
</td>
<td align="center">
<a class=Controls href="#" onClick="javascript:contro
</td>
</tr>
</table>
</center>
</div>
</body>
</html>