Rollover Image

/* CSS Code */

.btn { background-image: url("image2.png"); height: 100px; width: 100px; margin: 0; padding: 0; }
.btn img { border: 0; width: 100%; height: 100%; }
.btn a, .nav a:link, .btn a:visited { display: block; }
.btn a:hover img { visibility: hidden; }

/* End CSS Code */

/* HTML Code */

<div class="btn">
<a href="#"><img src="image1.png"></a>
</div>

/* End HTML Code */

Collapse and Expand

<!-- This is the Activator -->
<span style="cursor:pointer; text-decoration:underline; color:#69F;" onclick="javascript: expandCollapse('div_to_expand');">Click to Expand or Collapse</span>

<!-- This the div to expand and collapse -->
<div id="div_to_expand" style="display:none; background-color:#69F; height:100px">Content for the Div</div>

<script language="javascript">
function expandCollapse() {
for (var i=0; i<expandCollapse.arguments.length; i++) {
var element = document.getElementById(expandCollapse.arguments[i]);
element.style.display = (element.style.display == "none") ? "block" : "none";
}
}
</script>

Shadow effect

-moz-box-shadow:0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5);
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
border-bottom:1px solid rgba(0,0,0,0.25);
box-shadow:0 1px 3px rgba(0,0,0,0.5);

Jquery simple rollover

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!-- Load jQuery -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery","1.3.2");
</script>

</head>
<body>

<!-- jQuery Rollover -->
<script type="text/javascript">
jQuery(document).ready(function() {

$("img.rollover").hover(
function()
{
this.src = this.src.replace("_off","_on");
},
function()
{
this.src = this.src.replace("_on","_off");
}
);

});
</script>

<a href="http://hyperspatial.com"><img class="rollover" src="graphics/go_btn_off.png" width="60" height="21" alt="Button1" /></a>

<a href="http://hyperspatial.com"><img class="rollover" src="graphics/go_btn_off.png" width="60" height="21" alt="Button2" /></a>

</body>
</html>