View Full Version : need help with javascript scroller background

11-01-2012, 02:20 AM
I have some script I am trying to modify and would like to add an image to the background. It's a simple scroller and I just want to add a background image. I removed the style for the border in these lines of code:

if (ie4||DOM2)
document.write('<div id="fscroller" style="width:'+fwidth+';height:'+fheight+'"></div>');

I'm not sure if I can add it above or add a var to the code I received.

Below is the full code I received.

Thanks for any help!

<script type="text/javascript">

* Fading Scroller- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

var delay = 2000; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=40; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)

var fcontent=new Array();
begintag='<div style="font: normal 14px Arial; padding: 5px;">'; //set opening tag, such as font declarations
fcontent[0]="<b>What\'s new?</b><br>New scripts added to the Scroller category!<br><br>The MoreZone has been updated. <a href='../morezone/index.htm'>Click here to visit</a>";
fcontent[1]="Dynamic Drive has been featured on Jars as a top 5% resource, and About.com as a recommended DHTML destination.";
fcontent[2]="Ok, enough with these pointless messages. You get the idea behind this script.</a>";

var fwidth='200px'; //set scroller width
var fheight='150px'; //set scroller height

var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.

///No need to edit below this line/////////////////

var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;

/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0] +", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[inde x]+closetag
if (fadelinks)
colorfade(1, 15);
else if (ie4)

// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com

function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>0){
for (i=0;i<obj.length;i++)

/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
if (fadelinks)
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+" , "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);


/*Rafael Raposo's new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");

if (ie4||DOM2)
document.write('<div id="fscroller" style="width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)


11-01-2012, 03:00 AM
In future, if you post any code please put it in between
tags. It makes scanning your posts much easier. You can do this by clicking the small ‘#’ icon above the reply field.

11-01-2012, 12:28 PM
document.write('<div id="fscroller" style="border:1px solid black;width:'+fwidth+';height:'+fheight+';background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);"></div>');

11-01-2012, 08:32 PM
Don't use document.write - it ceased to serve any purpose when Netscape 4 died - since then beginners have been able to use innerHTML which has far fewer problems.

Also there's not much point in testing for IE4 when even IE6 is now dead.