Results 1 to 3 of 3
-
01-24-2005, 10:49 PM #1Disabled
- Join Date
- Dec 2002
- Location
- chica go go
- Posts
- 11,876
Changing page background with css & javascript
Earlier today, i was working on a project of mine, and i came up with an idea.
This idea would change <body>'s css driven background style, when an element like <a> or <h1> was moused over.
Using the following code, i was able to accomplish the task, and it even turned out to Validate Perfectly, according to xhtml 1.0 strict standards.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>TheWebsite</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> #body{ background-image:URL(kerry.jpg); background-repeat: no-repeat; background-position: center; background-color:#777; font-family: verdana, arial, helvetica, sans-serif;} H1{ margin: 0px; font-size: 50pt; font-weight: bold; bottom: 0; right: 0; position: absolute;} #body2{ background-image:URL(marshmallowman.jpg); background-repeat: no-repeat; background-position: center; background-color:#777; font-family: verdana, arial, helvetica, sans-serif;} </style> </head> <body id="body"> <h1 onmouseover="body.id='body2'" onmouseout="body.id='body'">TheWebsite</h1> </body> </html>
Code:#body{ background-image:URL(kerry.jpg); background-repeat: no-repeat; background-position: center; background-color:#777; font-family: verdana, arial, helvetica, sans-serif;}
Code:H1{ margin: 0px; font-size: 50pt; font-weight: bold; bottom: 0; right: 0; position: absolute;}
Code:#body2{ background-image:URL(marshmallowman.jpg); background-repeat: no-repeat; background-position: center; background-color:#777; font-family: verdana, arial, helvetica, sans-serif;}
Code:<body id="body">
Code:<h1 onmouseover="body.id='body2'" onmouseout="body.id='body'">TheWebsite</h1>
Take a look at the result, in the attached file.
-
04-03-2005, 12:49 PM #2Newbie
- Join Date
- Mar 2005
- Posts
- 9
Good tutorial. Is this like the hotmail.com thing they have somewhat?
-
04-03-2005, 01:05 PM #3Newbie
- Join Date
- Mar 2005
- Posts
- 9
Where is the attached file?