Enlarge image rollover

/*
*  Cycle Image Size Rollover. This script written for buddypress to create rollover effect on avatars.
*  The 'enlargementRatio' argument is the multiplyer applied to the original icon size
*  The 'childNumber' argument is to target the right img node, typically is 1 or zero
*  Add this to the avatar <a> parent:  onmouseover="cycleChildImage(this,1.1);" onmouseout="cycleChildImage(this,1.1);"
*  Add this to any image:  onmouseover="cycleImage(this,1.1,1);" onmouseout="cycleImage(this,1.1,1);"
*/

var existingWidth;
var existingHeight;
var isLarge = false;

function cycleImage(element,enlargementRatio){
var imageElement = element;
if(isLarge == true) reduceImage(imageElement,enlargementRatio);
else enlargeImage(imageElement,enlargementRatio);
}

function cycleChildImage(element,enlargementRatio,childNumber){
var imageElement = element.childNodes.item(childNumber);
if(isLarge == true) reduceImage(imageElement,enlargementRatio);
else enlargeImage(imageElement,enlargementRatio);
}

function enlargeImage(imageElement,enlargementRatio){
existingWidth = imageElement.width;
existingHeight = imageElement.height;
imageElement.style.width = (existingWidth * enlargementRatio) + 'px';
imageElement.style.height = (existingHeight * enlargementRatio) + 'px';
isLarge = true;
}

function reduceImage(imageElement,enlargementRatio){
imageElement.style.width = existingWidth + 'px';
imageElement.style.height = existingHeight + 'px';
isLarge = false;
}

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>

Disjointed Rollover Text

<!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>Testing</title>
<style type="text/css">
<!--
#rollover li a {
text-decoration:none;
}
#rollover li a span {
visibility:hidden;
display:block;
position:absolute;
/**adjust disjointed text position in % or px**/
left:40%;
top:50px;
color:#666;
background-color:#CCFF99;
border: 2px solid silver;
padding: 5px;
}
#rollover li a:hover span, #rollover li a:active span, #rollover li a:focus span {
visibility:visible;
}
#rollover li a:hover, #rollover li a:focus {
text-decoration: none;
color:#FF6600;
visibility:visible;
}
-->
</style>
</head>
<body>

<ul id="rollover">
<li><a href="#">Link Item 1<span>Item 1 Text Goes Here</span></a></li>
<li><a href="#">Link Item 2<span>Item 2 Text Goes Here</span></a></li>
<li><a href="#">Link Item 3<span>Item 3 Text Goes Here</span></a></li>
<li><a href="#">Link Item 4<span>Item 4 Text Goes Here</span></a></li>
</ul>

</body>
</html>