Image as a submit button - asp.net-mvc

Question

I'm changing the buttons to images which are used for OAuth (see oauth2 tutorial).
I'm also grayscaling those images, and for this I use this code.
This is my _ExternalLoginsPartial.cshtml:
#{
var loginProviders = Context.GetOwinContext().Authentication.GetExternalAuthenticationTypes();
string action = Model.Action;
string returnUrl = Model.ReturnUrl;
using (Html.BeginForm(action, "Account", new { ReturnUrl = returnUrl }))
{
#Html.AntiForgeryToken()
foreach (AuthenticationDescription p in loginProviders)
{
<ul class="imglist" id="socialLogin">
#if (p.AuthenticationType == "Google")
{
<li><img src="/Content/google.png" /></li>
<li><img src="/Content/google.png" /></li>
<li><img src="/Content/google.png" /></li>
}
#if (p.AuthenticationType == "Microsoft")
{
<li><img src="/Content/outlook.jpg" /></li>
}
#if (p.AuthenticationType == "Facebook")
{
<li><img src="/Content/facebook.png" /></li>
}
</ul>
}
}
}
I can't remove the <a href="#"> because that will break the grayscaling.
And I can't place a button tag inside it, because that is bad HTML (compiler complains about it if done so).
So how can I turn these images to act like a submit button?
EDIT:
http://i61.tinypic.com/2ns7t00.png

Answer 1

You can replace the anchor element with a button element but you will have to change the code a little:
<button type="submit"><img src="..."></button>
Then change the selectors in the code:
$(window).load(function() {
$('button img').each(function() {
...
});
$(document).ready(function() {
$("button").hover(
...
);
});
If you want to get rid of the button styles, just use css:
button {
padding: 0;
border: none;
}

Answer 2

You could submit the form with Javascript by clicking on a link:
using (Html.BeginForm(action, "Account", new { ReturnUrl = returnUrl, id = "myId" }))
{
<a href="#" onclick="document.getElementById('myId').submit();">
<img src="/Content/facebook.png" />
</a>
}
This is just sample code for how you could add an id to the form and add a click event on the link.

Answer 3

You can do something like <input type="image" src="submit.gif"> which will submit your page within the form tag. An alternative would be to use jQuery and create a click event for the image.

Answer 4

As you specified in a response to another question, you wanted to return a value as well you could do this instead: (based off of Kevin's Answer)
using (Html.BeginForm(action, "Account", new { ReturnUrl = returnUrl, id = "myId" }))
{
<a href="#" onclick="document.getElementById('#p.AuthenticationType').click();">
<img src="/Content/facebook.png" />
</a>
<input name ="provider" type="submit" style="display:none;" id="#p.AuthenticationType" value="#p.AuthenticationType" />
}