Welcome to WebmasterWorld Guest from 54.167.5.15

Forum Moderators: open

Message Too Old, No Replies

Random banner help

     

RadioSean

2:14 pm on Mar 11, 2013 (gmt 0)



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>

birdbrain

10:11 am on Mar 12, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there RadioSean,

and a warm welcome to these forums. ;)

Here is one possible solution....


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


birdbrain

RadioSean

5:18 pm on Mar 13, 2013 (gmt 0)



Thanks works fine

birdbrain

6:48 pm on Mar 13, 2013 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



No problem, you're very welcome. ;)


birdbrain
 

Featured Threads

Hot Threads This Week

Hot Threads This Month