Basically you're saying that you want a different style based on the page the user is currently viewing.
In that case I believe that the following would get you what you need.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id='example-com'>
<head>
<style type='text/css'>
img.nav {
position: absolute;
}
img#about {
left: 10px;
z-index: 1;
}
img#contact {
left: 20px;
z-index: 2;
}
img#more {
left: 30px;
z-index: 3;
}
body#about-us img#about,
body#more-info img#more,
body#contact-us img#contact {
z-index: 4;
}
</style>
</head>
<body id='about-us'>
<img src='/images/about.jpg' id='about' class='nav' alt='About us.' />
<img src='/images/contact.jpg' id='contact' class='nav' alt='Contact Us' />
<img src='/images/more.jpg' id='more' class='nav' alt='More Information' />
</body>
</html>
The underlying theory should be pretty straight-forward. Each page that you create receives a unique id name. As you see in the CSS this id name cannot be the same as the id name you assign each image. This style sheet works better as an external style sheet, BTW. But the premise is that each image overlaps in ascending order, that is until the last rule of the style sheet comes into play.
body#about-us img#about,
body#more-info img#more,
body#contact-us img#contact {
z-index: 4;
}
This makes the current page's image the one on top. It defeats the previously defined rules via the cascade.
Of course you'll have to wrap those images in <div> elements if you want to use links on them, in which case you'd just name and position the <div> elements rather than the image elements.
This also assumes that you want to use the same images, whether they're 'on' or 'off'. If you want to use a different image as the 'off' image, it can still be done purely with CSS.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id='example-com'>
<head>
<style type='text/css'>
img.nav {
position: absolute;
}
img#about,
img#about-off {
left: 10px;
z-index: 1;
}
img#contact,
img#contact-off {
left: 20px;
z-index: 2;
}
img#more,
img#more-off {
left: 30px;
z-index: 3;
}
body#about-us img#about,
body#more-info img#more,
body#contact-us img#contact {
z-index: 4;
}
body#about-us img#about-off,
body#about-us img#contact,
body#about-us img#more,
body#more-info img#more-off,
body#more-info img#about,
body#more-info img#contact,
body#contact-us img#contact-off,
body#contact-us img#more,
body#contact-us img#about {
display: none;
}
</style>
</head>
<body id='about-us'>
<img src='/images/about.jpg' id='about' class='nav' alt='About us.' />
<img src='/images/about-off.jpg' id='about-off' class='nav' alt='About us.' />
<img src='/images/contact.jpg' id='contact' class='nav' alt='Contact Us' />
<img src='/images/contact-off.jpg' id='contact-off' class='nav' alt='Contact Us' />
<img src='/images/more.jpg' id='more' class='nav' alt='More Information' />
<img src='/images/more-off.jpg' id='more-off' class='nav' alt='More Information' />
</body>
</html>
Now you're including six images instead of three, and selectivly displaying and layering those images depending on which page the user is visiting.
HTH!
Regards,
Rich
--
[
http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
new to forum, 1st project question for ya'll
