Кнопка для смайликов как в контакте.
Здравствуйте, хочу сделать кнопку смайликов как в контакте, но зашёл в тупик (css совсем не знаю()
При нажатии на изображение появляется крестик, а при нажатии в другом месте изображение сбрасывается обратно (так и надо), но вот не знаю как при повторном нажатии вернуть изображение обратно. Вот css Код:
.smile {cursor: pointer; <input type="button" value="Отправить" class="smile"/> Вот изображение: http://st0.vk.me/images/im_smile_cross.png?3 И попутные вопросы (код не нужен, ответте просто возможно ли такое в дальнейшем) 1. Можно ли сделать так что бы при фокусировке на текстовом поле (находиться рядом с изображением) кнопка оставалась активной (рисунок не сбрасывался) 2. Можно ли сделать DIV (для смайликов) поверх фрейма не связанного с ним. 3. Что бы при смене изображения крестик плавно и красиво поворачивался (как в контакте) 4. Лучше что бы было изображение или всё же что бы css прописывался для div (сам не понимаю в чём разница, но в контакте в исходникак прописано не изображение а именно div) |
Не пользуюсь Вконтакте, поэтому не знаю как там.
Цитата:
|
можно всё, только первый пункт средствами цсс врядли. лучше js
|
вот что можно точно, ИЕ конечно же в пролете:
<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> |
долбаные префиксы, куча раз из-за них редактировать приходиться.
|
lancer,
Цитата:
|
animhotep,
Цитата:
|
devote,
Цитата:
Цитата:
А что означают вот эти строки? Цитата:
|
Цитата:
Цитата:
|
Цитата:
Цитата:
А вот чтобы выпадало меню со смайликами - способ реализации зависит от контекста. Простейший способ - два блока одинаковой высоты с position:relative; один в другом. Изначально у внутреннего top:-(высота блока); Он выдвигается, скажем по 20px через setInterval в 500 милисекунд, также задвигается. Смещение регулируется прибавлением, вычитанием к текущему значению top. Внешний блок должен быть с overflow:hidden; чтобы спрятанная(задвинутая) часть внутреннего блока не была видна. Позиционирования, в том числе relativ'ное. Или метод animate в библиотеке jquery. Также в этой библиотеке есть готовые плагины выдвижных блоков и прочее - если сами делать не хотите. |
Часовой пояс GMT +3, время: 06:07. |