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

JavaScript
1

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:


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


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

Solved with the following:


<!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>