Change Background with Mouse Click

Published: April 7, 2009 | Author: admin
Share/Save/Bookmark  

Control the background image using the links on your site. control the color using onMouseOver, onMouseOut, onClick, and a combination of all of them.

place the code below between the and 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 this to change the background color when user places mouse over the link.

CODE
<a href=”link.htm” onMouseOver=”document.body.background=’red.gif’”>Link Text</a>

Option 2:
use this to change the background image when user removes mouse from over the link (onMouseOut).

CODE
<a href=”link.htm” onMouseOut=”document.body.background=’green.gif’”>Link Text</a>

Option 3:
use this to change the background image when user clicks the link (onClick).

CODE
<a href=”link.htm” onClick=”document.body.background=’blue.gif’”>Link Text</a>

Option 4:
use this 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).

CODE
<a href=”link.htm” onMouseOver=”document.body.background=’red.gif’” onMouseOut=”document.body.background=’green.gif’”>Link Text</a>

Option 5:
use this 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).

CODE
<a href=”link.htm” onMouseOver=”document.body.background=’red.gif’” onMouseOut=”document.body.background=’green.gif’” onClick=”document.body.background=’blue.gif’”>Link Text</a>

Post to Twitter Tweet This Post

  • Share/Bookmark

You may also find these posts interesting!

Bio | Contact Posted by admin

Used tags: , , , ,

Filed under: Tutorials
There are no comments to this entry yet
Name (required)
E-mail address (required, will not be published)
Website