When surfing some websites ,I see vertical banners scroll along left side and right side . That's a good idea for attracting visitors to banner ads and increase the clickthrough rate of sites .
Live Demo Do you want to make a scrolling banner for your sites ? here is script for you
Just copy this script and paste it right after
<body> tag
<style type="text/css">
.float {
width: 150px;
height: 800px;
border: solid 1px white;
}
</style>
<!--code of scrolling banner -->
<div id="
rightbanner" class="float"><a href="
http://simplexdesign.blogspot.com"><img src="
link to your banner" border="0"></a></div>
<div id="
leftbanner" class="float"><a href="
http://simplexdesign.blogspot.com" target="_blank">
<img src="link to your banner" border="0"></a></div>
<script type="text/javascript">
function setPosition(id, position) {
var store = {
ram : {
top : 0,
left : 0,
right : 0,
bottom : 0
},
rom : {
top : null,
left : null,
right : null,
bottom : null
}
};
for (var i in position) {store.rom[i] = position[i];}
var element = document.getElementById(id);
for (i in store) {element[i] = store[i];}
element.rom.move = function() {
if (window.innerHeight) {
var topPage = window.pageYOffset;
var leftPage = window.pageXOffset;
var rightPage = leftPage + window.innerWidth - element.offsetWidth;
var bottomPage = topPage + window.innerHeight - element.offsetHeight;
}
else {
var topPage = document.body.scrollTop;
var leftPage = document.body.scrollLeft;
var rightPage = leftPage + document.body.clientWidth - element.offsetWidth;
var bottomPage = topPage + document.body.clientHeight - element.offsetHeight;
}
element.style.position = "absolute";
if (element.rom.top != null) {
element.ram.top += Math.round((topPage + element.rom.top - element.ram.top)/20);
element.style.top = element.ram.top;
}
if (element.rom.left != null) {
element.ram.left += Math.round((leftPage + element.rom.left - element.ram.left)/20);
element.style.left = element.ram.left;
}
if (element.rom.right != null) {
element.ram.right += Math.round((rightPage - element.rom.right - element.ram.right)/20);
element.style.left = element.ram.right;
}
if (element.rom.bottom != null) {
element.ram.bottom += Math.round((bottomPage - element.rom.bottom - element.ram.bottom)/20);
element.style.top = element.ram.bottom;
}
setTimeout("document.getElementById('"+element.id+"').rom.move()",10);
};
element.rom.move();
}
setPosition("a", {top: 0, left: 880});
setPosition("c", {top: 0, left: 20});
</script>
<!--end code -->
Remember to change the image link to your banner's and change the target url (I marked them in bold)
Position of two banners are set by two code lines
setPosition("rightbanner", {top: 0, left: 880});
setPosition("leftbanner", {top: 0, left: 20});
The line
setPosition("rightbanner", {top: 0, left: 880});
mean :
-The distance between right banner and top of browser window is 0
-The distance between right banner and left of browser window is 880 pixel
Left banner is similar to rightbanner
You can change these values for the best display in your site .
That's all .I hope this tip helpful to you
