[Гробовщик]

Здравствуйте, хочу сделать кнопку смайликов как в контакте, но зашёл в тупик (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)