Clickable Hyperlinks on simple Slideshow.

Question

David Lee 0 Newbie Poster

17 Years Ago

I'm kind of a newb to javascript, so bear with me. I'm working on a site for a college javascript class, but I want to do a little bit more with my class site. I have a very simple slideshow set up( as a pop-up), but I want the images to be clickable and take the person to a site. Specifically, I have images for books on amazon, and I want the person to be able to click on the images and be taken to the specific page where the book is sold.

I'll post what I have, I was wondering what would be the best way to integrate it into my slideshow. Thanks in advance.

<body onblur="self.close()">


<div style="text-align: center;">
<p>If you like this site, you will love these<br />
wonderful books. Click <a href="http://www.amazon.com">here</a>
to buy.</p>


<script type="text/javascript">
var i=0;
var imageArray = new Array();
imageArray[0] = "cultOfMac.jpg";
imageArray[1] = "appleConfidential.jpg";
imageArray[2] = "insanelyGreat.jpg";
imageArray[3] = "howthemacwasmade.jpg";


function rotateImage()
{


//Creating a new Empty Array
var buffer= new Array();


if (i >= imageArray.length)
{i=0;}
buffer = new Image();
buffer.src = imageArray;
document.images["pic"].src = buffer.src;
i++;


setTimeout("rotateImage()", 2000);


}



</script>
<p>
<img src="cultOfMac.jpg"
id="pic"
name="pic"
alt="Pictures of Classic Macintosh" />
</p>


<script type="text/javascript">
rotateImage();
</script>


</div>


</body>
<!--These are my hyperlinks
Cult of Mac url= http://www.amazon.com/Cult-Mac-Paperback-Leander-Kahney/dp/1593271220/ref=pd_sim_b_4_img/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3
Apple confidential url = http://www.amazon.com/Apple-Confidential-2-0-Definitive-Colorful/dp/1593270100/ref=pd_sim_b_1/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3
Insanely Great url = http://www.amazon.com/Insanely-Great-Macintosh-Computer-Everything/dp/0140291776/ref=pd_sim_b_4/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3
How the mac was made url = http://www.amazon.com/Revolution-Valley-Insanely-Great-Story/dp/0596007191/ref=pd_bbs_3/102-1309812-8345769?ie=UTF8&amp;s=books&amp;qid=1188507280&amp;sr=8-3
-->


</html>

javascript perl

Edited 11 Years Ago by happygeek because: fixed formatting

7 Contributors
9 Replies
258 Views
4 Years Discussion Span
Latest Post 12 Years Ago Latest Post by Kyle G

MattEvans 473 Veteran Poster

17 Years Ago

Here's one way to do it:

<html>
<head></head>
<body > <!-- onblur="self.close()"-->

<div style="text-align: center;">
<p>If you like this site, you will love these<br />
wonderful books. Click <a href="http://www.amazon.com">here</a>
to buy.</p>

<script type="text/javascript">

var i = 0;

var imageArray = new Array();

//Create each element of the array as a unique object with a src and href parameter. This is quick and dirty; you could create an 
//object 'class' for this.. but.. perhaps it's overkill. You could also use a pair of arrays with matching subscripts.

var img0 = new Object( );

img0.src = "http://ec1.images-amazon.com/images/I/51EPPN3B2WL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";
img0.href = "http://www.amazon.com/Cult-Mac-Paperback-Leander-Kahney/dp/1593271220/ref=pd_sim_b_4_img/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3";

var img1 = new Object( );

img1.src = "http://ec1.images-amazon.com/images/I/51209PBGM8L._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";
img1.href = "http://www.amazon.com/Apple-Confidential-2-0-Definitive-Colorful/dp/1593270100/ref=pd_sim_b_1/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3";

var img2 = new Object( );

img2.src = "http://ec1.images-amazon.com/images/I/31PVMJMNFBL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";
img2.href = "http://www.amazon.com/Insanely-Great-Macintosh-Computer-Everything/dp/0140291776/ref=pd_sim_b_4/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3";

var img3 = new Object( );

img3.src = "http://g-ec2.images-amazon.com/images/I/512AG45B3GL._AA240_.jpg";
img3.href = "http://www.amazon.com/Revolution-Valley-Insanely-Great-Story/dp/0596007191/ref=pd_bbs_3/102-1309812-8345769?ie=UTF8&amp;s=books&amp;qid=1";

//Put all of those objects into the array.

imageArray[ 0 ] = img0;
imageArray[ 1 ] = img1;
imageArray[ 2 ] = img2;
imageArray[ 3 ] = img3;

function rotateImage()
{

  if (i >= imageArray.length)
  {
    i = 0;
  }

  var img_element = document.images["pic"];
  var a_element = img_element.parentNode;

  img_element.src = imageArray[i].src;
  a_element.href = imageArray[i].href;

  i++;

  setTimeout("rotateImage()", 2000);

}

</script>

<p>
<a href="http://www.amazon.com/Cult-Mac-Paperback-Leander-Kahney/dp/1593271220/ref=pd_sim_b_4_img/102-1309812-8345769?ie=UTF8&amp;qid=1188507280&amp;sr=8-3">
<img src="http://ec1.images-amazon.com/images/I/51EPPN3B2WL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg" 
id="pic" 
name="pic" 
alt="Pictures of Classic Macintosh" />
</a>
</p>

<script type="text/javascript">
rotateImage();
</script>

</div>

</body>

</html>

MattEvans 473 Veteran Poster

17 Years Ago

And here's another way:

<html>
<head></head>
<body > <!-- onblur="self.close()"-->

<div style="text-align: center;">
<p>If you like this site, you will love these<br />
wonderful books. Click <a href="http://www.amazon.com">here</a>
to buy.</p>

<script type="text/javascript">

var i = 0;

var imageArray = new Array();

//Create each element of the array as a unique object with a src and href parameter. This is quick and dirty; you could create an 
//object 'class' for this.. but.. perhaps it's overkill. You could also use a pair of arrays with matching subscripts.

var img0 = new Object( );

img0.src = "http://ec1.images-amazon.com/images/I/51EPPN3B2WL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";
img0.href = "http://www.amazon.com/Cult-Mac-Paperback-Leander-Kahney/dp/1593271220/ref=pd_sim_b_4_img/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3";

var img1 = new Object( );

img1.src = "http://ec1.images-amazon.com/images/I/51209PBGM8L._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";
img1.href = "http://www.amazon.com/Apple-Confidential-2-0-Definitive-Colorful/dp/1593270100/ref=pd_sim_b_1/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3";

var img2 = new Object( );

img2.src = "http://ec1.images-amazon.com/images/I/31PVMJMNFBL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";
img2.href = "http://www.amazon.com/Insanely-Great-Macintosh-Computer-Everything/dp/0140291776/ref=pd_sim_b_4/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3";

var img3 = new Object( );

img3.src = "http://g-ec2.images-amazon.com/images/I/512AG45B3GL._AA240_.jpg";
img3.href = "http://www.amazon.com/Revolution-Valley-Insanely-Great-Story/dp/0596007191/ref=pd_bbs_3/102-1309812-8345769?ie=UTF8&amp;s=books&amp;qid=1";

//Put all of those objects into the array.

imageArray[ 0 ] = img0;
imageArray[ 1 ] = img1;
imageArray[ 2 ] = img2;
imageArray[ 3 ] = img3;

function rotateImage()
{

  if (i >= imageArray.length)
  {
    i = 0;
  }

  var img_element = document.images[ "pic" ];
  img_element.src = imageArray[ i ].src;

  i++;

  setTimeout("rotateImage()", 2000);

}

//When image is clicked, move browser to the href corresponding to the current image
function visit_current( )
{
  //Note i-1; because i is incremented after every image swap. Thus must check for 0 condition
  if( i == 0 )
  {
    window.location = imageArray[ imageArray.length - 1 ].href;
  }
  else
  {
    window.location = imageArray[ i - 1 ].href;
  }
}

</script>

<p>
<img src="http://ec1.images-amazon.com/images/I/51EPPN3B2WL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg" 
id="pic" 
name="pic" 
alt="Pictures of Classic Macintosh" onclick="visit_current( )" style="cursor:pointer;"/>
</p>

<script type="text/javascript">
rotateImage();
</script>

</div>

</body>

</html>

For both, note changes to the HTML.

Both tested in Firefox and Opera... Post back if problems.

~s.o.s~ 2,560 Failure as a human

17 Years Ago

> window.location = imageArray[ i - 1 ].href; window.location is an Object , its href property a String . Though the above one works, the correct way of writing it would be: window.location.href = imageArray[ i - 1 ].href;

itsjareds commented: window.location vs window.location.href is good :D +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

David Lee 0 Newbie Poster · Answer 1 · 2007-09-04T03:34:44+00:00

Thank you so much Matt. I really appreciate you putting in comments and making it easy for me to understand and learn. You went above and beyond. Thank you.

sara_spark1 0 Newbie Poster · Answer 2 · 2009-05-18T22:28:25+00:00

Hi,
How do I create a clickable background image slideshow using the same code? I tried various codes but the links don't work . Can you please tell me how I could create hyperlinks to a background image slideshow in javascript?

Thanks,
Sara

essential 84 Posting Shark Featured Poster · Answer 3 · 2009-05-19T08:14:04+00:00

This remains unsolved... But let me help you a bit! You can achieved desired output, by doing this code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Test Page</title>
<!--<style id="internal" type="text/css"></style> -->
<script type="text/javascript">
// <![CDATA[
var hyperLinks, img;
var count;
var tN;
   tN = Boolean( document.getElementsByTagName );
   count = 0;
hyperLinks = function() {
   if ( document.images ) {
   img = {
   myBgImages : [ ],
   myLinks : [ ]
   };
   body = (( document.body ) ? document.body : (( tN ) ? document.getElementsByTagName("body")[ 0 ] : document.all.tags("body")[ 0 ] ));
   for ( var i = 0; i < 3; i++ ) {
   img["myBgImages"][ i ] = new Image();
      for ( var x in img["myBgImages"] ) {
      img["myBgImages"][ x ].src = ( "image" + x + ".jpg" ) 
      img["myLinks"][ x ] = String( "Showing Link " + ( x * 1 + 1 )).link( String( img["myBgImages"][ x ].src ))
         }
      } count = (( count === img["myBgImages"].length ) ? 0 : count ); 
      try {
      body.style.background = "transparent url(" + img["myBgImages"][ count ].src + ") no-repeat left top";
      body.innerHTML = img["myLinks"][ count ];
 count++;
     } catch( error ) { // If the above conditions fails to execute, PROCEED HERE.
     bg = document.createAttribute("style");
     bg.nodeValue = String(  "background : transparent url(" + img["myBgImages"][ count ].src + ") no-repeat left top" );
     body.setAttributeNode( bg );
     body.innerHTML = '<a href="' + img["myLinks"][ count ] + '">Showing Link ' +  count + '</a>';
      count++; 
       }
   } return false; // If the browser do not support images, EXIT FUNCTION. 
};

window.onload = function() {
   slide = setInterval( "hyperLinks()", 2000 );
}
// ]]>
</script>
</head>
<body>
<div id="main">

</div>
</body>
</html>

Hope it get's what you really need...

nolano 0 Newbie Poster · Answer 4 · 2010-01-06T08:29:42+00:00

On the first response to the original question, is there a way to adjust the length of time each image is viewed? thanks

nolano 0 Newbie Poster · Answer 5 · 2010-01-09T06:24:08+00:00

Hi I'm using this script for a clickable slideshow and was wondering is there a way to adjust the time each image is visible.

<html><head></head><body > <!-- onblur="self.close()"--> <div style="text-align: center;"><p>If you like this site, you will love these<br />wonderful books. Click <a href="http://www.amazon.com">here</a>to buy.</p> <script type="text/javascript"> var i = 0; var imageArray = new Array(); //Create each element of the array as a unique object with a src and href parameter. This is quick and dirty; you could create an //object 'class' for this.. but.. perhaps it's overkill. You could also use a pair of arrays with matching subscripts. var img0 = new Object( ); img0.src = "http://ec1.images-amazon.com/images/I/51EPPN3B2WL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";img0.href = "http://www.amazon.com/Cult-Mac-Paperback-Leander-Kahney/dp/1593271220/ref=pd_sim_b_4_img/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3"; var img1 = new Object( ); img1.src = "http://ec1.images-amazon.com/images/I/51209PBGM8L._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";img1.href = "http://www.amazon.com/Apple-Confidential-2-0-Definitive-Colorful/dp/1593270100/ref=pd_sim_b_1/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3"; var img2 = new Object( ); img2.src = "http://ec1.images-amazon.com/images/I/31PVMJMNFBL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";img2.href = "http://www.amazon.com/Insanely-Great-Macintosh-Computer-Everything/dp/0140291776/ref=pd_sim_b_4/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3"; var img3 = new Object( ); img3.src = "http://g-ec2.images-amazon.com/images/I/512AG45B3GL._AA240_.jpg";img3.href = "http://www.amazon.com/Revolution-Valley-Insanely-Great-Story/dp/0596007191/ref=pd_bbs_3/102-1309812-8345769?ie=UTF8&amp;s=books&amp;qid=1"; //Put all of those objects into the array. imageArray[ 0 ] = img0;imageArray[ 1 ] = img1;imageArray[ 2 ] = img2;imageArray[ 3 ] = img3; function rotateImage(){   if (i >= imageArray.length)  {    i = 0;  }   var img_element = document.images["pic"];  var a_element = img_element.parentNode;   img_element.src = imageArray[i].src;  a_element.href = imageArray[i].href;   i++;   setTimeout("rotateImage()", 2000); } </script> <p><a href="http://www.amazon.com/Cult-Mac-Paperback-Leander-Kahney/dp/1593271220/ref=pd_sim_b_4_img/102-1309812-8345769?ie=UTF8&amp;qid=1188507280&amp;sr=8-3"><img src="http://ec1.images-amazon.com/images/I/51EPPN3B2WL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg" id="pic" name="pic" alt="Pictures of Classic Macintosh" /></a></p> <script type="text/javascript">rotateImage();</script> </div> </body> </html><html>
<head></head>
<body > <!-- onblur="self.close()"-->

<div style="text-align: center;">
<p>If you like this site, you will love these<br />
wonderful books. Click <a href="http://www.amazon.com">here</a>
to buy.</p>

<script type="text/javascript">

var i = 0;

var imageArray = new Array();

//Create each element of the array as a unique object with a src and href parameter. This is quick and dirty; you could create an 
//object 'class' for this.. but.. perhaps it's overkill. You could also use a pair of arrays with matching subscripts.

var img0 = new Object( );

img0.src = "http://ec1.images-amazon.com/images/I/51EPPN3B2WL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";
img0.href = "http://www.amazon.com/Cult-Mac-Paperback-Leander-Kahney/dp/1593271220/ref=pd_sim_b_4_img/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3";

var img1 = new Object( );

img1.src = "http://ec1.images-amazon.com/images/I/51209PBGM8L._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";
img1.href = "http://www.amazon.com/Apple-Confidential-2-0-Definitive-Colorful/dp/1593270100/ref=pd_sim_b_1/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3";

var img2 = new Object( );

img2.src = "http://ec1.images-amazon.com/images/I/31PVMJMNFBL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg";
img2.href = "http://www.amazon.com/Insanely-Great-Macintosh-Computer-Everything/dp/0140291776/ref=pd_sim_b_4/102-1309812-8345769?ie=UTF8&qid=1188507280&sr=8-3";

var img3 = new Object( );

img3.src = "http://g-ec2.images-amazon.com/images/I/512AG45B3GL._AA240_.jpg";
img3.href = "http://www.amazon.com/Revolution-Valley-Insanely-Great-Story/dp/0596007191/ref=pd_bbs_3/102-1309812-8345769?ie=UTF8&amp;s=books&amp;qid=1";

//Put all of those objects into the array.

imageArray[ 0 ] = img0;
imageArray[ 1 ] = img1;
imageArray[ 2 ] = img2;
imageArray[ 3 ] = img3;

function rotateImage()
{

  if (i >= imageArray.length)
  {
    i = 0;
  }

  var img_element = document.images["pic"];
  var a_element = img_element.parentNode;

  img_element.src = imageArray[i].src;
  a_element.href = imageArray[i].href;

  i++;

  setTimeout("rotateImage()", 2000);

}

</script>

<p>
<a href="http://www.amazon.com/Cult-Mac-Paperback-Leander-Kahney/dp/1593271220/ref=pd_sim_b_4_img/102-1309812-8345769?ie=UTF8&amp;qid=1188507280&amp;sr=8-3">
<img src="http://ec1.images-amazon.com/images/I/51EPPN3B2WL._BO2,204,203,200_PIsitb-dp-500-arrow,TopRight,45,-64_OU01_AA240_SH20_.jpg" 
id="pic" 
name="pic" 
alt="Pictures of Classic Macintosh" />
</a>
</p>

<script type="text/javascript">
rotateImage();
</script>

</div>

</body>

</html>

Kyle G 0 Newbie Poster · Answer 6 · 2012-01-19T00:58:32+00:00

I'm having trouble using imagery and documents from the parent folder.

var img0 = new Object( );
     
    img0.src = "slide1.jpg";
    img0.href = "index.html";

Why does it not access files located in the same folder?