In the HTML below there is a function which makes onMouseOver a part of an image grow into the entire image. It works fine, but I don't know how I can let it shrink again until there is the original part of the image. Could anyone help? This is the HTML (see also: <!-- w --><a class="postlink" href="http://www.inspirationtraining.nl/imagegrow3.htm">www.inspirationtraining.nl/imagegrow3.htm</a><!-- w --> <http://www.inspirationtraining.nl/imagegrow3.htm> where you can see it working):
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<script language="JavaScript"><!--
<!--
function tmt_divSplitHorizOut(tl,dur,incr){
var nn4=(document.layers)?true:false;transNo=parseInt(16);arHidden=new Array(1,3,14,16);
var t=(document.getElementById)?tmt_findObj(tl):MM_findObj(tl);
if(document.all&&t){
t.style.filter="revealTrans(duration="+dur+",transition=16)";endState="hidden";
for(i=0;i<arHidden.length;i++){
if(arHidden==transNo){
endState="visible";t.style.visibility="hidden";
}
}
t.filters.revealTrans.apply();
t.style.visibility=endState;
t.filters.revealTrans.play();
return;
}
if(navigator.appName=='Netscape'&&t){
intval=100;
if(incr==0){
if(nn4){
t.origLeft=t.clip.left;t.origTop=t.Top=t.clip.top;t.origRight=t.clip.right;
t.origBottom=t.Bottom=t.clip.bottom;t.Height=t.clip.height;
}
else{
t.style.overflow='hidden';t.Top=0;t.Bottom=t.Height=t.offsetHeight;
}
mSecs=dur*1000;visits=(mSecs/intval);fullH=t.Height;halfH=fullH/2;
increment=halfH/visits;t.Top+=halfH;t.Bottom-=halfH;
if(nn4){
t.clip.top=t.Top;t.clip.bottom=t.Bottom;t.visibility="show";
}
else{
t.style.clip="rect("+t.Top+"px auto "+t.Bottom+"px auto)";
t.style.visibility='visible';
}
t.Top-=increment;t.Bottom+=increment;
if(nn4){
t.clip.top=t.Top;t.clip.bottom=t.Bottom;
}else{
t.style.clip="rect("+t.Top+"px auto "+t.Bottom+"px auto)";
}
}else{
t.Top-=increment;t.Bottom+=increment;
if(nn4){
t.clip.top=t.Top;t.clip.bottom=t.Bottom;
}
else{
t.style.clip="rect("+t.Top+"px auto "+t.Bottom+"px auto)";
}
}
if((t.Top-t.origTop)<=increment){
if(nn4){
t.clip.top=t.origTop;t.clip.bottom=t.origBottom;
}
else{
t.style.clip="rect(auto)";
}
}else{
setTimeout('tmt_divSplitHorizOut("'+tl+'",'+dur+','+increment+')',intval);
}
}
}
function tmt_findObj(n){
var x,t; if((n.indexOf("?"))>0&&parent.frames.length){t=n.split("?");
x=eval("parent.frames['"+t[1]+"'].document.getElementById('"+t[0]+"')");
}else{x=document.getElementById(n)}return x;
}
function MM_showHideLayers() { //v3.0A Modified by Al Sparber and Massimo Foti for NN6 Compatibility
var i,p,v,obj,args=MM_showHideLayers.arguments;if(document.getElementById){
for (i=0; i<(args.length-2); i+=3){ obj=tmt_findObj(args);v=args[i+2];
v=(v=='show')?'visible' v='hide')?'hidden':v;
if(obj)obj.style.visibility=v;}} else{
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible' v='hide')?'hidden':v; }
obj.visibility=v; }}
}
// -->
</script>
<style type="text/css"><!--
#layerbig { position: absolute; z-index: 3; top: 39px; left: 20px; width: 298px; height: 109px; visibility: hidden }
#layersmall { position: absolute; z-index: 2; top: 51px; left: 106px; width: 160px; height: 37px; visibility: visible }
body { background-color: #fff; position: absolute; z-index: 114; top: 176px; left: 201px; width: 112px; height: 20px; visibility: visible; scrollbar-3dlight-color: #FFFFFF;; scrollbar-arrow-color: #FFAC00;; scrollbar-darkshadow-color: #FFFFFF;; scrollbar-face-color: #FFFFFF;; scrollbar-highlight-color: #FFFFFF;; scrollbar-shadow-color: #F4C13E;; scrollbar-track-color: #FFFFFF; }-->
</style>
</head>
<body bgcolor="white" text="#4c5ea1" link="#4c5ea1" vlink="#f0a200" alink="#ff9900">
<div id="layersmall" onmouseover="tmt_divSplitHorizOut('layerbig','0.3','0')">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../plaatjes/afbeeldingweb/mieren.jpg" width="160" height="37" border="0"></div>
<div id="layerbig">
<img src="../plaatjes/afbeeldingwebgeheel/mieren.jpg" width="298" height="109" border="0"></div>
</body>
</html>
Kippie
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 4">
<script language="JavaScript"><!--
<!--
function tmt_divSplitHorizOut(tl,dur,incr){
var nn4=(document.layers)?true:false;transNo=parseInt(16);arHidden=new Array(1,3,14,16);
var t=(document.getElementById)?tmt_findObj(tl):MM_findObj(tl);
if(document.all&&t){
t.style.filter="revealTrans(duration="+dur+",transition=16)";endState="hidden";
for(i=0;i<arHidden.length;i++){
if(arHidden==transNo){
endState="visible";t.style.visibility="hidden";
}
}
t.filters.revealTrans.apply();
t.style.visibility=endState;
t.filters.revealTrans.play();
return;
}
if(navigator.appName=='Netscape'&&t){
intval=100;
if(incr==0){
if(nn4){
t.origLeft=t.clip.left;t.origTop=t.Top=t.clip.top;t.origRight=t.clip.right;
t.origBottom=t.Bottom=t.clip.bottom;t.Height=t.clip.height;
}
else{
t.style.overflow='hidden';t.Top=0;t.Bottom=t.Height=t.offsetHeight;
}
mSecs=dur*1000;visits=(mSecs/intval);fullH=t.Height;halfH=fullH/2;
increment=halfH/visits;t.Top+=halfH;t.Bottom-=halfH;
if(nn4){
t.clip.top=t.Top;t.clip.bottom=t.Bottom;t.visibility="show";
}
else{
t.style.clip="rect("+t.Top+"px auto "+t.Bottom+"px auto)";
t.style.visibility='visible';
}
t.Top-=increment;t.Bottom+=increment;
if(nn4){
t.clip.top=t.Top;t.clip.bottom=t.Bottom;
}else{
t.style.clip="rect("+t.Top+"px auto "+t.Bottom+"px auto)";
}
}else{
t.Top-=increment;t.Bottom+=increment;
if(nn4){
t.clip.top=t.Top;t.clip.bottom=t.Bottom;
}
else{
t.style.clip="rect("+t.Top+"px auto "+t.Bottom+"px auto)";
}
}
if((t.Top-t.origTop)<=increment){
if(nn4){
t.clip.top=t.origTop;t.clip.bottom=t.origBottom;
}
else{
t.style.clip="rect(auto)";
}
}else{
setTimeout('tmt_divSplitHorizOut("'+tl+'",'+dur+','+increment+')',intval);
}
}
}
function tmt_findObj(n){
var x,t; if((n.indexOf("?"))>0&&parent.frames.length){t=n.split("?");
x=eval("parent.frames['"+t[1]+"'].document.getElementById('"+t[0]+"')");
}else{x=document.getElementById(n)}return x;
}
function MM_showHideLayers() { //v3.0A Modified by Al Sparber and Massimo Foti for NN6 Compatibility
var i,p,v,obj,args=MM_showHideLayers.arguments;if(document.getElementById){
for (i=0; i<(args.length-2); i+=3){ obj=tmt_findObj(args);v=args[i+2];
v=(v=='show')?'visible' v='hide')?'hidden':v;
if(obj)obj.style.visibility=v;}} else{
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible' v='hide')?'hidden':v; }
obj.visibility=v; }}
}
// -->
</script>
<style type="text/css"><!--
#layerbig { position: absolute; z-index: 3; top: 39px; left: 20px; width: 298px; height: 109px; visibility: hidden }
#layersmall { position: absolute; z-index: 2; top: 51px; left: 106px; width: 160px; height: 37px; visibility: visible }
body { background-color: #fff; position: absolute; z-index: 114; top: 176px; left: 201px; width: 112px; height: 20px; visibility: visible; scrollbar-3dlight-color: #FFFFFF;; scrollbar-arrow-color: #FFAC00;; scrollbar-darkshadow-color: #FFFFFF;; scrollbar-face-color: #FFFFFF;; scrollbar-highlight-color: #FFFFFF;; scrollbar-shadow-color: #F4C13E;; scrollbar-track-color: #FFFFFF; }-->
</style>
</head>
<body bgcolor="white" text="#4c5ea1" link="#4c5ea1" vlink="#f0a200" alink="#ff9900">
<div id="layersmall" onmouseover="tmt_divSplitHorizOut('layerbig','0.3','0')">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"../plaatjes/afbeeldingweb/mieren.jpg" width="160" height="37" border="0"></div>
<div id="layerbig">
<img src="../plaatjes/afbeeldingwebgeheel/mieren.jpg" width="298" height="109" border="0"></div>
</body>
</html>
Kippie