Javascript that will "roll up" a div

I wasn't thinking of that because I was so focused on the dynamic effect, and I'm enough of a neophyte that I would have forgotten how to construct that line of code. Thanks. Now how do I invoke that code with a button click? iIn particular the "See It" button.

Regarding the shrinking, I'm looking for something like what happens on http://www.cowboom.com when you click on Store and Auction at the bottom of the page.  Is that a cookie cutter script that I can get at jquery or scriptaculous?  Or is it something completely different than what I'm trying to do?

Meanwhile I'll cjheck out your link.

Thanks,

John

Wow, I just amazed myself by being able to figure out the button thing ... sort of.  I got some code at w3schools and expanded on it and I have a form button (with my button background image) that toggles quite nicely. Other than the shrinking effect which isn't really essential here, I need two more elements to make it perfect:
1) how do I make the background image of the button change upon mouseover?
2) how do I create a link to "www.mysite.com"? (I tried adding onclick="<a href="http://www.mysite.com"></a>" to the input line but of course that didn't work.)

CODE SO FAR:
<script>
function HideDiv()
{
document.getElementById("block2").style.visibility="hidden";
}
function ShowDiv()
{
document.getElementById("block2").style.visibility="visible";
}
</script>

HTML:
<div class="SeeIt" >
<form >
<input type="button" style="width:100px; height:30px; background:#000; border:none; background-image:url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)" onmouseover="HideDiv()" onmouseout="ShowDiv()"
value="" />
</form>
</div>

Thanks!

John

1)
<a href="link.htm" onMouseOver="document.form_name.button_name.background='red.gif'" onMouseOut="document.form_name.button_name.background='green.gif'"><INPUT type="button"></a>

does the above answer (2) as well?  You just put a link around the button, and when you click it, it loads another page.  Perhaps the button code is the key here --

<BUTTON name="link" type="button" value="" style="font-size:11px" onMouseOver="changeBG(); onClick="changeLink();">Click for Link</BUTTON>

You can use the onClick to change the link, or you can wrap a link around the button, either way should work.

Looks good but I'm unsure as to what goes where.  Could you rewrite my entire HTML snippet with your new code placed where it should go? I'l spend hours and not get it right.

Thanks,

John

Well, you will have to test this and check for errors, a little real-time debugging, but here goes in code below.  Remember, you have to NAME or ID your FORM and INPUT buttons for this to work, and give the correct URL for the other BG image.  If not working immediately check the syntax.  Here is the general --

document.form_name.input_name.style.background-image = "url('greyWhite.jpg')";

so you might need the single quotes around the link name too.

function changeBG() {   document.form1.button1.style.background-image=url(http://www.discretedata.com/A1/Dino/images/SeeItDown.png)"
}
 
function restoreBG() {   document.form1.button1.style.background-image="url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)"
}
 
<FORM name="form1">
<input type="button" name="button1" style="width:100px; height:30px; background:#000; border:none; background-image:url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)" onmouseover="HideDiv(); changeBG();" onmouseout="ShowDiv(); restoreBG();"
value="" />
</FORM>

Select allOpen in new window

I can't get it to work.  When I add your two new functions, I don't get the background image change, and it doesn't hide the div either. Please take a look at the file (http://www.discretedata.com/A1/Dino/LinkAndChangeBtnImg.html ), and fix the script and/or the form.

As always, I really need you to give me the complete form code from top to bottom or i will probably continue to not get it.

Thanks,
John

This what I have for the button HTML:

<div class="SeeIt" >
<form >
<input type="button" style="width:100px; height:30px; background:#000000; border:#000000; background-image:url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)" onmouseover="HideDiv(); changeBG();" onmouseout="ShowDiv(); restoreBG();" onclick="<a href="https://www.experts-exchange.com"></a>"
value="" />
</form>
</div>

And here are the scripts:

<script>
function HideDiv()
{
document.getElementById("block2").style.visibility="hidden";
}
function ShowDiv()
{
document.getElementById("block2").style.visibility="visible";
}
function changeBG()
{  
document.form1.button1.style.background-image=url(http://www.discretedata.com/A1/Dino/images/SeeItOver.png)"
}
function restoreBG()
{  
document.form1.button1.style.background-image="url(http://www.discretedata.com/A1/Dino/images/SeeItUp.png)"
}
</script>

Since you really answered my question with your first post, I'm going to award you the points here now.  Please got to this new question to answer the other 2 parts.

https://www.experts-exchange.com/questions/23802340/Java-enabled-button-that-will-produce-3-behaviors.html

Just remember to re-post the entire section of code from top to bottom.

Thanks,

John