PDA

View Full Version : Rollover Form Submit Button, Opens Pop-Up

jayboyd1
07-20-2002, 05:03 AM
I am trying to create a form with a rollover submit button and the resulting page should be a pop-up window. I am very close, please help.

Here is my code:

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Form Rollover Popup</title>
<csscriptdict import>
<script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>
</csscriptdict>
<csactiondict>
<script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
if (document.images) {
over_proof_buttons_02 = newImage(/*URL*/'images/buttons/proof-buttons_o_02.gif');
preloadFlag = true;
}
}

// --></script>
</csactiondict>
</head>

<body onload="preloadImages();" bgcolor="#ffffff">

<form action="proof.zoom.lasso" method="post" name="comment" target="PageName" onsubmit="window.open('about:blank','PageName','directories=0,height=180,width=250,location=0,menubar=0,resiza ble=1,scrollbars=AUTO,status=0,toolbar=0')" >

<input type="hidden" name="prof_name" value="Test">

<input type="hidden" name="prof_fdir" value="serve/_0000066/_0000085.jpg">

<a onmouseover="changeImages( /*CMP*/'proof_buttons_02',/*URL*/'images/buttons/proof-buttons_o_02.gif');return true" onmouseout="changeImages( /*CMP*/'proof_buttons_02',/*URL*/'images/buttons/proof-buttons_02.gif');return true" href="#">

<img src="images/buttons/proof-buttons_02.gif" alt="" name="proof_buttons_02" height="24" width="52" border="0">

</a>

</form>

</body>

</html>

This works as far as the rollover is concerned, but you can see the button is not setup as a "Submit" button so the form won't work.

If I change the <img src> tag to:

<input src="images/buttons/proof-buttons_02.gif" alt="" name="proof_buttons_02" height="24" width="52" border="0" type='image">

Then the form works as needed (with the popup window features) but the rollover no longer works.

Thanks in advance for your help.:)
boywonder
07-20-2002, 03:46 PM
try:

<img src="images/buttons/proof-buttons_02.gif" alt="" name="proof_buttons_02" height="24" width="52" border="0" onclick="document.comment.submit();">
jayboyd1
07-20-2002, 04:58 PM
Thanks, but, I just figured it out. I'm not sure I understand it, but it works (at least in IE 5.2, Ha!). i experimented moving code that I knew worked around in different places.

What worked was adding the onsubmit action that was inside the <form> tag to inside the <a> tag as well as the command to submit the form. Rollover works, Form Values Passed, and PopUp Window works as expected. Thanks, for your time.

Here it is. (cleaned up for others!)

<!---BEGIN Form with Rollover Submit Button and Popup Functionality -->

<form action="popup.reply.html" method="post" name="formname" target="PageName">

<input type="hidden" name="passedvalue1_name" value="passedvalue1">

<input type="hidden" name="passedvalue2_name" value="passedvalue2">

<a onmouseover="changeImages( /*CMP*/'button_up',/*URL*/'images/buttons/button_over.gif');return true" onmouseout="changeImages( /*CMP*/'button_up',/*URL*/'images/buttons/button_over.gif');return true" onClick="document.formname.submit(); window.open('about:blank','PageName','directories=0,height=450,width=600,location=0,menubar=0,resiza ble=1,scrollbars=AUTO,status=0,toolbar=0')" href="#">

<img src="images/buttons/button_up.gif" alt="" name="button_up" height="24" width="52" border="0">

</a>

</form>

<!---END Form with Rollover Submit Button and Popup Functionality -->