ф
зах нормально, а вот ІЕ сначала отобразит как
надо,
но при наведении
курсора мыши
кнопка
станет другой, но уже с серым фоном. Снова име-
ем косяк. Как же от него избавиться?
А достаточно лишь дополнить каждый обработ-
чик события вызовом функции /іхРЛЮ /І/і/в^, кото-
рая находится во все том же скрипте їіхрпд.ів. Тог-
да код нашей кнопки уже будет выглядеть так:
<а href=”index.htmr><img src=”comput.png”
width- ’ЗОО” height="120” border=”0”
onmouseover=”this. src=’ comput
pressed. png ’ ;fixP
NG(this)”
onmouseout=’’this.src=,comput.png’;fixPNG(this)”>
</a>
и она будет отображаться в IE как нам и требу-
ется
(рис. 3).
Всплывающие подсказки
П
ри создании форм частенько возникает не-
обходимость пояснить респонденту (ответ-
чику, заполняющему форму), как следует правиль-
но вводить свои данные. Это можно сделать прос-
то, например, так:
<html>
К сожалению, этот бесплатный проект закрыт и
сайт его автора неактивен. Но для наших читате-
лей мы архивчик припасли в секции “Программи-
рование” на странице
http: //comput.com. ua/index. php?art=22.
Итак, в следующем примере мы подключаем биб-
лиотеку
wz_tooltip.js
именно внутри тега
BODY.
А
для нашей картинки со знаком вопроса добавляем
обработчики
событий,
в
которых
при наведении курсора мыши (со-
бытие
onm ouseover)
вызываем
функцию
с указанием содержи-
мого подсказки, а при уходе мыш-
ки с картинки (событие
out),
вызываем функцию скрытия подсказки
UnTip.
<html>
<body>
<script type=”text/javascript”
src=”wz_too!tip.js” ></script>
Укажите телефон: <img src=”tips.gif”
onmouseover=”Tip(‘Укажите телефон: в начале в
скобках код города,<Ьг> затем остальные цифры
через тире’)”
onmouseout=”UnTip()”> <input name=”phone”
type=”text” va!ue=””>
</body>
</htm l>
В результате получится почти стандартная под-
сказка, но она не исчезнет, пока пользователь не
Укажите
телефон:
<img
src=”tips.gif”
аК=”Укажите телефон: в начале в скобках код
города, затем остальные цифры через тире”
М1е=”Укажите
телефон:
в
начале
в
скобках
код города,
затем
остальные
цифры
через
тире”> cinput name=”phone” type=”text” value=””>
</htm l>
Тут имеется название поля, само поле и картин-
ка со знаком вопроса, при наведении на которую
появится обычная подсказка
(рис. 4).
Для появля-
ющейся подсказки наша картинка является базо-
вым объектом. Для картинки указаны два атрибута
ALT
(для
IE)
и
TITLE
(для
gecko-браузеров:
FF,
Chrome, Opera).
Такая подсказка видна совсем недолго, поэтому
если текста в ней много, велика вероятность, что
пользователь не успеет ознакомиться с ее содер-
жимым полностью.
К тому же эта подсказка имеет весьма неказис-
тый вид и не позволяет оформить содержимое
более выразительно. Чтобы преодолеть такое
ограничение, воспользуемся библиотекой
wz_tooltip.js
на JavaScript.
m
.
• ІУЛ - - • * V ^ W ^ * * ^ ■
• viMA*,'- -
Укажите телефон:
Ф
j
Рис. 4
L.
. . .
..................
Укажите телефон: в начале в скобках код города, затем остальные цифры через
тире
У каж ите телефон : €> >
г
Рис. 5
Укажите телефон: в начале в скобках код города,
затем остальные цифры через тире
уберет курсор мыши с нашей картинки
(рис. 5).
К
тому же, если картинка находится слишком близко
к нижнему краю окна браузера, то подсказка по-
явится
выше
нашей
картинки.
Прошу
обратить
внимание, что в тексте можно применять тег <BR>
для переноса текста на следующую строку.
Если
необходимо
принудительно
отобразить
подсказку не ниже,
а выше базового объекта, то
достаточно
после
текста
через
запятую
указать
служебный параметр
ABOVE
и его значение
true.
А для примера еще укажем параметр
WIDTH
и его
значение
2 5 0
- это позволит ограничить ширину
окна
подсказки
в
250
пикселей.
Соответственно
параметр
O
FSETX
со значением 1 задает смеще-
ние относительно курсора мыши по горизонтали.
Тогда получится такой код:
Укажите телефон: <img src=”tips.gif”
опплои5еоуег=”И р (‘Укажите телефон: в начале в
скобках код города, затем остальные цифры через
тире’, WIDTH, 250, ABOVE, true, OFFSETX, 1)”
onmouseout=”UnTip()”>
<input
nam e=”phone”
type="text” value=””>
предыдущая страница 37 Компьютер 2012 06 читать онлайн следующая страница 39 Компьютер 2012 06 читать онлайн Домой Выключить/включить текст