Web Page Backgrounds Section Summary - Neils Resource WebWeb Page Backgrounds Section Summary - Neils Resource WebBackgrounds Design - Web Dev. - Neils Resource Web

Contract Menu | Expand Menu
Summary of Content
By clicking on a texture below, the page background will change to it. Can be used anywhere.
This is achieved by using the canceBubble event.
This sets or retrieves whether the current event should bubble up the hierarchy of event handlers.
event.cancelBubble = false
false (default) - Bubbling is enabled, allowing the next event handler in the hierarchy to receive the event.
true - Bubbling is disabled for this event, preventing the next event handler in the hierarchy from receiving the event.
Using this property to cancel bubbling for an event does not affect subsequent events.
A double mouse click anywhere on the page (except when over hyperlinks / images) will take you back to the top of the page.

Style tag (in Head section) to make cursor turn into a hand on mouse over
<style>
.bgimages img {cursor:hand}
</style>
Script (in Head section)
<script language="JavaScript1.2">
<!--

function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"
}

function restore(){
document.body.style.backgroundImage=''
}
document.body.onclick=restore
//-->
</script>
Coding for 7 background image choices (in Body section)
<tr><td><span class="bgimages" onClick="tile();event.cancelBubble=true"><img src="../../../images/Backgrounds/cnvbkgnd.jpg"></span></td>
<td><span class="bgimages" onClick="tile();event.cancelBubble=true"><img src="../Images/lblue047x.gif"></span></td>
<td><span class="bgimages" onClick="tile();event.cancelBubble=true"><img src="../Images/lgrey042x.jpg"></span></td>
<td><span class="bgimages" onClick="tile();event.cancelBubble=true"><img src="../Images/lgrey011x.jpg"></span></td>
<td><span class="bgimages" onClick="tile();event.cancelBubble=true"><img src="../Images/lgrey170x.jpg"></span></td>
<td><span class="bgimages" onClick="tile();event.cancelBubble=true"><img src="../Images/lgrey023x.jpg"></span></td>
<td><span class="bgimages" onClick="tile();event.cancelBubble=true"><img src="../Images/plainbac4x.jpg"></span></td></tr>
Terminate the cancelBubble event
<span class="bgimages" onClick="tile();event.cancelBubble=true">

empty
empty empty
empty
empty

Put it at the foot of your screen for on the fly customisation.
Make sure that the image is re-sampled to the smaller dimension, note the loss of texture caused by not doing this by selecting a texture from below.

Last Update: 16/08/2007 - Backgrounds Colour Chooser - Web Development - Neils Resource Web

html 4.01 strict css 2.1 javascript 1.2