| Random banner help
|
RadioSean
msg:4553417 | 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
msg:4553856 | 10:11 am on Mar 12, 2013 (gmt 0) |
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
msg:4554372 | 5:18 pm on Mar 13, 2013 (gmt 0) |
Thanks works fine
|
birdbrain
msg:4554395 | 6:48 pm on Mar 13, 2013 (gmt 0) |
No problem, you're very welcome. ;)
birdbrain
|
|
|
