Geek Answers Handbook

Can i use csssprite in submit button

I have two reasons why I want to use csssprites for submit buttons:

  • I have a dynamically created button that can be localized in the future
  • I want only 1 HTTP request, even if I have 5 buttons on the page

The problem is that I want to avoid javascript for buttons, so I need to use an input field of type image . I can set the background image in this field as well as for any csssprite.

The problem is that I found that I need to set the image source to an empty pixel, otherwise I get an icon with a damaged image.

With that said, this is the best solution I've come across:

 <style> .csssprite_cat { background-image:url(http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg); width: 50px; height: 50px; } </style> <input type=image src="http://www.grasse-ac.com/gif/no_pixel.gif" class="csssprite_cat"> <input type=image class="csssprite_cat">

(You can simply download this file directly to the browser - I borrow images from a random site).

This works fine, but I have to use our old old friend pixel.gif . Very nostalgic!

There is probably no better way without javascript if in css there is no way to hide the text and icon of the broken image.

+1
html css css-sprites
source share
2 answers

Do not use the image input type, you are much better off using the standard swamp send button and styling it that way.

Once you have defined your background-image , you will need to define unique background-positions for each button that you want to use.

For backward compatibility, I would suggest using cool mixes (since currently IE still does not support the CSS3 attribute selector), for example:

 <input type="submit" class="submit uniqueButtonClass" value="Submit" />

If you assign the background-image property to the .submit class, you can set the background-position property yourself for each individual button and not repeat it several times.

Example:

 .submit { background-image: url(path/to/image.png); width: 50px; height: 25px; border: 0; } /* assuming 25px is the offset you're using */ .uniqueButtonClass { background-position: 0 25px; }
+4
source share

I would use either the input type as above, or you can also:

 <button><img src="http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg" /></button>

The button allows you to throw something into it to a large extent and provide greater control over the formation.

In this case, you can create an interval inside the button or button yourself.

+1
source share

More articles:


All Articles