www.webdeveloper.com
Results 1 to 7 of 7

Thread: Add links to images in an array

  1. #1
    Join Date
    Dec 2011
    Posts
    2

    Add links to images in an array

    I know I probably have to recode this, but is there a simple answer?



    var ImageArr1 = new Array("images/sponsors/deanst.png","images/sponsors/vroom.png","images/sponsors/lfest.png","images/sponsors/beontrack.png");
    var ImageHolder1 = document.getElementById('Rotating1');

    var ImageArr2 = new Array("images/sponsors/paulmitchell.png","images/sponsors/sinnersaint.png","images/sponsors/pinksofa.png","images/sponsors/kaanaanmaa.png","images/sponsors/coyotes.png","images/sponsors/retreat.png","images/sponsors/freedomfriends.png");
    var ImageHolder2 = document.getElementById('Rotating2');

    var ImageArr3 = new Array("images/sponsors/nandos.png","images/sponsors/pret.png","images/sponsors/groundtoele.png","images/sponsors/focx.png");
    var ImageHolder3 = document.getElementById('Rotating3');


    function RotateImages(whichHolder,Start)
    {
    var a = eval("ImageArr"+whichHolder);
    var b = eval("ImageHolder"+whichHolder);
    if(Start>=a.length)
    Start=0;
    b.src = a[Start];
    window.setTimeout("RotateImages("+whichHolder+","+(Start+1)+")",6000);
    }

    RotateImages(1,0);
    RotateImages(2,0);
    RotateImages(3,0);



    Thanks in advance

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Lightbulb

    Won't work the way you have it scripted, but you can use this.
    Change to your own array of images as you did not provide a path to check it out.
    Code:
    <html>
    <head>
    <title>Rotating Images</title>
    
    <script type="text/javascript">
    /*
    var baseURL = "images/sponsors/";
    
    var ImageArr1 = ["deanst.png","vroom.png","lfest.png","beontrack.png"];
    var ImageHolder1 = document.getElementById('Rotating1');
    
    var ImageArr2 = ["paulmitchell.png","sinnersaint.png","pinksofa.png","kaanaanmaa.png",
                    "coyotes.png","retreat.png","freedomfriends.png"];
    var ImageHolder2 = document.getElementById('Rotating2');
    
    var ImageArr3 = ["nandos.png","pret.png","groundtoele.png","focx.png"];
    var ImageHolder3 = document.getElementById('Rotating3');
    */
    
    var baseURL = "http://www.nova.edu/hpd/otm/pics/4fun/";
    
    var ImageArr1 = ['11.jpg','12.jpg','13.jpg','14.jpg','15.jpg'];
    var ImageHolder1;
    
    var ImageArr2 = ['21.jpg','22.jpg','23.jpg','24.jpg','25.jpg'];
    var ImageHolder2;
    
    var ImageArr3 = ['31.jpg','32.jpg','33.jpg','34.jpg','35.jpg'];
    var ImageHolder3;
    
    function RotateImages(whichHolder,Start) {
      var a = 0;
      switch(whichHolder) {
        case '1' : ImageHolder1.src=baseURL+ImageArr1[Start]; a=ImageArr1.length; break;
        case '2' : ImageHolder2.src=baseURL+ImageArr2[Start]; a=ImageArr2.length; break;
        case '3' : ImageHolder3.src=baseURL+ImageArr3[Start]; a=ImageArr3.length; break;
        default : alert('Should never get here.  whichHolder='+whichHolder); break;
      }
      Start++;  if(Start>=a) Start=0;
      setTimeout("RotateImages('"+whichHolder+"',"+Start+")",6000);
    }
    
    window.onload = function() {
      ImageHolder1 = document.getElementById('Rotating1');
      ImageHolder2 = document.getElementById('Rotating2');
      ImageHolder3 = document.getElementById('Rotating3');
      RotateImages('1',0);
      RotateImages('2',0);
      RotateImages('3',0);
    }
    
    </script>
    </head>
    <body>
    <img id="Rotating1" src="" alt="Img 1"> 
    <img id="Rotating2" src="" alt="Img 2"> 
    <img id="Rotating3" src="" alt="Img 3"> 
    </body>
    </html>

  3. #3
    Join Date
    Mar 2011
    Posts
    65
    I know I probably have to recode this, but is there a simple answer?
    I woudl do something like this to make it simpler.

    With this you can add/delete images holders and the only thing you would have to edit in the javascript is add/delete a row in the picPaths and imgContainers arrays to suit. The rest of the js remains unchanged. I would also preload the images to make sure they have fully downloaded before the image rotations starts.

    Code:
    <!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">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var picPaths = [
                    ['num1.jpg','num2.jpg','num3.jpg'],
                    ['num4.jpg','num5.jpg'],
                    ['num6.jpg','num7.jpg','num8.jpg','num9.jpg']
                ]
                //preload the images to ensure they are available when the page finishes loading
                var picsO = new Array();
                for(i=0; i < picPaths.length; i++){
                    picsO[i] = new Array();
                    for(j=0; j < picPaths[i].length; j++){
                        picsO[i][j] = new Image();
                        picsO[i][j].src = picPaths[i][j];
                    }
                }
                function rotateImages(imgContO){
                    imgContO.src = picsO[imgContO.num][imgContO.curPic].src;
                    imgContO.curPic = (++imgContO.curPic == picsO[imgContO.num].length)? 0 : imgContO.curPic;
                    setTimeout(function(){rotateImages(imgContO);},1000);
                }
                window.onload=function(){
                    var imgContainers = new Array(
                    document.getElementById('img1'),
                    document.getElementById('img2'),
                    document.getElementById('img3')
                );
                    for(i=0; i < imgContainers.length; i++){
                        imgContainers[i].num = i;
                         imgContainers[i].curPic = 0;
                         rotateImages(imgContainers[i]);
                    }
                }
            </script>
        </head>
        <body>
            <div>
                <img id="img1" src="" alt="" />
                <img id="img2" src="" alt="" />
                <img id="img3" src="" alt="" />
            </div>
        </body>
    </html>

  4. #4
    Join Date
    Dec 2011
    Posts
    2
    Hi Guys,

    Thanks for getting back to me, but the original code does actually work, I want to know how to add links to the images in it?

    Sorry, I suppose I should have reincluded the title of the post in the body :S

    I found a clumsy way of doing it here, but for some reason the images do not load/rotate until you click on the broken image link!

    I know I'm out of my depth.



    <script>
    var currentImage = 0;
    function RotateImages()
    {
    var a = new Array("images/sponsors/deanst.png","images/sponsors/vroom.png","images/sponsors/lfest.png","images/sponsors/beontrack.png");
    var c = new Array("http://www.deanst.com/studios/", "http://www.vroomvroomvroom.co.uk/", "http://www.lfest.co.uk/", "http://www.beontrack.eu/");
    var b = document.getElementById('Rotating1');
    var d = document.getElementById('imageurl1');


    var e = new Array("images/sponsors/paulmitchell.png","images/sponsors/sinnersaint.png","images/sponsors/pinksofa.png","images/sponsors/kaanaanmaa.png","images/sponsors/coyotes.png","images/sponsors/retreat.png","images/sponsors/freedomfriends.png");
    var g = new Array("http://www.paul-mitchell.co.uk/", "http://www.sinnersaint.co.uk/", "http://pinksofa.com/", "http://www.kaanaanmaa.co.uk/","http://www.coyotesbar.co.uk/","http://www.retreat-wokingham.co.uk/","");
    var f = document.getElementById('Rotating2');
    var h = document.getElementById('imageurl2');

    var i = new Array("images/sponsors/nandos.png","images/sponsors/pret.png","images/sponsors/groundtoele.png","images/sponsors/focx.png");
    var k = new Array("http://www.nandos.co.uk/restaurant/soho", "http://www.pret.com/", "http://www.groundtoelevation.co.uk/", "http://www.focx.co.uk/");
    var j = document.getElementById('Rotating3');
    var l = document.getElementById('imageurl3');


    currentImage++;

    if(currentImage>= a.length)
    currentImage=0;

    if(currentImage>= e.length)
    currentImage=0;

    if(currentImage>= i.length)
    currentImage=0;

    b.src = a[currentImage];
    d.href = c[currentImage];

    f.src = e[currentImage];
    h.href = g[currentImage];

    j.src = i[currentImage];
    l.href = k[currentImage];

    rotator = window.setTimeout("RotateImages(" + (currentImage+1) + ")",6000);
    }

    function StopRotation()
    {
    window.clearTimeout(rotator);
    }

    RotateImages();
    </script>



    <div id="adbox">


    <script type="text/javascript" src="sponsor2.js"></script>

    <a id="imageurl1" name="imageurl1"><img src="Rotating1" id="Rotating1" width=140 height=140 border="0" alt="Rotating1" name="Rotating1" onmouseover="StopRotation();" onmouseout="RotateImages();"/></a>

    <br><br>

    <a id="imageurl2" name="imageurl2"><img src="Rotating2" id="Rotating2" width=140 height=140 border="0" alt="Rotating2" name="Rotating2" onmouseover="StopRotation();" onmouseout="RotateImages();"/></a>

    <br><br>

    <a id="imageurl3" name="imageurl3"><img src="Rotating3" id="Rotating3" width=140 height=140 border="0" alt="Rotating3" name="Rotating3" onmouseover="StopRotation();" onmouseout="RotateImages();"/></a>

    </p>
    </div>

    Thanks again for looking

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,330

    Exclamation

    First post would not work because you were calling on elements before they had been defined in the <body>
    That was the reason for my changes in post #2.

    Second attempt gives you problems for several reasons.
    1. You redefine the arrays EVERY time you enter the RotateImages() function. Waste of time and resources.
    2. You increment currentImage counter, but it is reset if ANY of the array lengths are exceeded.
    Therefore, you will only increment counter to shortest array length.
    3. You are passing the counter to be incremented as an argument to the RotateImages() function
    but you do not set the counter the first time you use it just before the end of the </script>
    4. The image src value is not defined in the <img> tag. Therefore, it does not get set until the function
    is called with RotateImages(), but again, the first time called there is no value to increment.

    I think you just got lucky that it worked at all.
    Check the logic again with my points in consideration.

    BTW: You should enclose your scripts between [ code] and [ /code] tags (without the spaces)
    to make it easier for forum members to read, copy, test your attempts.

  6. #6
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Links to do what? Open a new window or navigate to a new page?

    Also, please wrap your code in forum tags, they are only a button click in the post editor or quick reply.
    We all have baggage to carry in life, unfortunately for me I always get the trolley with the wonky wheel...
    Code:
    Youre = {
          STILL_not_getting_it:function(){
               alert("YOU, the original poster / thread starter NEED to POST the code and NOT a LINK.");
          },
          MissingThePoint:function(msg){
                alert("You're missing the point. " + msg);
          }
    }
    Youre.STILL_not_getting_it();

  7. #7
    Join Date
    Mar 2011
    Posts
    65
    Quote Originally Posted by fia-1 View Post
    ...... I want to know how to add links to the images in it?
    For ease of maintenance I would just create a 2D array for each image holder (picPaths) and the first element in the array for each image contains the url to navigate to when the image is clicked.

    Code:
    <!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">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var picPaths = [
                    [
                        ['url1','num1.jpg'],
                        ['url2','num2.jpg'],
                        ['url3','num3.jpg']
                    ],
                    [
                        ['url4','num4.jpg'],
                        ['url5','num5.jpg']
                    ],
                    [
                        ['url6','num6.jpg'],
                        ['url7','num7.jpg'],
                        ['url8','num8.jpg'],
                        ['url9','num9.jpg']
                    ]
                ]
                //preload the images to ensure they are available when the page finishes loading
                var picsO = new Array();
                for(i=0; i < picPaths.length; i++){
                    picsO[i] = new Array();
                    for(j=0; j < picPaths[i].length; j++){
                        picsO[i][j] = new Array();
                        picsO[i][j][1] = new Image();
                        picsO[i][j][1].src = picPaths[i][j][1];
                        picsO[i][j][0] = picPaths[i][j][0];
                    }
                }
                function rotateImages(){
                    for(i=0; i < imgContainers.length; i++){
                        imgContainers[i].src = picsO[i][imgContainers[i].curPic][1].src;
                        imgContainers[i].url = picsO[i][imgContainers[i].curPic][0];
                        imgContainers[i].onclick = function(){
                            window.location.href = this.url;
                        }
                        imgContainers[i].curPic = (++imgContainers[i].curPic == picsO[imgContainers[i].num].length)? 0 : imgContainers[i].curPic;
                    }
                    setTimeout(function(){rotateImages();},3000);
                }
                window.onload=function(){
                    imgContainers = new Array(
                    document.getElementById('img1'),
                    document.getElementById('img2'),
                    document.getElementById('img3')
                );
                    for(i=0; i < imgContainers.length; i++){
                        imgContainers[i].num = i;
                        imgContainers[i].curPic = 0;
                    }
                    rotateImages();
                }
            </script>
        </head>
        <body>
            <div>
                <img id="img1" src="" alt="" />
                <img id="img2" src="" alt="" />
                <img id="img3" src="" alt="" />
            </div>
        </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles