Create a Random Number to offset linked images

Discussion in 'Javascript' started by mikeoley@gmail.com, Nov 23, 2005.

  1. Guest

    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>
     
    , Nov 23, 2005
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > 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>
    >




    --
    Rob
     
    RobG, Nov 24, 2005
    #2
    1. Advertising

  3. Guest

    Thanks for the help Rob.

    Extremely helpful.


    RobG wrote:
    > wrote:
    > > 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>
    > >

    >
    >
    >
    > --
    > Rob
     
    , Nov 26, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lance Riedel

    Translated Offset to Source Offset

    Lance Riedel, Oct 14, 2003, in forum: XML
    Replies:
    2
    Views:
    516
    Patrick TJ McPhee
    Oct 15, 2003
  2. globalrev
    Replies:
    4
    Views:
    782
    Gabriel Genellina
    Apr 20, 2008
  3. kalyan

    Problem with offset based linked list

    kalyan, Aug 25, 2008, in forum: C Programming
    Replies:
    12
    Views:
    768
    Ben Bacarisse
    Aug 25, 2008
  4. VK
    Replies:
    15
    Views:
    1,218
    Dr J R Stockton
    May 2, 2010
  5. Roy Smith
    Replies:
    4
    Views:
    292
    Roy Smith
    Jan 27, 2013
Loading...

Share This Page