Backgrounds Design - Web Dev. - Neils Resource Web| 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. |
| Other Site Links | |
| Site Link | Description |
| Grsites.com | This Site has it all, and the tools to manipulate the colours, textures and sizes. Now with a gradient background making tool. |
| Geocities.com | Plain Backgrounds for web pages |
| 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.
 |
 |
 |
 |
 |
 |
 |
Hyperlink titles have been abbreviated, (right click on the link and select properties for the full URL)
Double mouse click anywhere on the page to take you back to the top (except when over the links)
Last Update: 16/08/2007 - Backgrounds Colour Chooser - Web Development - Neils Resource Web
