Forum Moderators: open
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Faith Life Church - Branson, MO</title>
<script src="include/jquery-1.6.4.min.js"></script>
<script>
// changes <header> background when mouseover <ul class="inheader"><li>
$('.inheader li').hover(
function(){$('header').addClass($(this).attr('class'))},
function(){$('header').removeClass($(this).attr('class'))}
)
</script>
<style type="text/css" media="screen">
header {background-image:url(images/backgrounds/header-flcbranson.jpg)}
</style>
</head>
<body role="document">
<header role="banner">
<h1><a href="http://www.flcbranson.org">Faith Life Church</a></h1>
</header>
<nav role="navigation">
<h2>Main site navigation</h2>
<ul class="inheader">
<li class="joinusonline"><a href="flconlineservices.php">Join Us On-Line</a></li>
<li class="areainformation"><a href="flcareainfo.php">Area Information</a></li>
<li class="flcevents"><a href="flcevents.php"><abbr title="Faith Life Church">FLC</abbr> Events</a></li>
<li class="freedownloads"><a href="freedownloads.php">Free Downloads</a></li>
</ul>
</nav>
<section id="content" role="main">
<h1 id="title">Welcome</h1>
</section>
</body>
</html>
header {background:#003366 url() no-repeat center top;}
header.joinusonline {background-image:url(../images/backgrounds/header-joinusonline.jpg)}
header.areainformation {background-image:url(../images/backgrounds/header-areainformation.jpg)}
header.flcevents {background-image:url(../images/backgrounds/header-flcevents.jpg)}
<header role="banner">
$(document).ready(function() {
// changes <header> background when mouseover <ul class="primarynavigation"><li>
$(document).ready(function() {
$('.primarynavigation li').hover(
function(){$('header').addClass(this.className)},
function(){$('header').removeClass(this.className)}
)
})
