Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Dynamic submit-button?

Posted on 1997-04-07
4
Medium Priority
?
269 Views
Last Modified: 2012-05-04
I want to create dynamic buttons, i.e. buttons that look
like being pressed when the mouse moves over them and return
to normal (unpressed) state when the mouse moves out.
I use onMouseOver and onMouseOut.
The code looks like this:
<html>
  <head>
  <title>Dynamic Buttons - Test</title>
  <script language="JavaScript">
  <!--
  ima1 = new Image();
  ima1.src = "button.gif";   /* normal button */
  hima1 = new Image();
  hima1.src = "button_b.gif";  /* pressed button */

  function ImageOver(Index,NewIma)
  {
   window.document.images[Index].src = NewIma.src;
  }

   //-->
   </script>
   </head>
  <body>
...
  <a href="anywhere.htm" onMouseOver="ImageOver(1,hima1)" onMouseOut="ImageOver(1,ima1)">
  <img src="button.gif" border="0"></a>
...

This works fine if the buttons are just links to other
HTML-pages.
But I want to create a dynamic submit-button.
I tried something like this:

<form>
...
<input type="image" src="button.gif"
    onMouseOver="ImageOver(1,hima1)" onMouseOut="ImageOver(1,ima1)">
</form> ...

But it doesn't work.
Does anybody know what I can do to get dynamic submit
buttons?
0
Comment
Question by:steffi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 1

Accepted Solution

by:
moorep earned 160 total points
ID: 1265178
You are right. You cannot make them dynamic in a form.
You would create the images as normal <A HREF...>
with the submit button doing this:
<A HREF="javascript:form_submit()" onMouseover.... onMouseout...>
This will work. Same for the reset button too.
function form_submit()      {
      document.MyForm.submit();
// end of function
}

function form_clear() {
          // This will only work for NN 3.x and above
            document.MyForm.reset();
      }
Now i also noticed a bug in NN3.x in that if you do a "go back" to the form, the name of the form, in this case MyForm, will be lost. You should replace it with document.forms[0].submit();
where forms[0] represents the first form declared on the page.
0
 
LVL 1

Expert Comment

by:moorep
ID: 1265180
I know a way to create a dynamic submit button so it is possible, but unfortunately I can't answer your question while you are evaluating another.
0
 
LVL 1

Expert Comment

by:jjung
ID: 1265181
there are no mouseover mouseout events on form inputs, buttons or otherwise. This is the question she has asked and i have answered it correctly.
I can create dynamic buttons til the cows come home too.
0
 
LVL 1

Expert Comment

by:moorep
ID: 1265182
Note that submit() will not work with forms that have:
ACTION=mailto:johndoe@domain.com
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question