ansaurus

Question

background image for input type="button"

Answer 1

A:

If this is a submit button, use <input type="image" src="..." ... />.

http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_IMAGE.html

If you want to specify the image with CSS, you'll have to use type="submit".

Greg K 2010-04-29 16:21:12

will the 'onclick' work on input="image"?

fuz3d 2010-04-29 16:25:09

Type `image` and `submit` both act as submit so you can catch the submit event via the `form` tag attribute `onSubmit`. http://msdn.microsoft.com/en-us/library/ms536972(VS.85).aspx

Greg K 2010-04-29 16:28:28

If you look at my code that I tested and is working, `input type="button"` and `input type="image"` can be styled using css. He just used the wrong property.

Jonathan Czitkovics 2010-04-29 16:31:47

the problem is, when i use `type="submit"` the form reloads but displays no results; but when i use `type="button"`, the results are displayed. the data is being generated via ajax on the click of the button, and the form doesn't have any handler called 'onsubmit'.

fuz3d 2010-04-29 16:40:57

If you're loading via AJAX, then you'd move the call to the `onSubmit` event, otherwise you're calling (I presume) via `onClick` and the form is being submitted as well.

Greg K 2010-04-30 09:28:07

Answer 2

+1 A:

You need to type it without the word image.

background: url('/image/btn.png') no-repeat;

Tested both ways and this one works.

Example:

<html>
    <head>
        <style type="text/css">
            .button
            {
            background: url(/image/btn.png) no-repeat;
            cursor:pointer;
                        border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>

Jonathan Czitkovics 2010-04-29 16:26:02

funny. it doesn't work for me. the firebug console only shows this: `.button {cursor:pointer;}`

fuz3d 2010-04-29 16:38:59

Did you try to copy and paste the whats in the code box into an html file to see if that works for you? Also try using quotes around the path or remove the first `/`.

Jonathan Czitkovics 2010-04-29 16:41:25

k, it works now [the type="button" one that is]! thanks. i wonder what was wrong with the external css. the only thing now is that it shows the image as the background of the button with the borders. how can i just show the image, without it looking like a button?

fuz3d 2010-04-29 16:46:43

The code for that is just like any old div or table tag. `border: none;`

Jonathan Czitkovics 2010-04-29 16:50:47

thank you very much.

fuz3d 2010-04-29 16:52:52

Answer 3

A:

background-image takes an url as a value. Use either

background-image: url ('/image/btn.png');

or

background: url ('/image/btn.png') no-repeat;

which is a shorthand for

background-image: url ('/image/btn.png');
background-repeat: no-repeat;

Also, you might want to look at the button HTML element for fancy submit buttons.

Tgr 2010-04-29 16:35:38

Answer 4

+1 A:

Just to add to the answers, I think the specific reason in this case, in addition to the misplaced no-repeat, is the space between url and (:

background-image: url ('/image/btn.png') no-repeat; /* Won't work */
background-image: url('/image/btn.png'); /* Should work */

Pekka 2010-04-29 16:53:13

Actually I just tried it and your right! It does not work with the space but that's not the only problem with your code.

Jonathan Czitkovics 2010-04-29 16:54:56

thanks for pointing out. i was googling for solutions on this, and one of the answers was with `no-repeat`, hence i tried it.

fuz3d 2010-04-29 18:35:08

ansaurus

tags:

views:

answers:

background image for input type="button"

related questions