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

Discussion in 'Интерактивные возможности' started by MrNix, Nov 10, 2010.

  1. Offline

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

    Joined:
    Jul 22, 2010
    Messages:
    40
    Likes Received:
    0
    Gender:
    Male
    Здравсвуйте. Недостаточно полно объяснил проблему в заголовке, но все же постараюсь.:) Вообщем надо сделать так, как на YouTube в комментариях. Наводишь мышку на комментарии и там появляются кнопки голосования, ответить, отметить как спам. Я так понимаю это делается на Java ? Если так, то может скрипты дадите? Заранее спасибо.
     
  2.  
  3. vesy
    Offline

    vesy Недавно здесь => Cпециалист <=

    Joined:
    Jul 2, 2010
    Messages:
    263
    Likes Received:
    53
    Gender:
    Male
    С помощью JavaScript+CSS. При событии наведения onMouseOver, должны появляться кнопки и изменить стиль с style.display = "none" на style.display = "block" и при onmouseOut наоборот. Как-то так кажется
     
  4. Offline

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

    Joined:
    Jul 22, 2010
    Messages:
    40
    Likes Received:
    0
    Gender:
    Male
    Спасибо, но я в этом деле чайник. Есть ли более подробное объяснение?:)
     
  5. vesy
    Offline

    vesy Недавно здесь => Cпециалист <=

    Joined:
    Jul 2, 2010
    Messages:
    263
    Likes Received:
    53
    Gender:
    Male
    Код (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 опять элемент стает невидимым.
     
    Last edited: Nov 10, 2010
    MrNix likes this.

Share This Page

Loading...