JavaScript - Lightbox Effects In Form ?? How?

<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden"
}
</script>

<style type="text/javascript">
#twittericon {
position: fixed;
bottom:148px;
left: 6%;
width: 33px;
height:29px;
z-index: 49;
 }
 
#tweet{
position:fixed;
bottom:178px;
left: 3%;
max-width:310px;
color:#333333;
font-family:Arial Narrow,Arial,Sans-serif;
font-size:12px;;
z-index:6000;
visibility: hidden;
}
</style>

<div id="twittericon" onMouseOver="showmenu('tweet')" onMouseOut="hidemenu('tweet')"> 
<a href="http://twitter.com/bubblejam" target="_blank">
<img src="http://nang-nang.net/tumblr/blog/twit-bird.gif" width="33" height="29" /></a>
</div>
<div id="tweet"> 
(latest tweet generating code)
</div>

<script type="text/javascript">
$(document).ready(function () {	
	$('ul.dropdown li').hover(
		function () {
			//show its submenu
			$('ul', this).slideDown(150);
		}, 
		function () {
			//hide its submenu
			$('ul', this).slideUp(250);			
		}
	);
});
</script>

<td style="height: 101px; width: 20%" valign="top">
<img onMouseover="changeimage(myimages[1],this.href); newchange();" alt="loading" height="86" src="images/marsrover_sml.jpg" width="104" /></td>

<script language="JavaScript1.1">
function newchange()
{
document.text.innerHTML='<b>hello world</b>'
}
</script>

<td class="style5" Id="text" name="text" style="height: 29px; width: 525px" valign="top">
<strong class="style10">Endavour has launched</strong></td>

// SpryDOMEffects.js - version 0.6 - Spry Pre-Release 1.7
//
// Copyright (c) 2007. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

(function() { // BeginSpryComponent
 
if (typeof Spry == "undefined" || !Spry.Utils || !Spry.$$)
{
 alert("SpryDOMEffects.js requires SpryDOMUtils.js");
 return;
}

if (!Spry.Effect) Spry.Effect = {};

Spry.Effect.Animator = function(opts)
{
 Spry.Effect.Animator.Notifier.call(this);

 this.animatorID = Spry.Effect.Animator.nextID++;
 this.dropFrames = true;
 this.fps = 60; // frames per-second
 this.duration = 500; // msecs
 this.timer = 0;
 this.startTime = 0; // Used only when dropFrames is true.
 this.currentFrame = 0;
 this.easeFunc = Spry.Effect.Animator.defaultEaseFunc;
 this.stopped = false;

 Spry.Effect.Animator.copyProps(this, opts);

 this.interval = 1000 / this.fps;
 this.numFrames = (this.duration / 1000) * this.fps;

 if (this.onComplete)
 {
  var self = this;
  this.addObserver({ onAnimationComplete: function(){ self.onComplete(); } });
 }
};

Spry.Effect.Animator.nextID = 1;

Spry.Effect.Animator.copyProps = function(dst, src)
{
 if (src)
 {
  for (prop in src)
   dst[prop] = src[prop];
 }
 return dst;
};

Spry.Effect.Animator.getElement = function(element)
{
 if (arguments.length > 1)
 {
  for (var i = 0, elements = [], length = arguments.length; i < length; i++)
   elements.push(Spry.Effect.Animator.getElement(arguments[i]));
  return elements;
 }
 if (typeof element == 'string')
  element = document.getElementById(element);
 return element;
};

Spry.Effect.Animator.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Effect.Animator.Notifier = function()
{
 this.observers = [];
 this.suppressNotifications = 0;
};

Spry.Effect.Animator.Notifier.prototype.addObserver = function(observer)
{
 if (!observer)
  return;

 // Make sure the observer isn't already on the list.

 var len = this.observers.length;
 for (var i = 0; i < len; i++)
 {
  if (this.observers[i] == observer)
   return;
 }
 this.observers[len] = observer;
};

Spry.Effect.Animator.Notifier.prototype.removeObserver = function(observer)
{
 if (!observer)
  return;

 for (var i = 0; i < this.observers.length; i++)
 {
  if (this.observers[i] == observer)
  {
   this.observers.splice(i, 1);
   break;
  }
 }
};

Spry.Effect.Animator.Notifier.prototype.notifyObservers = function(methodName, data)
{
 if (!methodName)
  return;

 if (!this.suppressNotifications)
 {
  var len = this.observers.length;
  for (var i = 0; i < len; i++)
  {
   var obs = this.observers[i];
   if (obs)
   {
    if (typeof obs == "function")
     obs(methodName, this, data);
    else if (obs[methodName])
     obs[methodName](this, data);
   }
  }
 }
};

Spry.Effect.Animator.Notifier.prototype.enableNotifications = function()
{
 if (--this.suppressNotifications < 0)
 {
  this.suppressNotifications = 0;
  Spry.Debug.reportError("Unbalanced enableNotifications() call!\n");
 }
};

Spry.Effect.Animator.Notifier.prototype.disableNotifications = function()
{
 ++this.suppressNotifications;
};

Spry.Effect.Animator.prototype = new Spry.Effect.Animator.Notifier;
Spry.Effect.Animator.prototype.constructor = Spry.Effect.Animator;

Spry.Effect.Animator.prototype.start = function()
{
 this.stopped = false;
 this.currentFrame = 0;
 this.startTime = (new Date()).getTime();

 this.notifyObservers("onAnimationStart");

 var self = this;
 this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
};

Spry.Effect.Animator.prototype.stop = function()
{
 if (this.timer)
  clearTimeout(this.timer);
 this.timer = 0;
 this.stopped = true;

 this.notifyObservers("onAnimationStopped");
};

Spry.Effect.Animator.prototype.onStepAnimation = function()
{
 var obj = {};

 if (this.dropFrames)
 {
  obj.duration = this.duration;
  obj.elapsed = ((new Date).getTime()) - this.startTime;
  if (obj.elapsed > obj.duration)
   obj.elapsed = obj.duration;
 }
 else
 {
  obj.duration = this.numFrames;
  obj.elapsed = ++this.currentFrame;
 }

 obj.easingConst = this.easeFunc(obj.elapsed, 0, 1, obj.duration)

 this.notifyObservers("onPreDraw", obj);
 this.draw(obj.elapsed, obj.duration, obj.easingConst);
 this.notifyObservers("onPostDraw", obj);

 if (!this.stopped)
 {
  if (obj.elapsed < obj.duration)
  {
   var self = this;
   this.timer = setTimeout(function(){ self.onStepAnimation(); }, this.interval);
  }
  else
  {
   this.stop();
   this.notifyObservers("onAnimationComplete");
  }
 }
};

Spry.Effect.Animator.prototype.draw = function(elapsed, duration, easingConst)
{
 // The default draw method does nothing. It is assumed that
 // derived classes will provide their own implementation of this
 // method.

 debug.log("elapsed: " + elapsed + " -- duration: " + duration + " -- easingConst: " + easingConst);
};


///////////////////////////////////////////////////////////////////////////////

Spry.Effect.CSSAnimator = function(elements, styleStr, opts)
{
 this.animationSets = [];

 Spry.Effect.Animator.call(this, opts);

 this.add(elements, styleStr);
};

Spry.Effect.CSSAnimator.prototype = new Spry.Effect.Animator();
Spry.Effect.CSSAnimator.prototype.constructor = Spry.Effect.CSSAnimator;

Spry.Effect.CSSAnimator.prototype.add = function(elements, styleStr)
{
 // The first argument for the CSSAnimator can be
 // the id of an element, an element node, or an array of
 // elements and/or ids.

 elements = Spry.$$(elements);

 if (elements.length < 1)
  return;

 var animSet = { elements: elements, cssProps: []};

 this.animationSets.push(animSet);

 // Convert the styleStr into an object.

 var toObj = Spry.Utils.styleStringToObject(styleStr);
 for (var p in toObj)
 {
  var obj = new Object;
  var v = toObj[p];
  obj.value = new Number(v.replace(/[^-\d\.]+/g, ""));
  obj.units = v.replace(/[-\d+\.]/g, "");
  toObj[p] = obj;
 }

 for (var i = 0; i < elements.length; i++)
 {
  var obj = animSet.cssProps[i] = new Object;
  for (var p in toObj)
  {
   var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
   if (!pFuncs)
    pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];

   obj[p] = new Object;
   obj[p].from = new Number(pFuncs.get(elements[i], p).replace(/[^-\d\.]+/g, ""));
   obj[p].to = toObj[p].value;
   obj[p].distance = obj[p].to - obj[p].from;
   obj[p].units = toObj[p].units;
  }
 }
};

Spry.Effect.CSSAnimator.prototype.start = function()
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
 
   var eleProps = ele.spryCSSAnimatorProps;
   if (!eleProps)
    eleProps = ele.spryCSSAnimatorProps = new Object;
 
   var obj = cssProps[i];
   for (var p in obj)
    eleProps[p] = this.animatorID;
  }
 }

 return Spry.Effect.Animator.prototype.start.call(this);
};

Spry.Effect.CSSAnimator.prototype.stop = function()
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
   var obj = cssProps[i];
 
   var eleProps = ele.spryCSSAnimatorProps;
   for (var p in obj)
   {
    if (eleProps[p] == this.animatorID)
     delete eleProps[p];
   }
  }
 }

 return Spry.Effect.Animator.prototype.stop.call(this);
};

Spry.Effect.CSSAnimator.prototype.draw = function(elapsed, duration, easingConst)
{
 for (var s = 0; s < this.animationSets.length; s++)
 {
  var animSet = this.animationSets[s];
  var elements = animSet.elements;
  var cssProps = animSet.cssProps;

  for (var i = 0; i < elements.length; i++)
  {
   var ele = elements[i];
   var eleProps = ele.spryCSSAnimatorProps;
   var obj = cssProps[i];
   for (var p in obj)
   {
    if (eleProps[p] == this.animatorID)
    {
     var pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs[p];
     if (!pFuncs)
      pFuncs = Spry.Effect.CSSAnimator.stylePropFuncs["default"];
 
     if (elapsed > duration)
      pFuncs.set(ele, p, obj[p].to + obj[p].units);
     else
      pFuncs.set(ele, p, obj[p].from + (obj[p].distance * easingConst) + obj[p].units);
    }
   }
  }
 }
};

Spry.Effect.CSSAnimator.stylePropFuncs = {};

Spry.Effect.CSSAnimator.stylePropFuncs["default"] = {
 get: function(ele, prop)
 {
  return ele.style[prop];
 },

 set: function(ele, prop, val)
 {
  ele.style[prop] = val;
 }
};

Spry.Effect.CSSAnimator.stylePropFuncs["opacity"] = {
 get: function(ele, prop)
 {
  var val = 1;
  
  if (ele.style.opacity)
   val = ele.style.opacity;
  else if (ele.style.filter)
  {
   var strVal = ele.style.filter.replace(/.*alpha\(opacity=(\d+)\).*/, "$1");
   if (strVal)
    val = parseInt(strVal) / 100;
  }
  return val + "";
 },

 set: function(ele, prop, val)
 {
  ele.style.opacity = "" + val;
  ele.style.filter = "alpha(opacity=" + (val * 100) + ")";
 }
};

///////////////////////////////////////////////////////////////////////////////

Spry.$$.Results.defaultEaseFunc = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.$$.Results.animatePropertyTo = function(propName, to, options)
{
 var opts = { interval: 10, duration: 1000, onComplete: null, transition: Spry.$$.Results.defaultEaseFunc };
 Spry.Effect.Animator.copyProps(opts, options);

 var objs = [];
 for (var i = 0; i < this.length; i++)
 {
  var obj = objs[i] = new Object;
  obj.ele = this[i];
  obj.from = obj.ele[propName];
  obj.distance = to - obj.from;
 }

 var startTime = (new Date).getTime();

 var animateFunc = function()
 {
  var elapsedTime = ((new Date).getTime()) - startTime;

  if (elapsedTime > opts.duration)
  {
   for (var i = 0; i < objs.length; i++)
    objs[i].ele[propName] = to;
   if (opts.onComplete)
    opts.onComplete();
  }
  else
  {
   for (var i = 0; i < objs.length; i++)
   {
    var obj = objs[i];
    obj.ele[propName] = opts.transition(elapsedTime, obj.from, obj.distance, opts.duration);
   }
   setTimeout(animateFunc, opts.interval);
  }
 };

 setTimeout(animateFunc, opts.interval);
 return this;
};

Spry.$$.Results.animateStyleTo = function(styleStr, options)
{
 var a = new Spry.Effect.CSSAnimator(this, styleStr, options);
 a.start();
 return this;
};

})(); // EndSpryComponent

<SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="http://www.clearnonsense.com/images/arrow1.png"

second=new Image
second.src="http://www.clearnonsense.com/images/arrow2.png"
// --></SCRIPT>
</HEAD>

<table border="0">
<tr>
<td>
<a href="javascript:void(0)" OnMouseOut="monitor.src=first.src" OnMouseOver="monitor.src=second.src" onMouseUp="clickdown('pic1')"><img src="http://www.clearnonsense.com/images/arrow1.png" border="0" name="monitor" onclick="showhide('div1',this,'http://www.clearnonsense.com/images/arrow1.png','http://www.clearnonsense.com/images/arrow3.png');"/></a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<div id="div1" style="display: none;">imgset1</div>
</td>
</tr>
</table>

<script language="javascript">
//script found on www.a1javascripts.com
//all credit to unknown author
<!-- hide script from old browsers
window.onerror = null;
var netscape = 0;
var goodIE = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ netscape = 1; }
if (browserName == "Microsof" && browserVer >= 4)
{ goodIE = 1; }
// end error trapping code
if (netscape || goodIE) {
pic1 = new Image(150,100);
pic1.src = "enso.jpg";
pic2 = new Image(150,100);
pic2.src = "shine.jpg";
pic3 = new Image(150,100);
pic3.src = "samsara.jpg";
pic4 = new Image(150,100);
pic4.src = "samsara.jpg";
a1 = new Image(300,200); a1.src = "personal1.jpg"; a2 = new Image(300,200);
a2.src = "personal2.jpg";
b1 = new Image(325,225); b1.src = "spiritual1.jpg";
b2 = new Image(325,225); b2.src = "spiritual2.jpg";
c1 = new Image(325,225); c1.src = "eyeent1.jpg"; c2 = new Image(300,200);
c2.src = "eyeent2.jpg";
}
function hiLite(imgDocID, imgObjName, imgDocID2, imgObjName2, imgDocID3, imgDocID3) {
if (netscape || goodIE) {
document.images[imgDocID].src = eval(imgObjName + ".src");
document.images[imgDocID2].src = eval(imgObjName2 + ".src");
document.images[imgDocID3].src = eval(imgObjName3 + ".src");
}}
//end hiding -->
  </script>

<img alt="Default Image" name="pic" src="default.gif"
 height="100" width="150" /><br />
<a onclick="window.focus()"
 onmouseout="hiLite('pic','pic1','a','a1'); window.status='';return true;"
 onmouseover="hiLite('pic','pic2','a','a2'); window.status='Button 1';return true;"
 href="your-page.html"><img alt="Button 1" name="a"
 src="upbutton1.gif"
 style="border: 0px solid ; width: 325px; height: 225px;" /></a><br />
<a onclick="window.focus()"
 onmouseout="hiLite('pic','pic1','b','b1'); window.status='';return true;"
 onmouseover="hiLite('pic','pic3','b','b2'); window.status='Button 2';return true;"
 href="your-page.html"><img alt="Button 2" name="b"
 src="upbutton2.gif"
 style="border: 0px solid ; width: 325px; height: 225px;" /></a>
<a onclick="window.focus()"
 onmouseout="hiLite('pic','pic1','c','c1'); window.status='';return true;"
 onmouseover="hiLite('pic','pic4','c','c2'); window.status='Button 3';return true;"
 href="your-page.html"><img alt="Button 3" name="c"
 src="upbutton3.gif"
 style="border: 0px solid ; width: 325px; height: 225px;" /></a>