Чтобы знать о человеке многое, достаточно владеть немногим...

Всплывающая подсказка

Создано: Январь 9th, 2011 | Автор: | Рубрика: JavaScript | Теги: Java, прозрачность, скрипт | Нет комментариев »

Как-то раз заметил, что на маил.ру в разделе продажи товаров при наведении на картинку всплывает симпотичное полупрозрачное окошко с кратким описанием товара. Запомнилось! Стало интересно как это сделать. Вобщем, это окошко один из пинков которые меня подталкнули к изученю JavaScript. Именно такое окошко я и попытался сотворить! Как это все работает рассказывать не буду, просто пользуйтесь, если нужно! Вызов осуществляется вот так:

<p onmouseover="wpopup.show('Подсказка', this.offsetLeft, this.offsetTop, 'orange', 'white')" onmouseout="wpopup.hide()">
Popup
</p>

В данном случае Вы увидите надпись popup при наведении на которую появится окошко. ‘Подсказка’ ни что иное как Выш текст. Свойства offsetLeft и offsetTop передают в скрипт позицию для всплывающего окна (this значит, что передаются координаты тега). Если оно отображается не там где Вам хотелось бы, то просто прибавьте несколько пикселей, например вот так: this.offsetLeft+10. Дальше идет цвет фона, в нашем случае оранжевый и цвет шрифта — белый (передавать эти значения нужно в кавычках). Работает во всех браузерах (в гуглхроме не проверял, но должно). Процент прозрачности можете изменить в файле css. Поидее эффект можно прилепить к любому тегу (проверял на li, img, p). Дополнительно в функцию можно добавить еще как минимум пару аргументов, например выравнивание шрифта внутри окошка и ширину. Если Вам это необходимо и Вы не знаете как — пишите!

popup.zip

Рассказать друзьям:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • MySpace
  • Одноклассники
Просмотров: 505


Оставить ответ