CSS Hide / Show Layers

cavey

My website has news articles and we usually display a photo with each article. We'd like to show five photos though and have the ability to scan through them with links. Is there a way to do this by showing / hiding CSS layers, and not using JavaScript? Or, what is the best way to do it with javaScript?

screenshot: www.timbercrawler.com/tim/photoscript.jpg

cavey

anyone? don't make me go over to phpfreaks.com LOL

suntra

Well in CSS, you can use
display:block (to show an element)
display:none (to hide an element)

You could use a ":hover" syntax to HIDE a div, but to show it again, there's only javascript !

NogDog

You can do something like the following, so that it will use JavaScript if it's enabled, but fall back to reloading the page if not (using a bit of PHP to set the selected image).

<?php
$image = (isset($_GET['img'])) ? basename(trim($_GET['img'])) :
         'noggin1.jpg';
?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Image Demo</title>
<style type="text/css">
<!--
#images {
   background-color: #036;
   border: outset 2px #036;
   width: 700px;
   margin: 1em auto;
   padding: 10px 0 0 0;
   text-align: center;
}
#images p {
   background-color: red;
   margin: 10px 0 0 0;
   padding: .5em 1em;
}
#images a {
   color: white;
   text-decoration: none;
   font-weight: bold;
}
-->
</style>
<script type="text/javascript">
function changeImage(img)
{
   document.getElementById('img').src="http://www.charles-reace.com/Photos/" + img;
}
</script>
</head>
<body>
<div id="images">
<img id="img" src="http://www.charles-reace.com/Photos/<?php
echo $image; ?>" alt="">
<p>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?img=noggin1.jpg"
onclick="changeImage('noggin1.jpg');return(false);">1</a>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?img=noggin2.jpg"
onclick="changeImage('noggin2.jpg');return(false);">2</a>
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?img=noggin3.jpg"
onclick="changeImage('noggin3.jpg');return(false);">3</a>
</div>
</body>
</html>

cavey

I want to be able to hide/show an entire layer onClick. For example say I have three tabs that say:

renew

cancel

and I have a css layer for each, like <div class="subscribe">, <div class="renew"> and <div class="cancel"> and when you click the subscribe link, i want to show the subscribe layer, and hide the others and so on and so forth. basically each layer has a different form to enter data, and this would be much smoother than re-loading the dang page.

You can see it here: http://outside.away.com/index.html
in the right side column where it says Blogs, Videos, Podcasts and Photos... how is this done, all javascript?

Weedpacket

There are a few slideshow type thingies at www.cssplay.co.uk Javascript isn't necessary, though it can make some things easier.

stijnm

In my opinion: don't trust the ':hover' css syntax to be cross-browser for anything else than a link <a>.

Think JavaScript is the way to go, and can be made easy with prototypejs:

http://www.prototypejs.org/

cavey

yeah css hover is twitchy on a mac, I just did onclick stuff, no hover. Thx.