Кнопка для смайликов как в контакте.

[Гробовщик]

Здравствуйте, хочу сделать кнопку смайликов как в контакте, но зашёл в тупик (css совсем не знаю()
При нажатии на изображение появляется крестик, а при нажатии в другом месте изображение сбрасывается обратно (так и надо), но вот не знаю как при повторном нажатии вернуть изображение обратно.
Вот css

.smile {cursor: pointer;
display:inline-block;
width:20px;
height:20px;
border:0;
outline:0;
padding:0;
text-indent: -1000em;
background:url('/img/chat/smile.png') no-repeat 0 0;}
.smile:focus {
    background-position: 0 -20px; /* Смещение фона */
   }

Вод код кнопки:

<input type="button" value="Отправить" class="smile"/>

Вот изображение: http://st0.vk.me/images/im_smile_cross.png?3
И попутные вопросы (код не нужен, ответте просто возможно ли такое в дальнейшем)
1. Можно ли сделать так что бы при фокусировке на текстовом поле (находиться рядом с изображением) кнопка оставалась активной (рисунок не сбрасывался)
2. Можно ли сделать DIV (для смайликов) поверх фрейма не связанного с ним.
3. Что бы при смене изображения крестик плавно и красиво поворачивался (как в контакте)
4. Лучше что бы было изображение или всё же что бы css прописывался для div (сам не понимаю в чём разница, но в контакте в исходникак прописано не изображение а именно div)

[lancer]

Не пользуюсь Вконтакте, поэтому не знаю как там.

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

При нажатии на смайлик появляется крестик, при нажатии в другом месте(пусть это будет кнопка x) обратно возвращается смайлик? Я правильно понял?

[animhotep]

можно всё, только первый пункт средствами цсс врядли. лучше js

[devote]

вот что можно точно, ИЕ конечно же в пролете:

<style>
    .message-box {
        position: relative;
        border: 1px solid #C0CAD5;
        width: 400px;
        height: 150px;
        margin-top: 120px;
    }
    .message-box .smile-button {
        position: absolute;
        width: 20px;
        height: 20px;
        top: 10px;
        right: 10px;
        outline: 0;
    }
    .message-box .smile-button .smile-open, .message-box .smile-button .smile-close {
        background: url('http://st0.vk.me/images/im_smile_cross.png?3') no-repeat -2px -26px;
        position: absolute;
        opacity: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform: rotate(0);

        -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
        -moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease;
        -ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease;
        -o-transition: -o-transform 0.3s ease, opacity 0.3s ease;
        transition: transform 0.3s ease, opacity 0.3s ease;

        outline: 0;
    }
    .message-box .smile-button .smile-close {
        opacity: 0;
        background-position: -2px -2px;
    }
    .message-box .smile-button:focus .smile-close {
        z-index: 1;
        opacity: 1;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .message-box .smile-button:focus .smile-open {
        opacity: 0;
    }
    .message-box textarea {
        border: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        resize: none;
        outline: 0;
    }
    .message-box .smile-button .smile-box {
        display: none;
        position: absolute;
        opacity: 0;
        bottom: 100%;
        left: -90px;
        color: #fff;
        border-radius: 5px;
        width: 200px;
        height: 100px;
        background: #000;
        margin-bottom: 10px;
        outline: 0;
        -webkit-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        -moz-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        -ms-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        -o-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
        transition: opacity 0.3s ease, margin-bottom 0.3s ease;
    }
    .message-box .smile-button .smile-box:after {
        content: ' ';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -5px;
        border-top: 5px solid #000;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 0;
    }
    .message-box:hover .smile-button .smile-box {
        display: block;
    }
    .message-box .smile-button:focus .smile-box {
        display: block;
        opacity: 0.8;
        margin-bottom: 5px;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper {
        padding: 10px;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile1,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile2,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile3,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile4,
    .message-box .smile-button .smile-box .smile-box-wrapper .smile5 {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin: 3px;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile1 {
        background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile2 {
        background: url('http://javascript.ru/forum/images/smilies/blink.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile3 {
        background: url('http://javascript.ru/forum/images/smilies/laugh.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile4 {
        background: url('http://javascript.ru/forum/images/smilies/unsure.gif') no-repeat 0 0;
    }
    .message-box .smile-button .smile-box .smile-box-wrapper .smile5 {
        background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
    }
</style>
<div class="message-box">
    <textarea></textarea>
    <div class="smile-button" tabindex="1">
        <div class="smile-box">
            <div class="smile-box-wrapper">
                <a class="smile1" href="#"></a>
                <a class="smile2" href="#"></a>
                <a class="smile3" href="#"></a>
                <a class="smile4" href="#"></a>
                <a class="smile5" href="#"></a>
            </div>
        </div>
        <div class="smile-close" tabindex="2"></div>
        <div class="smile-open"></div>
    </div>
</div>

[devote]

долбаные префиксы, куча раз из-за них редактировать приходиться.

[Гробовщик]

lancer,

При нажатии на смайлик появляется крестик, при нажатии в другом месте(пусть это будет кнопка x) обратно возвращается смайлик? Я правильно понял?

Ну при нажатии на "смайлик" он меняется на "крестик", а сверху выпадает меню со смайлами. При повторном нажатии на "крестик" или в другом месте страницы (кроме текстового поля) Панель закрывается, а "крестик" снова сменяется "смайликом"

[Гробовщик]

animhotep,

можно всё, только первый пункт средствами цсс врядли. лучше js

Самое интересное что там много чего напихано, просто ужас и css и js. Они могут общаться без конфликта?

[Гробовщик]

devote,

вот что можно точно

Охренительный исходник

ИЕ конечно же в пролете:

Ради такого исходника пошёл он этот IE
А что означают вот эти строки?

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);

А ещё у меня шаблон порвался, пока кнопка смайлика на сервере vk.com она работает как надо, как только я её скачал себе на сервер, она начала вести себя неправильно. Какая ей разница? Ошибку исправил перестановкой координат

[devote]

А что означают вот эти строки?

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

Какая ей разница?

понятия не имею, по идее никакой. Возможно вы что-то не так сделали

[lancer]

долбаные префиксы, куча раз из-за них редактировать приходиться.

Пользуйся zen-coding'ом он же по другому называется emmit. Достаточно писать основное свойство, а все с префиксами создаются автоматически.

Ну при нажатии на "смайлик" он меняется на "крестик", а сверху выпадает меню со смайлами. При повторном нажатии на "крестик" или в другом месте страницы (кроме текстового поля) Панель закрывается, а "крестик" снова сменяется "смайликом"

Чтобы менялась сама картинка кнопки при клике - вы все правильно сделали ролловером, меняете position background'a.

А вот чтобы выпадало меню со смайликами - способ реализации зависит от контекста. Простейший способ - два блока одинаковой высоты с position:relative; один в другом. Изначально у внутреннего top:-(высота блока); Он выдвигается, скажем по 20px через setInterval в 500 милисекунд, также задвигается. Смещение регулируется прибавлением, вычитанием к текущему значению top. Внешний блок должен быть с overflow:hidden; чтобы спрятанная(задвинутая) часть внутреннего блока не была видна.

Позиционирования, в том числе relativ'ное.

Или метод animate в библиотеке jquery. Также в этой библиотеке есть готовые плагины выдвижных блоков и прочее - если сами делать не хотите.