Dynamic Background Image

**True Blue** Sun Oct 16, 2011 9:27 am

Copy & paste the bold text codes below: This will dynamically change the background image. Much easier than some of the more confusing versions out there. Control the background image using the links on your site. Control the color using onMouseOver, onMouseOut, onClick, and a combination of all of them.

EXAMPLES:
Note: The example changes the table background image instead of the page background color. This is only for example purposes, the code below will work as described.
1) When mouse passes over the link.
2) When mouse moves off the link. (move mouse over then move mouse off)
3) When you click on the link.
4) When mouse passes over the link and when you take mouse off link.
5) When mouse passes over the link, when you take mouse off link, and when you click the link.

Place the code below between the <BODY> and </BODY> tags within the HTML page where you want the link to appear. Edit the link text provided to point at the page you would like to open.

Option 1: Use the code below to change the background color when user places mouse over the link.

<a href=" url" onMouseOver="document.body.background='red.gif'"> Text</a>

Option 2: Use the code below to change the background image when user removes mouse from over the link (onMouseOut).

<a href="url" onMouseOut="document.body.background='green.gif'">Text</a>

Option 3: Use the code below to change the background image when user clicks the link (onClick).

<a href="url" onClick="document.body.background='blue.gif'">Text</a>

Option 4: Use the code below to change the background image twice, once when the user places the mouse over the link then again when the user takes the mouse off the link (onMouseOver and onMouseOut).

<a href="url" onMouseOver="document.body.background='red.gif'" onMouseOut="document.body.background='green.gif'">Text</a>

Option 5: Use the code below to change the background image three times, once when the user places the mouse over the link, again when the user takes the mouse off the link, and again when the user clicks on the link (onMouseOver, onMouseOut, and onClick).

<a href="url" onMouseOver="document.body.background='red.gif'" onMouseOut="document.body.background='green.gif'" onClick="document.body.background='blue.gif'">Text</a>