Create a Random Number to offset linked images

[mikeoley]

Ok I have a Javascript slideshow working. Every image is linked to a
another page in the site. Problem is...The link wont refresh to the
next link once the second images rollovers in the slideshow. It only
stays at the first images link.

Is this a cache issue? Or is there anyway to create a random number to
trick this or make it work properly. I'm very raw with Javascript so
I'm having trouble figuring this out.

Thank you in advance

Site:
http://www.aircylindersdirect.com/egtest/

Code:
<script type="text/javascript">
<!--
/* define image width and height */

var pic_width=550;
var pic_height=245;

/* define image urls */

if (document.images)
{
pic1= new Image(550,245);
pic1.src="images/main-nrseries.gif";
pic2= new Image(550,245);
pic2.src="images/main-enseries.gif";
pic3= new Image(550,245);
pic3.src="images/main-evseries.gif";
pic4= new Image(550,245);
pic4.src="images/main-mciseries.gif";
pic5= new Image(550,245);
pic5.src="images/main-enlseries.gif";
pic6= new Image(550,245);
pic6.src="images/main-ensseries.gif";
pic7= new Image(550,245);
pic7.src="images/main-customseries.gif";
}

/* define text for image captions */

var pics= new Array(7)
pics[0]=pic1.src;
pics[1]=pic2.src;
pics[2]=pic3.src;
pics[3]=pic4.src;
pics[4]=pic5.src;
pics[5]=pic6.src;
pics[6]=pic7.src;

var links = new Array(7);
links[0]="products/nrseries.jsp";
links[1]="products/enseries.jsp";
links[2]="products/evseries.jsp";
links[3]="products/mciseries.jsp";
links[4]="products/enlseries.jsp";
links[5]="products/ensseries.jsp";
links[6]="products/customseries.jsp";

var numpics=7;
var thenum=0;
imgName="img1";



function change_it()
{
if (document.images)
{
document.write("<a href = " + links[thenum] + "><img
src='"+pics[thenum]+"' border='0' width='"+pic_width+"'
height='"+pic_height+"' name='img1'></a>\n");

setTimeout('change_it2()',4000);
}
}

function change_it2()
{
var x=0;
thenum+=1;

if (thenum>numpics-1)
thenum=0;

document[imgName].src=pics[thenum];

x+=1;
setTimeout('change_it2()',4000);
}
//-->
</script>

 

[RobG]

Ok I have a Javascript slideshow working. Every image is linked to a
another page in the site. Problem is...The link wont refresh to the
next link once the second images rollovers in the slideshow. It only
stays at the first images link.

Because you aren't changing the href attribute of the img element.

Is this a cache issue? Or is there anyway to create a random number to
trick this or make it work properly. I'm very raw with Javascript so
I'm having trouble figuring this out.

None of the above, see above above ;-)


[...]

<script type="text/javascript">
<!--

Don't use HTML comment delimiters inside script elements. It provides
no benefit and is potentially harmful.

/* define image width and height */

var pic_width=550;
var pic_height=245;

/* define image urls */

if (document.images)
{
pic1= new Image(550,245);
pic1.src="images/main-nrseries.gif";
pic2= new Image(550,245);
pic2.src="images/main-enseries.gif";
pic3= new Image(550,245);
pic3.src="images/main-evseries.gif";
pic4= new Image(550,245);
pic4.src="images/main-mciseries.gif";
pic5= new Image(550,245);
pic5.src="images/main-enlseries.gif";
pic6= new Image(550,245);
pic6.src="images/main-ensseries.gif";
pic7= new Image(550,245);
pic7.src="images/main-customseries.gif";
}

/* define text for image captions */

var pics= new Array(7)

There is no need to specify the length of the array. Adding elements
will increase the length property accordingly and remove a potential
maintenance issue - if you add fewer elements than the length you
specify, you will have array 'slots' that are undefined.

pics[0]=pic1.src;
pics[1]=pic2.src;
pics[2]=pic3.src;
pics[3]=pic4.src;
pics[4]=pic5.src;
pics[5]=pic6.src;
pics[6]=pic7.src;

var links = new Array(7);

Same here.

links[0]="products/nrseries.jsp";
links[1]="products/enseries.jsp";
links[2]="products/evseries.jsp";
links[3]="products/mciseries.jsp";
links[4]="products/enlseries.jsp";
links[5]="products/ensseries.jsp";
links[6]="products/customseries.jsp";

Consider putting the image src and link in the same array element using
a delimiter (I've used ampersand '&'), then split them for use, e.g.:

var dataArray = [
'images/main-nrseries.gif&products/nrseries.jsp',
'images/main-enseries.gif&products/enseries.jsp',
...
'images/main-customseries.gif&products/customseries.jsp'
];


Maintenance should be easier as you have the image src directly related
to the link and you don't need to specify the number of images or links
anywhere.


Load the images with:

if (document.images)
{
var imgArray = [];
for (var i=0, num=dataArray.length; i<len; ++i)
{
imgArray = new Image(picWidth, picHeight);
imgArray.src = dataArray.split('&')[0];
}
}

var numpics=7;

This variable is not needed (see below) and is a potential maintenance
issue as it must be manually modified to match the length of the pic array.

var thenum=0;
imgName="img1";



function change_it()
{
if (document.images)
{
document.write("<a href = " + links[thenum] + "><img
src='"+pics[thenum]+"' border='0' width='"+pic_width+"'
height='"+pic_height+"' name='img1'></a>\n");

setTimeout('change_it2()',4000);
}
}

function change_it2()
{
var x=0;
thenum+=1;

if (thenum>numpics-1)
thenum=0;

Replace the above 4 lines with:

thenum = (thenum + 1) % pics.length;


Or if the suggested mods are made:

thenum = (thenum + 1) % imgArray.length;

document[imgName].src=pics[thenum];

Change the href here:

document[imgName].href = links[thenum];


Using the suggested dataArray:

document[imgName].src = dataArray[thenum].split('&')[0];
document[imgName].href = dataArray[thenum].split('&')[1];

x+=1;

x seems redundant.

setTimeout('change_it2()',4000);
}
//-->

Those danged comments again!! ;-)

 

[mikeoley]

Thanks for the help Rob.

Extremely helpful.

Ok I have a Javascript slideshow working. Every image is linked to a
another page in the site. Problem is...The link wont refresh to the
next link once the second images rollovers in the slideshow. It only
stays at the first images link.

Because you aren't changing the href attribute of the img element.

Is this a cache issue? Or is there anyway to create a random number to
trick this or make it work properly. I'm very raw with Javascript so
I'm having trouble figuring this out.

None of the above, see above above ;-)


[...]

<script type="text/javascript">
<!--

Don't use HTML comment delimiters inside script elements. It provides
no benefit and is potentially harmful.

/* define image width and height */

var pic_width=550;
var pic_height=245;

/* define image urls */

if (document.images)
{
pic1= new Image(550,245);
pic1.src="images/main-nrseries.gif";
pic2= new Image(550,245);
pic2.src="images/main-enseries.gif";
pic3= new Image(550,245);
pic3.src="images/main-evseries.gif";
pic4= new Image(550,245);
pic4.src="images/main-mciseries.gif";
pic5= new Image(550,245);
pic5.src="images/main-enlseries.gif";
pic6= new Image(550,245);
pic6.src="images/main-ensseries.gif";
pic7= new Image(550,245);
pic7.src="images/main-customseries.gif";
}

/* define text for image captions */

var pics= new Array(7)

There is no need to specify the length of the array. Adding elements
will increase the length property accordingly and remove a potential
maintenance issue - if you add fewer elements than the length you
specify, you will have array 'slots' that are undefined.

pics[0]=pic1.src;
pics[1]=pic2.src;
pics[2]=pic3.src;
pics[3]=pic4.src;
pics[4]=pic5.src;
pics[5]=pic6.src;
pics[6]=pic7.src;

var links = new Array(7);

Same here.

links[0]="products/nrseries.jsp";
links[1]="products/enseries.jsp";
links[2]="products/evseries.jsp";
links[3]="products/mciseries.jsp";
links[4]="products/enlseries.jsp";
links[5]="products/ensseries.jsp";
links[6]="products/customseries.jsp";

Consider putting the image src and link in the same array element using
a delimiter (I've used ampersand '&'), then split them for use, e.g.:

var dataArray = [
'images/main-nrseries.gif&products/nrseries.jsp',
'images/main-enseries.gif&products/enseries.jsp',
...
'images/main-customseries.gif&products/customseries.jsp'
];


Maintenance should be easier as you have the image src directly related
to the link and you don't need to specify the number of images or links
anywhere.


Load the images with:

if (document.images)
{
var imgArray = [];
for (var i=0, num=dataArray.length; i<len; ++i)
{
imgArray = new Image(picWidth, picHeight);
imgArray.src = dataArray.split('&')[0];
}
}

var numpics=7;

This variable is not needed (see below) and is a potential maintenance
issue as it must be manually modified to match the length of the pic array.

var thenum=0;
imgName="img1";



function change_it()
{
if (document.images)
{
document.write("<a href = " + links[thenum] + "><img
src='"+pics[thenum]+"' border='0' width='"+pic_width+"'
height='"+pic_height+"' name='img1'></a>\n");

setTimeout('change_it2()',4000);
}
}

function change_it2()
{
var x=0;
thenum+=1;

if (thenum>numpics-1)
thenum=0;

Replace the above 4 lines with:

thenum = (thenum + 1) % pics.length;


Or if the suggested mods are made:

thenum = (thenum + 1) % imgArray.length;

document[imgName].src=pics[thenum];

Change the href here:

document[imgName].href = links[thenum];


Using the suggested dataArray:

document[imgName].src = dataArray[thenum].split('&')[0];
document[imgName].href = dataArray[thenum].split('&')[1];

x+=1;

x seems redundant.

setTimeout('change_it2()',4000);
}
//-->

Those danged comments again!! ;-)

</script>