Mouse over effect help - HTML Forums

jm_eklund · 11-04-2009, 03:20 PM

I have the following code for a sign up form. I want the button to change when the mouse hovers over. Can someone help me? The button that I want it to change to is: sign_up_mouseover.png

<ul class="site-nav2">
<p> </p>
<FORM ACTION="https://app.expressemailmarketing.com/Survey.aspx?SFID=75036" METHOD="POST">
<div align="center"> <span class="style20"><FONT FACE="arial, helvetica">Sign up for our Mailing List
</FONT></span>
<BR>
<input type="TEXT" name="email" />
<BR>
<INPUT TYPE="IMAGE" SRC="images/sign_up.png" ALIGN="ABSMIDDLE" BORDER="0" />
<INPUT TYPE="HIDDEN" NAME="SkipSurvey" VALUE="FALSE" />
</div>
</FORM>
</ul>

Attached is what the form looks like now. You can see it at www.bigdogcattle.com

Thanks
Jamie

jackie11 · 11-04-2009, 04:11 PM

Could you use something like this in the head :

Code:

function roll_over(img_name, img_src)
   {
   document[img_name].src = img_src;
   }

And this in the body:

Code:

<A HREF="some.html" onmouseover="roll_over('but1', 'icon2.gif')"
onmouseout="roll_over('but1', 'icon1.gif')">
<IMG SRC="icon1.gif" WIDTH="100" HEIGHT="50"
NAME="but1" BORDER="0">
</A>

Replace the bold text with the names of your images. Maybe mess around with it abit and try to take out the A HREF part if possible

Jackie xx