Image as submit button

[richbell77]

I wonder if anyone could help with my latest zoom search question....

On the site http://www.thecommissionsharer.com I'd like the search to be generated by typing in the search box at the top and actioned by clicking the search.png.

I'm having trouble getting the search.png to 'become' the search button.

I've used the following html in the search fragment:
<form method="get" action="http://www.thecommissionsharer.com/search.php">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:none">
<input type="text" name="zoom_query" style="width:311px; border:0px solid; height:30px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:none">
<input.zoom_button { background: transparent url(search.png) no-repeat center top; }>
</td>
</tr>
</table>
</form>


I've also tried adding this html to the search.png itself:
input.zoom_button { background: transparent url(search.png) no-repeat center top; }

Perhaps unsurprisingly this doesnt work.. any pointers would be gratefully received! I've checked all the support and searched the forum for similar problems, but haven't managed to find an answer that got it to work for me.

Thanks
Rich

[David]

See this FAQ to start with
Q. How do I create search forms with images for buttons, etc.?

[richbell77]

That's what I was working off, but can't get it to work on my image for some reason. Any ideas why when looking at the code?

Thanks

[David]

You seems to have placed an image over the top of the form. So that it overlays the form.

This code,
<img src="wpimages/wped3c649d_06.png" width="160" height="49" border="0" id="search.png" alt="" onload="OnLoadPngFix()" style="position:absolute;left:780px;top:61px;".... .

So that when the user clicks on the form submit button, the click never reaches the form. Instead the click is intercepted by the image which sits on top of the form.

At least that is my guess after a quick look at your site.