Могу ли я использовать csssprite на кнопку отправки - PullRequest
Новая
       10

Могу ли я использовать csssprite на кнопку отправки

1 голос
/ 17 июля 2009

У меня есть две причины, по которым я хочу использовать csssprites для кнопок отправки:

  • У меня есть динамически созданная кнопка, которая в будущем может быть локализована
  • Мне нужен только 1 HTTP-запрос, даже если на странице 5 кнопок

Проблема в том, что я хочу избежать JavaScript для кнопок, и поэтому мне нужно использовать поле input типа image. Я могу установить фоновое изображение в этом поле так же, как и для любого csssprite.

Проблема в том, что я обнаружил, что должен был установить источник изображения на пустой пиксель, иначе я получаю значок разбитого изображения.

С учетом сказанного, это лучшее решение, которое я придумала: 

<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">

(Вы можете просто загрузить этот файл прямо в браузер - я заимствую изображения со случайного сайта).

Все работает нормально, но я должен использовать нашего старого доброго друга pixel.gif . Очень ностальгический!

Вероятно, нет лучшего способа без javascript, если в css нет способа скрыть поврежденный текст изображения и значок.

Ответы [ 2 ]

4 голосов
/ 17 июля 2009

Не используйте тип ввода изображения, вам гораздо лучше использовать стандартную кнопку отправки болота и стилизовать ее таким образом.

Как только вы определили свой background-image, вам нужно будет определить уникальный background-positions для каждой отдельной кнопки, которую вы хотите использовать.

Для обратной совместимости я бы посоветовал использовать смеси классов (поскольку на данный момент IE все еще не поддерживает селекторы атрибутов CSS3), например так: 

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

Если вы предоставите классу .submit свойство background-image, вы можете установить свойство background-position независимо для каждой отдельной кнопки и избежать повторения несколько раз.

Пример: 

.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; }
1 голос
/ 17 июля 2009

Я бы использовал тип ввода, как указано выше, или вы также можете: 

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

Тэг позволяет вам вбрасывать в него все что угодно и обеспечивает больший контроль над форматированием.

В этом случае вы можете задать диапазон внутри кнопки или для кнопки самостоятельно.

...