I Need Help Changing A Submit Button Image to Another Image When The Mouse Hovers Over It

Question

I am trying to figure out how to make my submit button image change to another image when the cursor hovers over it. Here's my code so far:

<!DOCTYPE>
<html>

<body>

<form>
<font face="Arial">Please type your name below and click submit.</font>
<br />
<input type="text">
<p>
<input type="image" src="..\Pictures\submit_button_img.jpg" alt="submit" >
</p>
</form>

</body>

</html>

This code works, I just don't know how to switch the image when the cursor hovers over it. Any suggestions? I'd like it to be in CSS or JavaScript, please.

possible duplicate of [How to change an input button image using CSS?](http://stackoverflow.com/questions/195632/how-to-change-an-input-button-image-using-css) — Austin, Jan 08 '14 at 19:09

jmore009 · Answer 1 · 2014-01-08T19:22:22.740

4

use

<input type="submit" class="somename">

and add a class name that has the image set as a background-image and then use CSS :hover to change that image. No Javascript needed

  input[type=submit]{
    width: 100px;
    height: 20px;
    background-image: url("someimage.jpg");
    background-repeat: no-repeat;
    border: none;
    text-indent: -9999px;
  }

  input[type=submit]:hover{
    background-image: url("someimage2.jpg");
 }

You can target the submit button or you can add a class name, either way. You can also use a sprite and change the background-position on hover instead of swapping image files

quick example: JSFIDDLE

edited Jan 08 '14 at 19:22

answered Jan 08 '14 at 19:01

jmore009

12,863
1
19
34

That's not really an option, the submit button won't magically turn into an image, like the image input type ? – adeneo Jan 08 '14 at 19:05
what? How is that not an option, that's how it's done – jmore009 Jan 08 '14 at 19:10
Sure, show me a working fiddle and I'll believe you – adeneo Jan 08 '14 at 19:12
haha well 4 people upvoted this so im pretty sure im not making it up. check out the code above, that's how it's done. Ill add a fiddle though – jmore009 Jan 08 '14 at 19:15
Please do, and note that the OP is using ` – adeneo Jan 08 '14 at 19:15
@adeneo http://jsfiddle.net/zero298/SnVhF/ – zero298 Jan 08 '14 at 19:16
im aware of the OP, that's not the proper way to do it – jmore009 Jan 08 '14 at 19:16
@zero298 - now you've completely changed a button to look like an image, which has issues of it's own. – adeneo Jan 08 '14 at 19:17
@adeneo What are you talking about? It's a `button` it does everything a button does but instead of text, it has an image. – zero298 Jan 08 '14 at 19:18
@adeneo here is a quick example: [jsfiddle](http://jsfiddle.net/4eb77/) – jmore009 Jan 08 '14 at 19:19
That's great, but the OP is actually using the correct tag, an input with the type of image to show an image as a submit button, that's why it was implented, as buttons generally should be styled as buttons, and in older browsers you couldn't even do this, and you've just changed an input with a type of button to an image with a lot of styling, to get what the OP has without having to do much of anything, doesn't make any sense to me ? – adeneo Jan 08 '14 at 19:22
@adeneo: I'm trying everything that you've been talking about, even the jsfiddle stuff, but it's not working. – xNirdx Jan 08 '14 at 19:29
@user3174656 adeneo hasn't posted an answer, this is my response, what isn't working? – jmore009 Jan 08 '14 at 19:30
@jmore: Oh, sorry. I'm trying everyone's answers, but none of them seem to be working. – xNirdx Jan 08 '14 at 19:30
@user3174656 im using `input type="submit"` you're using `input type="image"`, im suggesting you change the input type to `submit` then try my code – jmore009 Jan 08 '14 at 19:31
@jmore009: I tried that. – xNirdx Jan 08 '14 at 19:32
@user3174656 do you have a link? – jmore009 Jan 08 '14 at 19:32
@jmore009 A link to what? – xNirdx Jan 08 '14 at 19:36
@jmore009 I got it to work. Thanks anyways, though. I appreciate it. :) – xNirdx Jan 08 '14 at 19:38

score 1 · Answer 2 · answered Jan 08 '14 at 19:10

1

Ideally, you should use a sprite. It's a great way to do rollovers without that "flash of emptiness" before the second image loads.

First, create your sprite. It should be one image that looks like this:

+---------------+
| Normal button |
+---------------+
+---------------+
| Hover  button |
+---------------+

Note that the two "parts" should be the same size as each other, and this will be the size of your button. Save this, for example as btn_sheet.png

Now you need to prepare your input:

<input type="image" class="btnimage" />

And now for the CSS that makes it all work:

.btnimage {
    width: 100px; /* replace with actual width your button */
    height: 50px; /* replace with actual height of the button */
    background:url('/btn_sheet.png'); /* adjust path as needed */
}
.btnimage:hover {
    background-position: 0 -50px;
    /* replace the 50px with the actual height of the button */
}

And done!

answered Jan 08 '14 at 19:10

Niet the Dark Absol

320,036
81
464
592

awesome, it works, but on the second image that it switches to, it has the submit button text on it. any way to remove it? – xNirdx Jan 08 '14 at 19:41
Hmm... try adding `value=""` to the HTML? – Niet the Dark Absol Jan 08 '14 at 19:41
yup, that's exactly what i did, to be honest. – xNirdx Jan 08 '14 at 19:42
Haha! Well, glad you figured it out :) – Niet the Dark Absol Jan 08 '14 at 19:43
well, it was... not sure why it stopped working lol – xNirdx Jan 08 '14 at 22:16
i've tried a bunch of stuff and still can't get it – xNirdx Jan 08 '14 at 22:37

I Need Help Changing A Submit Button Image to Another Image When The Mouse Hovers Over It

2 Answers2