За последние 24 часа нас посетили 20120 программистов и 1711 роботов. Сейчас ищут 1824 программиста ...

Кнопка со смайлами. Как сделать?

Тема в разделе "JavaScript и AJAX", создана пользователем HEMASTER, 30 июн 2011.

  1. HEMASTER

    HEMASTER Активный пользователь

    С нами с:
    1 май 2011
    Сообщения:
    14
    Симпатии:
    0
    Подскажите пожалуйста как реализовать кнопку со смайлами как на mail.ru когда отправляешь сообщение в панели редактирования. Там кнопка на нее нажимаешь и появляются смайлики...
     
  2. HEMASTER

    HEMASTER Активный пользователь

    С нами с:
    1 май 2011
    Сообщения:
    14
    Симпатии:
    0
    что никто не знает по этому вопросу
     
  3. Benjamin

    Benjamin Активный пользователь

    С нами с:
    23 янв 2009
    Сообщения:
    154
    Симпатии:
    0
    Адрес:
    Тула
    Javascript?
     
  4. HEMASTER

    HEMASTER Активный пользователь

    С нами с:
    1 май 2011
    Сообщения:
    14
    Симпатии:
    0
    да конечно
     
  5. Gromo

    Gromo Активный пользователь

    С нами с:
    24 май 2010
    Сообщения:
    2.786
    Симпатии:
    2
    Адрес:
    Ташкент
    HEMASTER
    если не ошибаюсь, то там нет ничего сложного. делаешь скрытый див со всеми смайлами. при нажатии кнопки просто показываешь его. если уже показан - скрываешь.

    а вот добавление смайлов в текст сообщения обсуждалось в другом посте
     
  6. HEMASTER

    HEMASTER Активный пользователь

    С нами с:
    1 май 2011
    Сообщения:
    14
    Симпатии:
    0
    Само добавление смайлов в текст я научился делать... а вот то что ты объяснил не знаю как реализовать.. подскажи код javascript?
     
  7. HEMASTER

    HEMASTER Активный пользователь

    С нами с:
    1 май 2011
    Сообщения:
    14
    Симпатии:
    0
    Сделал вот такой вариант
    Код (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    5. <title>Untitled Document</title>
    6.  
    7. <script language="JavaScript" type="text/javascript">
    8.     function setSmile( which ) {
    9.         obj = document.getElementById('text');
    10.         obj.value += which;
    11.         obj.focus();
    12.     }
    13. </script>
    14.  
    15. <script  language="javascript">
    16. function  showMenu(id_menu){
    17. var my_menu =  document.getElementById(id_menu);
    18. if(my_menu.style.display=="none"  || my_menu.style.display==""){
    19. my_menu.style.display="block";
    20. } else {
    21. my_menu.style.display="none";
    22. }}
    23. </script>
    24.  
    25. <style  type="text/css">
    26.   ul{height:21px;}
    27.   .sub_menu{display:none;  position:relative; border:solid 1px #DEDEDE; border-top:solid 1px #DEDEDE;  border-right:solid 1px #999999; border-bottom:solid 1px #999999; width:170px; background:#FFFFFF;}
    28. </style>
    29. </head>
    30.  
    31. <body>
    32.  
    33. <ul>
    34. <img src="http://localhost/null/images/smiles/smile.gif" onClick="javascript:showMenu('id_menu_profile')" style="cursor:pointer"/>
    35.  
    36. <div class="sub_menu"  id="id_menu_profile">
    37. <table border="0" cellspacing="10" cellpadding="0">
    38.   <tr>
    39.     <td><a href='javascript:setSmile(":)")' title="Улыбка"><img src="http://localhost/null/images/smiles/smile.gif" /></a></td>
    40.     <td><a href='javascript:setSmile(":(")' title="Грусть"><img src="http://localhost/null/images/smiles/sad.gif" /></a></td>
    41.     <td><a href='javascript:setSmile(":crazy:")' title="Сумасшествие"><img src="http://localhost/null/images/smiles/crazy.gif" /></a></td>
    42.     <td><a href='javascript:setSmile(":rofl:")' title="Лопну от смеха"><img src="http://localhost/null/images/smiles/rofl.gif" /></a></td>
    43.     <td><a href='javascript:setSmile(":diablo:")' title="Чертовски злюсь"><img src="http://localhost/null/images/smiles/diablo.gif" /></a></td>
    44.   </tr>
    45.   <tr>
    46.     <td>&nbsp;</td>
    47.     <td>&nbsp;</td>
    48.     <td>&nbsp;</td>
    49.     <td>&nbsp;</td>
    50.     <td>&nbsp;</td>
    51.   </tr>
    52.   <tr>
    53.     <td>&nbsp;</td>
    54.     <td>&nbsp;</td>
    55.     <td>&nbsp;</td>
    56.     <td>&nbsp;</td>
    57.     <td>&nbsp;</td>
    58.   </tr>
    59.   <tr>
    60.     <td>&nbsp;</td>
    61.     <td>&nbsp;</td>
    62.     <td>&nbsp;</td>
    63.     <td>&nbsp;</td>
    64.     <td>&nbsp;</td>
    65.   </tr>
    66. </table>
    67. </div>
    68.  
    69. </ul>
    70.  
    71. <textarea name="text" cols="45" rows="5" id="text"></textarea>
    72.  
    73. </body>
    74. </html>
    Но хотелось бы чтобы смайлики исчезали когда выбираешь один или кликаешь курсором в др области страницы.. как на mal.ru в общем