homepage Welcome to WebmasterWorld Guest from 54.166.62.226
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Random banner help
RadioSean



 
Msg#: 4553415 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4553415 posted 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#: 4553415 posted 5:18 pm on Mar 13, 2013 (gmt 0)

Thanks works fine

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4553415 posted 6:48 pm on Mar 13, 2013 (gmt 0)

No problem, you're very welcome. ;)


birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved