Как использовать спрайт в качестве ролловера ввода?

Question

Есть ли быстрый и простой способ использовать спрайт для создания ролловера на входе?

Я не очень хорошо знаком с входными данными и, в частности, с тем, что вы делаете с опрокидыванием входных данных. Я понимаю использование спрайтов на тегах. Я также получил концепцию использования Javascript onMouseOut с двумя изображениями, но я действительно предпочел бы использовать спрайт. Кажется, они работают лучше всего, и мне не придется беспокоиться о мерцании.

Вот изображение, с которым я работаю:

Вот код, с которым я работаю:

<style>
#newsletterSubmit{background:url(/Images/Buttons/submit.png) 0 0 no-repeat;display:block;width:90px;height:50px;text-indent:-9000px;}
</style>

 <input id="newsletterSubmit" type="image" src="Images/Buttons/Submit.png" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px -50px';" onmouseover="document.getElementById('newsletterSubmit').style.backgroundPosition='0px 0px';" />

Answer 1

Вам не нужен JavaScript или onmouseover, все это можно сделать с помощью CSS.Вот простой пример:

<input type="submit" value="Submit">

input {
    display:block;
    text-indent:-9000px;
    border:0;
    padding:0;

    background:url(/Images/Buttons/submit.png) 0 0 no-repeat;
    width:90px;
    height:50px;
}

input:hover {
   /* Move the background image up 50px (height of button) */
   background-position:0 -50px;  
}

Демо: http://jsbin.com/ihafib

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