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>
Let's go over the code that were key in accomplishign this task...
Code:
#body{ background-image:URL(kerry.jpg); background-repeat: no-repeat; background-position: center; background-color:#777; font-family: verdana, arial, helvetica, sans-serif;}
this is our first body css element. It uses the background image kerry.jpg, the background image isn't repeated, and the background is aligned right smack dab in the middle of the page. In addition to that, we have assigned the background color #777 which is a darkish gray. Also, we have chose the font family of verdana, arial, helvetica, and sans-serif.
Code:
H1{ margin: 0px; font-size: 50pt; font-weight: bold; bottom: 0; right: 0; position: absolute;}
This is the style element for our text. Margins are removed from the element as to not carry the margins that are typical in the h1 element. Font size is 50 points, font weight is bold, and the text is aligned at the very bottom of the page, in the most right corner of the page. Also, we chose to position this element using absolute positioning. This is done so that the elements acts on it's own, without being influenced by any other elements (eg: body) .
Code:
#body2{ background-image:URL(marshmallowman.jpg); background-repeat: no-repeat; background-position: center; background-color:#777; font-family: verdana, arial, helvetica, sans-serif;}
body2 is our second body element. It holds all the same style elements as #body, with a single change - this change being that the file marshmallowman.jpg is called, instead of the original - kerry.jpg .
body element has to use the id body, in order to hold the style of our #body css element.
Code:
<h1 onmouseover="body.id='body2'" onmouseout="body.id='body'">TheWebsite</h1>
Next is our javascript. we use the javascript handlers - onmouseover, and onmouseout to control what happens on mouse over of the element, and on mouse out of the element. With the first javascritp command, we use onmouseover="body.id='body2'" to change the <body> element's id to body2 on mouseover. and we use onmouseout="body.id='body'" to change the elements id back to body, on mouseout.
Take a look at the result, in the attached file.
Linear Mode
