I am a little bit lost. What I want to achieve is:
- my own custom button
- change onMouseOver etc'
- keep it's size
- post the information to a php server side code
What I'm missing is:
- The post - I couldn't figure out how to combine js & php
- The Button size - my code sets a size for the original button but after the rollover it changes
The code:
<html>
<head>
</head>
<body>
<script>
function form_on_click(frm)
{
document.buttonMore.src='bottom_more_click.JPG';
frm.submit();
}
</script>
<div style="position: absolute; left: 120px; top: 90px; background-image: url(myBackgroundPicture.jpg);
background-repeat:no-repeat; width: 800px; height: 280px; padding: 15px;">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<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;">
<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'">
<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;">
</a>
</form>
</div>
</body>