#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    98
    Rep Power
    2

    Rotating image, clickable with link


    I do not know Javascript but have included in my site, due to requirements. I found a script that allows me to rotate between images every specified amount of seconds.

    However, I'm trying to make each of the two images I have rotating, clickable with anchored links. I need each of the two images to include a click able link, when they are rotated too.

    Here is the javascript I am using:

    // Javascript for <head> //
    Code:
    <script type="text/javascript">
    
    var currPic=1;
    
    var totPics=2;
    
    var keepTime;
    
    function setupPicChange()
    
    { keepTime=setTimeout("changePic()", 10000); }
    
    function changePic()
    
    { currPic++; if(currPic>totPics) currPic=1;
    
    document.getElementById("picture").src="a_image"+currPic+".jpg";
    
    setupPicChange(); }
    
    </script>
    // Actual HTML //
    Code:
    <img id="picture" src="a_image1.jpg">
    -- Success achieved from tribulation --
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    184
    Code:
    <!-- head -->
    
    <script type="text/javascript">
    
    var anchors = new Array("#anchor1","#anchor2");
    
    var currPic = 0;
    
    var totPics = 2;
    
    var keepTime;
    
    function setupPicChange()
    {
    keepTime=setTimeout("changePic()", 10000); 
    }
    
    function changePic()
    {
    currPic++;
     if (currPic>totPics) {
      currPic=1;
     }
    document.getElementById("picture").src="a_image"+currPic+".jpg";
    document.getElementById("picture").onclick = function() {
      document.location.href = anchors[currPic - 1];
     }
    setupPicChange();
    }
    
    window.onload = function() {
    changePic();
    }
    
    </script>
    
    <!-- body -->
    
    <img id="picture" src="a_image1.jpg">
    Last edited by web_loone08; January 16th, 2013 at 10:15 PM.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    98
    Rep Power
    2
    Great web_loone08! It works fine but I have to wait until the image rotates at least one time before it becomes click-able. Why is this?

    Also, I want the link to open in a new window.

    Finally, will search engines recognize this link while crawling my site?
    Last edited by BitZoid; January 16th, 2013 at 11:20 PM.
    -- Success achieved from tribulation --
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    184
    Originally Posted by BitZoid
    Great web_loone08! It works fine but I have to wait until the image rotates at least one time before it becomes click-able. Why is this?
    Actually, you don't; the image is clickable just as soon as the page loads. This is because the function assigns the image an onclick event; when page loads.

    Originally Posted by BitZoid
    Also, I want the link to open in a new window
    Replace this:

    Code:
    document.location.href = anchors[currPic - 1];
    With this:

    Code:
    window.open(anchors[currPic - 1]);
    Originally Posted by BitZoid
    Finally, will search engines recognize this link while crawling my site?
    No, because JavaScript dynamically assigns the image an onclick event and it is not actually a link; which means it cannot be followed. You could always create a site map, though and submit it to search engines; to make these dynamic links SEO friendly... or you could even hide static links in your web page (that would represent these dynamic links; when your page is crawled).
    Last edited by web_loone08; January 16th, 2013 at 11:56 PM.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    98
    Rep Power
    2
    loone, for some reason this image is not click-able until it rotates to the second image, then it is continuously clickable - It must have something to do with the counter on the variables. Here can you check my code:

    Code:
    <script type="text/javascript">
    
    var anchors = new Array("#anchor1","#anchor2");
    
    anchors[0] = "http://example.com";
    
    anchors[1] = "http://example2.com";
    
    var currPic = 1;
    
    var totPics = 2;
    
    var keepTime;
    
    function setupPicChange()
    {
    keepTime=setTimeout("changePic()", 6400); 
    }
    
    function changePic()
    {
    currPic++;
     if (currPic>totPics) {
      currPic=1;
     }
    document.getElementById("picture").src="a_image"+currPic+".jpg";
    document.getElementById("picture").onclick = function() {
    window.open(anchors[currPic - 1]);
     }
    setupPicChange();
    }
    
    window.onload = function() {
    changePic();
    }
    
    </script>
    HTML
    Code:
    <img id="picture" src="a_image1.jpg" alt="Some imageless alt" title="Some title stuff.">
    Also, how do I add these links to my sitemap I already have via xml-sitemaps.org?

    THank you!
    Last edited by BitZoid; January 18th, 2013 at 09:20 PM.
    -- Success achieved from tribulation --
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    184
    Ok, it's because you changed the currPic variable back from 0 to 1. The function relies on the load event and just as soon as the function is triggered; currPic increments, until it hits 2 and then it resets to 1 (as your if() condition tells it to do; once it hits 2). What browser are you testing in? Because I am currently testing the code in Chrome and the image is clickable onload.

    *UPDATE: And... I just tested in FireFox & Internet Explorer and it works onload. I do not have Safari or Opera on this system; so I cannot test in it; at this exact moment, but I will stipulate... the code will work as expected on those two browsers, as well.
    Last edited by web_loone08; January 18th, 2013 at 09:52 PM.
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    98
    Rep Power
    2
    Originally Posted by web_loone08
    Ok, it's because you changed the currPic variable back from 0 to 1. The function relies on the load event and just as soon as the function is triggered; currPic increments, until it hits 2 and then it resets to 1 (as your if() condition tells it to do; once it hits 2). What browser are you testing in? Because I am currently testing the code in Chrome and the image is clickable onload.

    *UPDATE: And... I just tested in FireFox & Internet Explorer and it works onload. I do not have Safari or Opera on this system; so I cannot test in it; at this exact moment, but I will stipulate... the code will work as expected on those two browsers, as well.
    Loone I beg to differ, on my browser (firefox AND IE10). I have used the above code but changed the first instance of currPic to 0 - and I will steadily click the image and nothing happens. The first link DOES become clickable RIGHT before the 2nd image comes up, which is also clickable. Then it works correctly, infinitely.

    What is going on here between our two browsers? Why are they differing in results?
    Last edited by BitZoid; January 18th, 2013 at 10:01 PM.
    -- Success achieved from tribulation --
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    184
    Originally Posted by BitZoid
    What is going on here between our two browsers? Why are they differing in results?
    I do not know why the code is not working in your browsers; because it is working in mine.

    Here... try this and see if it works for you; if it doesn't... then I do not know what else to tell you, except maybe add a static link to the image... with an <a> tag.

    Code:
    <script type="text/javascript">
    
    var anchors = new Array();
    
    anchors[0] = "http://example.com";
    
    anchors[1] = "http://example2.com";
    
    var currPic = 0;
    
    var totPics = 2;
    
    var keepTime;
    
    function setupPicChange()
    {
    keepTime=setTimeout("changePic()", 6400); 
    }
    
    function changePic()
    {
    currPic++;
     if (currPic>totPics) {
      currPic=1;
     }
    document.getElementById("picture").src="a_image"+currPic+".jpg";
    document.getElementById("picture").onclick = function() {
    window.open(anchors[currPic - 1]);
     }
    setupPicChange();
    }
    
    </script>
    
    <img id="picture" src="a_image1.jpg" alt="Some imageless alt" title="Some title stuff.">
    
    <script>
    (function() {
    changePic();
    })();
    </script>

IMN logo majestic logo threadwatch logo seochat tools logo