SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Working JS Fading Image Banner - Now how to make images linked?

    Hey

    I am very new to javascript and have only just started looking into it after working quite a bit in html, css and php.

    I have a working image banner on my webpage that switches between 1 of 2 images every 7 seconds. The code in the html is below:

    Code:
    <td class="mi"><img class="mg" src="http://www.pcm-mechanics.co.uk/img/pcm.jpg" alt="pcm mechanics welcome banner" name="rollbanner" border="0"/></td>
    Now the javascript code:

    Code:
    var imgsB = new Array(); var imgcntB = 0; var thisimgB = 0;
    imgsB[imgcntB++] = 'http://www.pcm-mechanics.co.uk/img/pcm.jpg';
    imgsB[imgcntB++] = 'http://www.pcm-mechanics.co.uk/img/pcm2.jpg';
    
    function rotateB() {
    if (document.images) {
    thisimgB++;
    if (thisimgB >= imgcntB) thisimgB = 0;
    document.rollbanner.src = imgsB[thisimgB];
    setTimeout("rotateB();",7000);
    }
    }
    setTimeout("rotateB();",7000);
    This all works fine but i now need to make the second image 'pcm2.jpg' a clickable link where as the first image 'pcm.jpg' which starts off the image rotation in the html page has no link. I have tried using 'document.rollbanner.href = ....' inside the function but that hasn't helped. Is that because the first image in the html page has no href value to begin with? If so how do i get around this as i dont want the first image to have a link, only the second one.

    Any ideas really appreciated....

    Thanks

    John

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved with the following:

    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>
    <title></title>
    <script type="text/javascript">
    <!--
    
    var imgsB = new Array(); var imgcntB = 0; var thisimgB = 0;
    imgsB[imgcntB++] = 'pic1.jpg';
    imgsB[imgcntB++] = 'pic2.jpg';
    
    function rotateB() {
        if (document.images) {
             thisimgB++;
             if (thisimgB >= imgcntB) {
                 thisimgB = 0;
                 document.getElementById("mi").innerHTML = '<img class="mg" src="" alt="pcm mechanics welcome banner" name="rollbanner" border="0"/>';  
             } else {
                 document.getElementById("mi").innerHTML = '<a id="imgLink" href="some_url">'+
                 '<img class="mg" src="" alt="pcm mechanics welcome banner" name="rollbanner" border="0"/>'+
                 '</a>';
             }
             document.rollbanner.src = imgsB[thisimgB];
        }
    }
    
    window.onload = function() {
        setInterval("rotateB();",4000);
    }
    
    //-->
    </script>
    
    </head>
    <body>
    <div class="mi" id="mi">
          <img class="mg" src="pic1.jpg" alt="pcm mechanics welcome banner" name="rollbanner" border="0"/>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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