Entry
How can I dynamically change the background image?
How can I dynamically change the background image?
Feb 12th, 2000 17:03
Martin Honnen,
With NN6 and IE4/5 the
<BODY BACKGROUND="whatever.gif">
attribute is reflected in the js DOM as
document.body.background
so to set the background to a new image you simply set
document.body.background = 'whatelse.gif';
NN4 does not provide any similar property in its DOM. You can however
achieve the effect of changing the background image by
- stuffing your whole page content into one layer
- dynamically generate a background image layer
The following contains the necessary code (note how it defaults for NN6
and IE4/5 to setting document.body.background) and three examples on
how to set the background and clear it. The cookie handling used is
necessary to ensure a background image set is preserved on resize of
the window. Note that clearing the background needs a 1x1 transparent
gif.
<HTML>
<HEAD>
<STYLE>
#pageContent { position: absolute; z-index: 10; }
</STYLE>
<SCRIPT>
var imgURL0 = 'whatever.gif';
var imgURL1 = 'whatelse.gif';
</SCRIPT>
<SCRIPT>
var blankImage = new Image();
blankImage.src = '1x1transparent.gif';
var background;
var backgroundLayer;
function getCookie(Name) {
var search = Name + "="
if (document.cookie.length > 0) { // if there are any cookies
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset)
// set index of end of cookie value
if (end == -1)
end = document.cookie.length
return unescape(document.cookie.substring(offset, end))
}
}
}
function expireCookie (name) {
var now = new Date();
var yesterday = new Date(now.getTime() - (1000 * 60 * 60 * 24));
document.cookie = name + '=whatever; expires=' +
yesterday.toGMTString();
}
function initBackground(url) {
if (document.layers) {
var bg = getCookie('background');
if (bg) {
changeBackground(bg);
expireCookie('background');
}
}
}
function changeBackground (url) {
if (document.layers) {
if (!backgroundLayer) {
backgroundLayer = new Layer(1);
}
background = url;
//document.cookie = 'background=' + escape(background);
var l = backgroundLayer;
if (!url) {
var html = '<HTML>'
+ '<BODY BGCOLOR="' + document.bgColor + '"'
+ ' BACKGROUND="' + blankImage.src +
'"><\/BODY><\/HTML>';
}
else
var html = '<HTML><BODY BACKGROUND="' + url +
'"><\/BODY><\/HTML>';
l.zIndex = 0;
l.clip.width = window.innerWidth + 10;
l.clip.height = window.innerHeight + 10;
l.document.open();
l.document.write(html);
l.document.close();
l.visibility = 'show';
}
else if (document.body)
document.body.background = url;
}
if (document.layers)
window.onresize = function (evt) {
document.cookie = 'background=' + escape(background);
location.reload();
};
</SCRIPT>
</HEAD>
<BODY ONLOAD="initBackground();">
<DIV ID="pageContent">
Kibology for all.
<BR>
All for Kibology.
<BR>
<A HREF="javascript: changeBackground(imgURL0); void 0">
set background 1
</A>
|
<A HREF="javascript: changeBackground(imgURL1); void 0">
set background 2
</A>
|
<A HREF="javascript: changeBackground(''); void 0">
clear background
</A>
</DIV>
</BODY>
</HTML>
If you want to start your page with a background image still just use
<BODY BACKGROUND="whatever.gif">
