http://sulfurzona.com/
News
Service
Magazine
Software (Battle City Game, Wallpaper manager, Superpad, VG-NOW, Puzzle Game, Netler Internet Browser, ..)
Dune Game (Dune III, Dune IV, Cheats, Forum, ..)
Games free
Turbo Pascal (Assembler, Docs, Sources, Debbugers, ..)
Books (Docs for developers)
Guest book
Компьютерная диагностика двигателя автомобиля (адаптер К-линии)Компьютерная диагностика двигателя автомобиля (адаптер К-линии)
 
 
 
 
 

PHP и WEB для новичков: Всплывающие подсказки

 
Автор: Владислав Демьянишин
 
PHP и WEB для новичковЧтобы создать хороший, а может, в чем-то даже уникальный сайт, веб-программисту просто необходимо знать множество языков программирования. Это и PHP, JavaScript, HTML, CSS, XML, а где-то и Python.
 
Но знать языки мало. Используя их, порой, приходится создавать то, что однажды кем-то где-то уже создано. И создано, надо сказать, не плохо, да к тому же выложено в сети для бесплатного использования другими.
 
Сегодня я вам расскажу о некоторых модулях, написанных на языке JavaScript, позволяющих реализовать разные фишки, которые могут пригодиться на сайте. Поэтому, чтобы понять, о чем пойдет речь в данной статье, вы, уважаемый читатель, должны знать HTML и JavaScript.
 

Проблемы с PNG в IE

 
Предлагаю начать, пожалуй, с самой нескучной темы. Если вы начинающий веб-программист, который ответственно подходит к своей работе, думаю, обязательно проверяете работу своего веб-кода в разных браузерах: Mozilla Firefox (сокращенно FF), Opera, Google Crome и, конечно, Internet Explorer (сокращенно IE).
 
Наверняка, замечали, что если в дизайне веб-страницы применяется изображение формата PNG со слоем прозрачности, то все браузеры отображают его адекватно, а вот в IE такое изображение почему-то вместо прозрачного, отображается на сером фоне.
Предположим, у нас есть веб-страничка с кодом:
 
<html>
<h1>Фото PNG с прозрачным фоном</h1>
<img src="comput.png">

<h1>Область с прозрачным фоном в PNG</h1>
<div style="width: 600px; height: 240px; background-image: url(comput.png)">
</html>
 
где в оформлении применяется изображение из файла comput.png, в котором есть слой прозрачности (alpha-канал). На рис. 1 показано, как должна выглядеть эта страничка и как она выглядит в браузерах FF, Opera, Chrome. А на рис. 2 как она выглядит в браузере IE. Прямо скажем – небо и земля.
 
Советы по WEB-разработке: Всплывающие подсказки - зачем изобретать велосипед?
Рис. 1. В браузерах FireFox, Chrome, Opera
 
Советы по WEB-разработке: Всплывающие подсказки - зачем изобретать велосипед?
Рис. 2. В браузере Internet Explorer
 
Причины и решение данной проблемы подробно изложены на странице автора по адресу www.tigir.com/alpha_png.htm. Ссылка на скачивание библиотеки www.tigir.com/fixpng.js (размер 624 байта). А я лишь приведу простой пример решения.
 
<html>
<head>
 
<!-[if lt IE 7>]
<![if gte IE 5.5>]
<script type="text/javascript" src="fixpng.js"></script>
<style type="text/css">
.iePNG, IMG { filter:expression(fixPNG(this)); }
.iePNG A { position: relative; }/* стиль для нормальной работы ссылок в элементах с PNG-фоном */
</style>
<![endif>]
<![endif]->
 
</head>
<body>
<h1>Фото PNG с прозрачным фоном</h1>
<img src="comput.png" width="300" height="120">
 
<h1>Область с прозрачным фоном в PNG</h1>
<div class="iePNG" style="width: 600px; height: 240px; background-image: url(comput.png)">
</body>
</html>
 
В этом коде видно, что в теге HEAD мы объявляем об использовании скрипта fixpng.js. Если на своем сайте все скрипты вы храните в некой папке, то путь к скрипту можно изменить, например, так: “js/fixpng.js”.
 
Далее описываются стили для заплат. Они обеспечат корректный вывод в IE изображений PNG с прозрачностью. Но чтобы изображение нормально выводилось, да и вообще было видно, необходимо указывать для него атрибуты width/height, иначе мы ничего не увидим.
Если необходимо исправить фоновое изображение в IE, то тут выбор не велик, поскольку вместо повторяющегося фона изображение будет выводиться всего единожды и то на всю область, т.е. будет растянуто, вместо повторения.
 
Поэтому имеет смысл применять только в тех местах, где фон не повторяется. К тому же для области с таким фоном следует указывать класс, например, так class="iePNG" или если область уже имеет свой класс, то указывать совмещенный класс так class="mydiv iePNG", где “mydiv” – ваш класс.
 
Пока не забыл, скрипт библиотеки требует наличия картинки размером в 1 пиксель с прозрачным фоном в формате GIF. Поэтому все необходимое найдете в архиве “Программирование”.
 
А напоследок скажу, что если изображения для оформления вашего сайта собраны в какой-то папке, то путь к фотке в 1 пиксель можно указать прямо в скрипте fixpng.js в строке вида element.src = "1px.gif";
 
Теперь давайте предположим, что помимо статических картинок и фона на нашей веб-странице имеется кнопка (быть может, целое меню из кнопок), которая имеет один вид, а при наведении курсора мыши на нее меняет свой вид на другой. Оба изображения этой кнопки имеют формат PNG и канал прозрачности.
Так вот если попробовать составить код кнопки так:
 
<a href="index.html"><img src="comput.png" width="300" height="120" border="0" onmouseover="this.src='comput_pressed.png'" onmouseout="this.src='comput.png'"></a>
 
то все браузеры отобразят кнопку в обеих ее фазах нормально, а вот IE сначала отобразит как надо, но при наведении курсора мыши кнопка станет другой, но уже с серым фоном. Снова имеем косяк. Как же от него избавиться?
 
Советы по WEB-разработке: Всплывающие подсказки - зачем изобретать велосипед?
Рис. 3. Кнопка в IE
 
А достаточно лишь дополнить каждый обработчик события вызовом функции fixPNG(this), которая находится во все том же скрипте fixpng.js. Тогда код нашей кнопки уже будет выглядеть так:
 
<a href="index.html"><img src="comput.png" width="300" height="120" border="0" onmouseover="this.src='comput_pressed.png';fixPNG(this)" onmouseout="this.src='comput.png';fixPNG(this)"></a>
 
и она будет отображаться в IE как нам и требуется (рис. 3).
 

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

 
При создании форм частенько возникает необходимость пояснить респонденту (ответчику, заполняющему форму), как следует правильно вводить свои данные. Это можно сделать просто, например, так:
 
<html>
Укажите телефон: <img src="tips.gif" alt="Укажите телефон: в начале в скобках код города, затем остальные цифры через тире" title="Укажите телефон: в начале в скобках код города, затем остальные цифры через тире"> <input name="phone" type="text" value="">
</html>
 
Тут имеется название поля, само поле и картинка со знаком вопроса, при наведении на которую появится обычная подсказка (рис. 4). Для появляющейся подсказки наша картинка является базовым объектом. Для картинки указаны два атрибута ALT (для IE) и TITLE (для gecko-браузеров: FF, Chrome, Opera).
 
 
 
 
 
Советы по WEB-разработке: Всплывающие подсказки - зачем изобретать велосипед?
Рис. 4
 
Такая подсказка видна совсем недолго, поэтому если текста в ней много, велика вероятность, что пользователь не успеет ознакомиться с ее содержимым полностью.
 
К тому же эта подсказка имеет весьма неказистый вид и не позволяет оформить содержимое более выразительно. Чтобы преодолеть такое ограничение, воспользуемся библиотекой wz_tooltip.js на JavaScript.
 
К сожалению, этот бесплатный проект закрыт и сайт его автора неактивен. Но для наших читателей мы архивчик припасли в секции “Программирование”.
 
Итак, в следующем примере мы подключаем библиотеку wz_tooltip.js именно внутри тега BODY. А для нашей картинки со знаком вопроса добавляем обработчики событий, в которых при наведении курсора мыши (событие onmouseover) вызываем функцию Tip с указанием содержимого подсказки, а при уходе мышки с картинки (событие onmouseout), вызываем функцию скрытия подсказки UnTip.
 
<html>
<body>
<script type="text/javascript" src="wz_tooltip.js"></script>
 
Укажите телефон: <img src="tips.gif"
 onmouseover="Tip('Укажите телефон: в начале в скобках код города,<br> затем остальные цифры через тире')"
 onmouseout="UnTip()"> <input name="phone" type="text" value="">
</body>
</html>
 
В результате получится почти стандартная подсказка, но она не исчезнет, пока пользователь не уберет курсор мыши с нашей картинки (рис. 5). К тому же, если картинка находится слишком близко к нижнему краю окна браузера, то подсказка появится выше нашей картинки. Прошу обратить внимание, что в тексте можно применять тег <BR> для переноса текста на следующую строку.
 
Советы по WEB-разработке: Всплывающие подсказки - зачем изобретать велосипед?
Рис. 5
 
Если необходимо принудительно отобразить подсказку не ниже, а выше базового объекта, то достаточно после текста через запятую указать служебный параметр ABOVE и его значение true. А для примера еще укажем параметр WIDTH и его значение 250 – это позволит ограничить ширину окна подсказки в 250 пикселей. Соответственно параметр OFFSETX со значением 1 задает смещение относительно курсора мыши по горизонтали. Тогда получится такой код:
 
Укажите телефон: <img src="tips.gif"
 onmouseover="Tip('Укажите телефон: в начале в скобках код города, затем остальные цифры через тире', WIDTH, 250, ABOVE, true, OFFSETX, 1)"
 onmouseout="UnTip()"> <input name="phone" type="text" value="">
 
Если хочется задать какой-то отступ от границы окошка и сменить цвет фона подсказки на свой, то следующий код иллюстрирует это:
 
Укажите телефон: <img src="tips.gif"
 onmouseover="Tip('Укажите телефон: в начале в скобках код города, затем остальные цифры через тире', WIDTH, 150, PADDING, 6, BGCOLOR, '#ffffff')"
 onmouseout="UnTip()"> <input name="phone" type="text" value="">
 
Тут применяется параметры PADDING и BGCOLOR (рис. 6).
 
Советы по WEB-разработке: Всплывающие подсказки - зачем изобретать велосипед?
Рис. 6
 
А как быть, если очень нужен заголовок? Да, пожалуйста! Всего-то надо указать служебное слово TITLE и через запятую текст для заголовка (рис. 7):
 
Советы по WEB-разработке: Всплывающие подсказки - зачем изобретать велосипед?
Рис. 7
 
Укажите телефон: <img src="tips.gif"
onmouseover="Tip('в начале в скобках код города, затем остальные цифры через тире', TITLE, 'Укажите телефон', BGCOLOR, '#ffffff')"
onmouseout="UnTip()"> <input name="phone" type="text" value="">
 
Если же в подсказку необходимо включить иллюстрацию, то можно сделать и так (рис. 8), просто сверстав нужный HTML-код. Главное, внимательно слэшевать одинарные и двойные кавычки:
 
Советы по WEB-разработке: Всплывающие подсказки - зачем изобретать велосипед?
Рис. 8
 
Укажите телефон: <img src="tips.gif"
 onmouseover="Tip('<img src='comput.png' width='150' height='60' align='right'>Логотип  <br> нашего<br> журнала')"
 onmouseout="UnTip()"> <input name="phone" type="text" value="">
 
Автор данной библиотеки заложил столько разнообразных возможностей в свое творение, что нам остается черпать и черпать всевозможные варианты оформления подсказок. Наконец, пожалуй, самое вкусное ;)
 
А именно, давайте попробуем сделать так, чтобы окно подсказки плавно появлялось и плавно исчезало. Да еще чтобы отбрасывало на веб-страницу тень. Думаете, ничего у нас не выйдет?
 
А вот и не угадали. Для этого укажем параметры “FADEIN, 300, FADEOUT, 300”, где сразу за названием параметра следует временной интервал в миллисекундах, в течение которого будет выполняться эффект плавного появления и затухания подсказки. Чтобы у подсказки появилась тень, укажем параметр SHADOW и его значение true (рис. 9).
 
Советы по WEB-разработке: Всплывающие подсказки - зачем изобретать велосипед?
Рис. 9
 
Но нам этого мало. Давайте сделаем так, чтобы у окна подсказки был не только заголовок, но и кнопка закрытия подсказки. Т.е. подсказка не исчезнет, пока пользователь не кликнет на кнопке закрытия окна. За это отвечает параметр “CLOSEBTN, true”.
 
А чтобы окно закрывалось еще и при клике на содержимом окна, добавим параметр “CLICKCLOSE, true”. Но чтобы наша подсказка не исчезала при появлении другой подсказки, добавим параметр “STICKY, 1”:
 
Укажите телефон: <img src="tips.gif"
onmouseover="Tip('В начале в скобках код города, затем остальные цифры через тире', WIDTH, 300, TITLE, 'Укажите телефон', SHADOW, true, FADEIN, 300, FADEOUT, 300, STICKY, 1, CLOSEBTN, true, CLICKCLOSE, true)"
onmouseout="UnTip()"> <input name="phone" type="text" value="">
 
При желании, в подсказку можно вставить и таблицу и ссылки. Тут полная свобода действий. Только не забывайте слэшевать одинарные и двойные кавычки.
 
Фух, статья уже подходит к концу, а я еще не рассказал и половины возможностей этой замечательной кросс-браузерной библиотеки. Поэтому предлагаю скачать архив с примерами и документацией на сайте нашего журнала и изучить самостоятельно более детально.
 
© Владислав Демьянишин
 
Вы находитесь на официальном сайте Владислава Демьянишина - разработчика игры Dune IV (Dune 4). На нашем сайте Вы можете бесплатно скачать игры Dune IV (Dune 4), Battle City (Танчики с Dendy/Nintendo), читы к играм и многое другое. Также Вы можете скачать бесплатно программы и полезные утилиты. Все программы чистые, т.е. не содержат вирусов и иного вредоносного ПО.
 
Среди доступных программ есть мобильная читалка книг, менеджер переноса файлов с фото- и видеокамер на компьютер, текстовый редактор, WYSIWYG редактор, 3D аниматор, GIF аниматор, AVI аниматор, пакетный конвертор изображений, редактор электрических схем, программа для скриншотов, диспетчер тем рабочего стола и другие.
 
На нашем сайте можно не только бесплатно скачать игры, но и документацию и книги по программированию на MIDLetPascal, Turbo Pascal 6, Turbo Pascal 7, Borland Pascal, по программированию устройств Sound Blaster, Adlib, VESA BIOS, справочник Norton Guide и много другой полезной информации для программистов, включая примеры решения реальных задач по созданию резидентных программ. Предлагаю также посетить Марья искусница - сайт о рукоделии (http://mariya-iskusnica.ru).
 
 

Журнал > Программирование > PHP и WEB для новичков (HTML, JavaScript, PHP, MySQL) > PHP и WEB для новичков: Всплывающие подсказки
 
 
 
40
 
ВКонтакте
Facebook
 
 
 
На главную страницу На предыдущую страницу На начало страницы
 
 
Рейтинг@Mail.ru Рейтинг Сайтов YandeG