How to implement customized <input type="reset" />?

Question

When onmouseover,it should look like

<input type="image" src="1.jpg" />

When onmouseout,it should look like

<input type="image" src="2.jpg" />

Answer 1

Add in your CSS the proper rules for :hover; It should work on everything but IE, which doesn't support hover in any element.

Answer 2

I don't know exactly what you're trying to do, but like Tordek, I would suggest using CSS and :hover

Here's the CSS:

.myButton{
  background:url("2.jpg") no-repeat;
  width: 200px;
  height: 100px;
  border: none;
}
.myButton:hover {
  background:url("1.jpg") no-repeat;
  width: 200px;
  height: 100px;
  border: none;
}

And here's the HTML:

<input type="submit" class="myButton" value="">

Answer 3

I would keep the <input type=reset> and using Javascript hide it, create an <a> element and style it as much as I please, attach an event handler on click to the anchor to trigger the reset, and use CSS :hover on the anchor so the background image changes. Users without Javascript will see the regular ole' reset button.

Answer 4

Don't worry about changing the presentation of the reset button itself, make it invisible. Make your own reset button, represented by a link with a hash for a href, and have it invoke the rest button when clicked:

<a href="#" class="resetPush">
  <span>Reset</span>
</a>

Coupled with the following javascript:

$("input[type='reset']").hide();
$("a.resetPush").click(function(e){
  e.preventDefault();
  $("input[type='reset']").trigger("click");
});

And as for the rollover effect of the link, css can handle that for you:

a.resetPush span { display:none; }
a.resetPush      { display:block; width:100px; height:25px;
                   background: url("slider.jpg") left top no-repeat; }
a.resetPush:hover{ background-position: left bottom; }

Answer 5

The <input type="image"> is merely meant to present some kind of a map wherein the end-user would be able to point specific locations in.

But you don't want to do that. You just want a button with a background image. I would thus suggest to replace it by an <input type="reset"> with a CSS background-image which is set to url(path/to/your/image.png). You can then add some Javascript (jQuery maybe? there's a hover function) which changes the CSS class on mouseover and mouseout. For example:

$("#buttonid").hover(
    function () {
        $(this).addClass('hover');
    }, 
    function () {
        $(this).removeClass('hover');
    }
);

with CSS

#buttonid {
    background: url(path/to/your/image.png);
}
#buttonid.hover {
    background-position: 20px; /* Make use of CSS sprites. */
}

(more about CSS sprites here)

Some would suggest to use the CSS :hover pseudoclass for this, but that doesn't work in all browsers on other elements than <a>.