Forum Moderators: open
function img_onload(){
x = document.getElementById("allban").scrollLeft;
if (x>=(total_w - 312)) dir = -1;
if (x<=0) dir = 1;
document.getElementById("allban").scrollLeft = dir + x;
window.setTimeout('img_onload()', 30);
}
function stop(xx){
if (xx==0){
dir_rem = dir;
dir = 0;
}
else dir = dir_rem;
}
total_w = 620;
in <HEAD>
then
<BODY>
Code:
<div id="allban" style="margin-left: 4px; margin-bottom: 10px; padding-left: 15px; _padding-left: 20px; width:606px; _width:620px; overflow: hidden; white-space:nowrap;" onmouseover="stop(0);" onmouseout="stop(1);">
<a href="http://www.domain1.com" target="_blank"><img src="homepage/banner6.gif" border="0" width="150" height="50" class="banner" id="banner0"></a>
<a href="http://www.domain2.com" target="_blank"><img src="homepage/banner1.gif" border="0" width="150" height="50" class="banner" id="banner1"></a>
<a href="http://www.domain3.com" target="_blank"><img src="homepage/banner2.gif" border="0" width="150" height="50" class="banner" id="banner2"></a>
<a href="http://www.domain4.com" target="_blank"><img src="homepage/banner3.gif" border="0" width="150" height="50" class="banner" id="banner3"></a>
<a href="http://www.domain5.com" target="_blank"><img src="homepage/banner4.gif" border="0" width="150" height="50" class="banner" id="banner4"></a>
<a href="http://www.domain6.com" target="_blank"><img src="homepage/banner5.gif" border="0" width="150" height="50" class="banner" id="banner5"></a>
</div>
this code scrolls 6 banners from the left to the right, then back, it's quite fine, but i think much better it could be for my advertisers if these 6 banners will be turning around, i mean after 6th ad will goes again 1st ad, 2ndd... and overe and over...
if that's question of money let me know Need to do it fast!
[webmasterworld.com...]
Just paste this code where ever you want the banners to appear. Let me know how it goes.
<script type="text/javascript">// message to scroll
var marqueecontent='<a href="http://www.domain1.com" target="_blank"><img src="homepage/banner6.gif" border="0" width="150" height="50" class="banner" id="banner0"></a> <a href="http://www.domain2.com" target="_blank"><img src="homepage/banner1.gif" border="0" width="150" height="50" class="banner" id="banner1"></a> <a href="http://www.domain3.com" target="_blank"><img src="homepage/banner2.gif" border="0" width="150" height="50" class="banner" id="banner2"></a> <a href="http://www.domain4.com" target="_blank"><img src="homepage/banner3.gif" border="0" width="150" height="50" class="banner" id="banner3"></a> <a href="http://www.domain5.com" target="_blank"><img src="homepage/banner4.gif" border="0" width="150" height="50" class="banner" id="banner4"></a> <a href="http://www.domain6.com" target="_blank"><img src="homepage/banner5.gif" border="0" width="150" height="50" class="banner" id="banner5"></a>';
var copyspeed=2; // <-- speed of ticker
var tickerWidth = 300; // <-- ticker width
var tickerHeight = 50; // <-- ticker height// global variables
var actualWidth='';
var jsMarquee1;
var jsMarquee2;
var div1Interval = 0;
var div2Interval = 0;
var timeToStartSecond= new Array(8)
var div1Status = 0;
var div2Status = 0;document.write('<span id="temp" style="visibility:hidden;position:absolute;left:-5000px;">'+marqueecontent+'</span>'); // used to determine initial content width
document.write('<span id="temp2" style="visibility:hidden;position:absolute;left:-5000px;"></span>'); // used later to calculate the new width of the contentfunction populate(){
actualWidth=document.getElementById("temp").offsetWidth;
actualWidthTemp=document.getElementById("temp").offsetWidth;// first DIV
jsMarquee1=document.getElementById('marquee1');
jsMarquee1.style.left=parseInt(tickerWidth)+"px";// second DIV
jsMarquee2=document.getElementById('marquee2');
jsMarquee2.style.left=parseInt(tickerWidth)+"px";if(actualWidth <= (tickerWidth*2)){
var tempContent;
tempContent = "<nobr>";// make sure that the div is larger than the ticker area
// if not, duplicate the content
while (actualWidth < (tickerWidth*2)){
tempContent = tempContent + marqueecontent;
actualWidth = actualWidth + actualWidthTemp;
}
tempContent = tempContent + "</nobr>"// load the content into the divs
jsMarquee1.innerHTML=tempContent;
jsMarquee2.innerHTML=tempContent;// get the new actual width of the content
document.getElementById("temp2").innerHTML=tempContent;
actualWidth = document.getElementById("temp2").offsetWidth;}else{
// load the content into the divs
jsMarquee1.innerHTML="<nobr>"+marqueecontent+"</nobr>";
jsMarquee2.innerHTML="<nobr>"+marqueecontent+"</nobr>";
}timeToStartSecond=(tickerWidth-actualWidth);
}
window.onload=populatefunction scrollMarquee(){
if ((parseInt(jsMarquee1.style.left)>(actualWidth*(-1)))){
jsMarquee1.style.left=parseInt(jsMarquee1.style.left)-copyspeed+"px";// call function to begin the second DIV
if(parseInt(jsMarquee1.style.left) < timeToStartSecond && div1Status == 0){
div1Status = 1;
div2Status = 0;
beginSecondMarquee();
}
}else{
//resets the div to it's original location
document.getElementById("marquee1").style.left = parseInt(tickerWidth)+"px";
//clear the interval and stop animation
div1Interval = window.clearInterval(div1Interval);
}
}function scrollSecondMarquee(){
if (parseInt(jsMarquee2.style.left)>(actualWidth*(-1))){
jsMarquee2.style.left=parseInt(jsMarquee2.style.left)-copyspeed+"px";// call function to restart the first DIV
if(parseInt(jsMarquee2.style.left) < timeToStartSecond && div2Status == 0){
div1Status = 0;
div2Status = 1;
startMarquee();
}
}else{
//resets the div to it's original location
document.getElementById("marquee2").style.left = parseInt(tickerWidth)+"px";
//clear the interval and stop animation
div2Interval = window.clearInterval(div2Interval);
}
}/* begins the second marquee */
function beginSecondMarquee(){
div2Interval = window.setInterval("scrollSecondMarquee()",20);
}/* begins the first marquee */
function startMarquee(){
div1Interval = window.setInterval("scrollMarquee()",20);
}
startMarquee();document.write('<div style="position:relative;width:'+tickerWidth+'px;height:'+tickerHeight+'px;overflow:hidden">');
document.write('<div style="position:absolute;width:'+tickerWidth+'px;height:'+tickerHeight+'px;background-color:#DEFDD9" onMouseover="copyspeed=0" onMouseout="copyspeed='+copyspeed+'">');
document.write('<div id="marquee1" style="position:absolute;left:0px;top:0px;"></div>');
document.write('<div id="marquee2" style="position:absolute;left:0px;top:0px;"></div>');
document.write('</div>');
document.write('</div>');</script>
[edited by: Trace at 1:53 pm (utc) on Sep. 27, 2007]
anyway thanx very much appreciate your help.
