Changing the Div Background Image with Javascript

Changing a div background is easily accomplished with native Run BASIC commands, but each change necessitates the redrawing of the web page. Copy and paste these snippets into your Run BASIC editor. Run BASIC already contains the required images in its Public folder.
dim bg$(6)
bg$(1) = "/newbutton.png"
bg$(2) = "/openbutton.png"
bg$(3) = "/refreshbutton.png"
bg$(4) = "/runbutton.png"
bg$(5) = "/saveasbutton.png"
bg$(6) = "/savebutton.png"
 
bg = 1
bg$ = bg$(bg)
gosub [setStyles]
refreshTimes = 0
 
[mainLoop]
refreshTimes = refreshTimes + 1
cls
print
print "Changing the Div with native RB"
print
 
div div1
    print "Native RB Code"
    if refreshTimes > 0 then
        print "Window refreshed ";refreshTimes;" times."
    end if
end div
 
print
 
link #deltaDiv, "Change Background Image", [deltaDiv]
wait
 
[deltaDiv]
bg = bg + 1
if bg = 7 then
    bg = 1
end if
bg$ = bg$(bg)
gosub [setStyles]
goto [mainLoop]
wait
 
[setStyles]
cssid #div1, "{
    width:400px;
    height:100px;
    background-image:url(";bg$;");
    color: #33f;
    font-family: verdana;
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
    }"
return
For many applications, repainting the entire screen may suffice well. Repainting does cause a delay and some flickering and those effects may be undesirable. Fortunately, just a few lines of javascript will update that one div without repainting the entire page.
dim bg$(6)
bg$(1) = "/newbutton.png"
bg$(2) = "/openbutton.png"
bg$(3) = "/refreshbutton.png"
bg$(4) = "/runbutton.png"
bg$(5) = "/saveasbutton.png"
bg$(6) = "/savebutton.png"
 
bg = 1
bg$ = bg$(1)
refreshTimes = 0
 
cssid #div1, "{
    width:400px;
    height:100px;
    background-image:url(";bg$;");
    color: #030;
    font-family: verdana;
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
    }"
 
div div1
    print "Changing the Div Style with JS"
    if refreshTimes > 0 then
        print "Window refreshed ";refreshTimes;" times."
    end if
end div
refreshTimes = refreshTimes + 1
 
print
 
link #deltaDiv, "Change Background Image", [deltaDiv]
wait
 
[deltaDiv]
bg = bg + 1
if bg = 7 then
    bg = 1
end if
bg$ = "'url(";bg$(bg);")'"
html "<script language='javascript' type='text/javascript'>
document.getElementById('div1').style.backgroundImage = ";bg$;";
    </script>"
wait
Any div attribute can be changed using document.getElementById('div1').style. Be sure to separate the style changes with a semi-colon. This next example toggles a border around the div, no border if bg is odd and a thick red border if bg is even.
dim bg$(6)
bg$(1) = "/newbutton.png"
bg$(2) = "/openbutton.png"
bg$(3) = "/refreshbutton.png"
bg$(4) = "/runbutton.png"
bg$(5) = "/saveasbutton.png"
bg$(6) = "/savebutton.png"
 
bg = 1
bg$ = bg$(1)
brd$ = "none"
refreshTimes = 0
 
cssid #div1, "{
    width:400px;
    height:100px;
    background-image:url(";bg$;");
    color: #030;
    font-family: verdana;
    font-size: 16pt;
    font-weight: bold;
    text-align: center;
    padding-top: 20px;
    border: ";brd$;";
    }"
 
div div1
    print "Changing the Div Style with JS"
    if refreshTimes > 0 then
        print "Window refreshed ";refreshTimes;" times."
    end if
end div
refreshTimes = refreshTimes + 1
 
print
 
link #deltaDiv, "Change Background Image", [deltaDiv]
wait
 
[deltaDiv]
bg = bg + 1
if bg = 7 then
    bg = 1
end if
if bg mod 2 = 0 then
    brd$ = "'5px dashed #900'"
else
    brd$ = "'none'"
end if
bg$ = "'url(";bg$(bg);")'"
html "<script language='javascript' type='text/javascript'>
document.getElementById('div1').style.backgroundImage = ";bg$;";
document.getElementById('div1').style.border = ";brd$;";
    </script>"
wait

You could embed the javascript code in a javascript function but then you would need to pass the bg and bg$ variables into that function. For the purposes of this demo, a function wasn't needed.

Related Articles