Random banner help

Hi, I have this script and does almost everything I need, I would like the banners to have a clickable link in new window. can anyone help


<script type="text/javascript">
window.onload = function () {
  var header = document.getElementById('banner');
  var pictures = new Array('images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg');
  var numPics = pictures.length;
  if (document.images) {
    var chosenPic = Math.floor((Math.random() * numPics));
    header.style.background = 'url(' + pictures[chosenPic] + ')';
  }
}
</script>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>rotating banner</title>

<link rel="stylesheet" type="text/css" href="/">

<style type="text/css">
#header {
    width:1000px;   /* set this value to your images width */
    height:100px;   /* set this value to your images height */
    border:1px solid #666; /* this is optional */
    margin:auto;      /* this is optional */
    background-color:#ccc; /* this is optional */
 }
#banner,#banner span {
    position:relative;
    display:block;
    width:100%; 
    height:100%;
    line-height:5;
    text-align:center;
 }
#banner span {
    position:absolute;
    top:0;
    left:0;
    background-image:url(images/image1.jpg);
 }
</style>

<script type="text/javascript">
(function() {
  'use strict';

function init(){
  var obj=document.getElementById('banner');

  var pictures=['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg','images/image5.jpg'];
  var urls=['yourlink1.html','yourlink2.html','yourlink3.html','yourlink4.html','yourlink5.html'];
  var urlsText=['text 1','text 2','text 3','text 4','text 5'];

  var num=Math.floor((Math.random()*pictures.length));

  obj.href=urls[num];
  obj.firstChild.nodeValue=urlsText[num];
  obj.firstChild.nextSibling.style.backgroundImage='url('+pictures[num]+')';
 }

  window.addEventListener?
  window.addEventListener('load',init,false):
  window.attachEvent('onload',init);

})();
</script>

</head>
<body>

<div id="header">
  <a id="banner" href="yourlink1.html">text 1<span></span></a>
</div>

</body>
</html>

Random banner help

RadioSean

birdbrain

RadioSean

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week