Joomla 1.5 Появляющиеся кнопки при наведении мыши на объект

Тема в разделе "Интерактивные возможности", создана пользователем MrNix, 10.11.2010.

  1. Offline

    MrNix Недавно здесь

    Регистрация:
    22.07.2010
    Сообщения:
    40
    Симпатии:
    0
    Пол:
    Мужской
    Здравсвуйте. Недостаточно полно объяснил проблему в заголовке, но все же постараюсь.:) Вообщем надо сделать так, как на YouTube в комментариях. Наводишь мышку на комментарии и там появляются кнопки голосования, ответить, отметить как спам. Я так понимаю это делается на Java ? Если так, то может скрипты дадите? Заранее спасибо.
     
  2.  
  3. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    С помощью JavaScript+CSS. При событии наведения onMouseOver, должны появляться кнопки и изменить стиль с style.display = "none" на style.display = "block" и при onmouseOut наоборот. Как-то так кажется
     
  4. Offline

    MrNix Недавно здесь

    Регистрация:
    22.07.2010
    Сообщения:
    40
    Симпатии:
    0
    Пол:
    Мужской
    Спасибо, но я в этом деле чайник. Есть ли более подробное объяснение?:)
     
  5. vesy
    Offline

    vesy специалист

    Регистрация:
    02.07.2010
    Сообщения:
    263
    Симпатии:
    53
    Пол:
    Мужской
    Код (CODE):
    1. <script language="JavaScript" type="text/javascript">  
    2. function visibleEl(item) {
    3. document.getElementById(item).style.display = "block";
    4. }
    5. function HideElement(item) {
    6. document.getElementById(item).style.display = "none";
    7. }
    8. </script>
    9.  
    10.  
    11. <div  onMouseOver="visibleEl('opt1')" onMouseOut="HideElement('opt1')">Сообщение или комментарий...<div style="display:none; background:grey;" id="opt1">Здесь Ваши кнопки</div></div>
    12. <div  onMouseOver="visibleEl('opt2')" onMouseOut="HideElement('opt2')">Сообщение или комментарий...<div style="display:none; background:grey;" id="opt2">Здесь Ваши кнопки</div></div>


    Здесь просто приведен пример. код необходимо усовершенствовать. onMouseOver - событие при наведении на элемент, а событие onMouseOut при потере курсора. Сначала div'ы с id opt1 и opt2 спрятаны с помощью style="display:none", а потом при onMoseOver вызывается ф-я, которая отображает элемент с его id, меняя стиль на display:block. При onMouseOut опять элемент стает невидимым.
     
    Последнее редактирование: 10.11.2010
    MrNix нравится это.

Поделиться этой страницей

Загрузка...