title: using php and java script in a form
body: <p>I am a little bit lost. What I want to achieve is:</p>
  
  <ul>
  <li>my own custom button</li>
  <li>change onMouseOver etc'</li>
  <li>keep it's size </li>
  <li>post the information to a php server side code</li>
  </ul>
  
  <p><strong>What I'm missing is:</strong></p>
  
  <ul>
  <li>The post - I couldn't figure out how to combine js &amp; php</li>
  <li>The Button size - my code sets a size for the original button but after the rollover it changes</li>
  </ul>
  
  <p><strong>The code:</strong></p>
  
  <pre><code>&lt;html&gt;  
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;script&gt;
          function form_on_click(frm) 
          {
              document.buttonMore.src='bottom_more_click.JPG';
              frm.submit();
          }
      &lt;/script&gt; 
  
      &lt;div style="position: absolute; left: 120px; top: 90px; background-image: url(myBackgroundPicture.jpg);
      background-repeat:no-repeat; width: 800px; height: 280px; padding: 15px;"&gt;
  
          &lt;form method="post" action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;"&gt;            
              &lt;input type="text" name="whatever" size= "55" height="100" lang="en" dir="ltr"  style="margin-top: 188px; margin-left: 95px; height: 20px; background-color: transparent; border:none;
              color: #FFFFFF; font-family: Verdana; font-weight: none; font-size: 18px;"&gt;
  
              &lt;a onmouseover="document.buttonMore.src='bottom_more_hover.JPG'"
              onmouseout="document.buttonMore.src='bottom_more_reg.JPG'" 
              onmousedown= "form_on_click(this.form) this.form.submit()"
              onmouseup="document.buttonMore.src='bottom_more_hover.JPG'"&gt;
  
              &lt;img src="bottom_more_reg.jpg" name="buttonMore" height="30" width="173" border="0" alt="MORE!" style="margin-bottom:-10px; margin-left: 15px; height: 30px; width: 100px;"&gt;
  
  
              &lt;/a&gt;
          &lt;/form&gt;
  
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>