Mark Forums Read
  #1  
Old 05-19-2010, 01:02 AM
JavaScriptBank JavaScriptBank is offline
Senior Member
 
Join Date: Sep 2009
Posts: 130
JavaScriptBank is on a distinguished road
Default Streaming Horizontal Banner

Use this JavaScript code to make a a horizontal image scroller on your web page. If do not view the source code, maybe you will think tha... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


How to setup

Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<style type="text/css"> <!-- #slideCont { border:solid 1px #000; text-align:center; } #slideCont img { margin: 5px; } --> </style>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript"> <!-- /* ----------------------------------------------- Streaming banners - v.1 (c) 2006 www.haan.net You may use this script but please leave the credits on top intact. Please inform us of any improvements made. When usefull we will add your credits. ------------------------------------------------ */ <!-- function clip() { // width of the banner container var contWidth = 425; // height of the banner container var contHeight = 90; var id1 = document.getElementById('slideA'); var id2 = document.getElementById('slideB'); id1.style.left = parseInt(id1.style.left)-1 + 'px'; document.getElementById('slideCont').style.width = contWidth + "px"; document.getElementById('slideCont').style.clip = 'rect(auto,'+ contWidth +'px,' + contHeight +'px,auto)'; id2.style.display = ''; if(parseFloat(id1.style.left) == -(contWidth)) { id1.style.left = '0px'; } setTimeout(clip,25) } // Multiple onload function created by: Simon Willison // http://simonwillison.net/2004/May/26/addLoadEvent/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(function() { clip(); }); //--> </script>
Step 3: Place HTML below in your BODY section
HTML
Code:
<div id="slideCont" style="overflow: hidden; position: relative; z-index: 1; width: 425px; height: 90px; top: 0px; clip: rect(auto, 425px, 90px, auto);"> <div id="slideA" style="overflow: hidden; position: absolute; z-index: 1; top: 0px; left: -194px; width: 850px; height: 90px;"> <div style="float: left;" id="innerSlideA"> <a href="http://www.apache.org/"><img src="/logos/logo_jsbank.jpg" border="0" height="44" width="126"></a> <a href="http://www.haan.net/"><img src="/logos/gif_logojsb2.gif" border="0" height="60" width="120"></a> <a href="http://www.mysql.com/"><img src="/logos/jsb_banner.gif" border="0" height="44" width="126"></a> </div> <div id="slideB" style="overflow: hidden; position: relative; z-index: 1; top: 0px; left: 0px; width: 425px; height: 90px;"> <a href="http://www.apache.org/"><img src="/logos/logo_jsb.jpg" border="0" height="44" width="126"></a> <a href="http://www.haan.net/"><img src="/logos/logo_jsb__88x31.gif" border="0" height="60" width="120"></a> <a href="http://www.mysql.com/"><img src="/logos/logo_jsb_120x60.jpg" border="0" height="44" width="126"></a> </div> </div> </div>





Reply With Quote
 #Add to Ads's Reputation  
OldSponsored Ads
Ads AdsPromoter is online
Member
 
Join Date: LongTime
Posts: 1100
Ads is on a distinguished road
Default New Sponsored Ads



This message will go away once you are registered. Also, by registering, you will have access to all post topics, communicate privately with other members (PM), respond to polls, upload graphics, and access other special features! Registration is fast, simple and absolutely free so please Click Here to join our Web Hosting community today!
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 05:23 PM.


Powered by vBulletin Version 3.6.1
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
SEO by vBSEO 2.4.0