ChangeDivBackground

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. code format="vbnet" 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 code 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. code format="vbnet" 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 " document.getElementById('div1').style.backgroundImage = ";bg$;";   " wait code 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. code format="vbnet" 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 " document.getElementById('div1').style.backgroundImage = ";bg$;"; document.getElementById('div1').style.border = ";brd$;";   " wait code

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
 * Change Image On Click user:alix
 * Show/Hide a DIV user:benjamin805