PDA

View Full Version : change slide up button to slide up image

Homer
01-08-2003, 02:09 PM
I have found this neat little script where the button slides up out of the way on rollover to reveal a text box. Is it possible to replace the button with an image so that the image slides up to reveal an underlying text box or other image. Here is the script:

<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--

var i=1;
var over=false;

function hide(){
if(i<7){
document.all.wsbut.style.top=20-(i*4);
document.all.wsbut.style.clip="rect("+(i*4)+",120,24,0)";
// top, right, bottom, left
i++;
setTimeout("hide()",100);
}
else {
window.focus();
document.all.wstext.focus();
i=0;
}
}

function show(){
if(i<6){
document.all.wsbut.style.top=i*4;
document.all.wsbut.style.clip="rect("+(20-(i*4))+",120,24,0)";
// top, right, bottom, left
i++;
setTimeout("show()",100);
}
else {
i=0;
if(over) hide();
}
}

//-->
</SCRIPT>

</head>

<body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<DIV STYLE="position:absolute; top:10; left: 10" onMouseover="over=true" onMouseout="over=false">
<INPUT TYPE=TEXT CLASS="websearch" ID="wstext" onBlur="show()">

<INPUT TYPE=BUTTON CLASS="websearch" ID="wsbut" VALUE="Websearch" onMouseover="if(i<2) hide()">
</DIV>

<BR>

</BODY>

Any help appreciated

Regards

Homer
Mr J
01-08-2003, 03:13 PM
Try the following



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var i=1;
var over=false;

function hide(){
if(i<7){
document.all.wsbut.style.top=10-(i*4);
document.all.wsbut.style.clip="rect("+(i*4)+",200,20,0)";
// top, right, bottom, left
i++;
setTimeout("hide()",100);
}
else {
window.focus();
document.all.wstext.focus();
i=0;
}
}

function show(){
if(i<4){
document.all.wsbut.style.pixelTop=i*4;
document.all.wsbut.style.clip="rect("+(10-(i*4))+",200,20,0)";
// top, right, bottom, left
i++;
setTimeout("show()",100);
}
else {
i=0;
if(over)
hide();
}
}

//-->
</SCRIPT>
</HEAD>
<body>
<form>
<INPUT TYPE=TEXT ID="wstext" value="Peek a Boo" onBlur="show()" STYLE="position:absolute; top:10; left:10; width:200" onMouseover="over=true" onMouseout="over=false">
<img src="pic1.jpg" ID="wsbut" onMouseover="if(i<2) hide()" STYLE="position:absolute; top:10; left:10; width:200; height:20">
</form>
</BODY>
</HTML>
Homer
01-09-2003, 09:02 AM
Great!

Just what I wanted to know, everything works fine thanks for the help.

Regards

Homer