|
||
|
||
Что может движение мышки? |
||
Хейли Поллок Словом, бродите вы по Веб, прокручиваете страницы, практически не вчитываясь в их содержимое, и лишь чуть-чуть заинтересовано проглядываете их. Вдруг, безо всякого предупреждения незаметный черненький квадратик под указателем вашей мышки окрашивается в ярко-красный цвет и вы, не задумываясь, нажимаете на левую кнопку своего манипулятора. Ура, победа разума над … другим разумом - это наглядная демонстрация новых возможностей HTML - дескриптора "mouseover". "Mouseover" - это термин, который описывает изменение картинки, когда и если над ней оказывается указатель мыши. "Эй, посмотри на меня скорее!" - кричит вам страница, призывая вас. Есть множество применений этому замечательному эффекту, но, в основном, он используется не более чем подсветка ссылок или картинок, то есть, просто как еще один "примбамбас". Одно из очевидных применений "mouseover" - это уточняющая система навигации. Вспомните, как часто вы открываете не ту страницу, какую хотелось бы, будучи обманутым не очень понятной системой навигации (неточными или неочевидными кнопками, неясными шрифтами). Простейшая команда в источнике вашей страницы, и при наведении мышки на кнопку навигации пользователь получит точную информацию о том, куда он попадет. И все в выигрыше: вебмастер оптимизирует трафик, а его посетители чувствую себя более комфортно. Кроме же кнопок навигации есть и другие объекты на страницах, и к некоторым из них также применим этот эффект. Это могут быть подписи к рисункам, сгружаемым модулям и даже рекламным материалам. Так, например, вы можете одним дескриптором превратить картинку продаваемой продукции в ее цену, а фотографию пейзажа в несколько слов о нем. "Mouseover" - это один из самых простых и, в то же время, наиболее удачных трюков для создания квазидинамической страницы. Прежде чем воспользоваться "mouseover" вам необходимо создать две картинки, которые будут сменять друг друга при наведении на них указателя мыши. Важно, чтобы картинки были одинакового размера, в противном случае, вторая картинка (возникающая под курсором) будет подогнана браузером под размер основной, естественно, с искажениями. Кроме того, рекомендуется не делать картинки большими, так как иначе пользователь будет до поседения ждать загрузки картинки и весь эффект пропадет даром (если вообще кто-нибудь поймет, что таковой наличествует). Чаще всего для эффекта "mouseover" используются две похожие GIF картинки размерами до 100х100 точек. Особенно удачно используются небольшие изменения, например, подмигивающая рожица. Хорошие результаты получаются также при замене информативной картинки на текстовый баннер (GIF из одного голого текста), тогда вы можете использовать картинки большего размера, так как текстовые баннеры хорошо сжимаются. Таким образом, у вас есть две картинки: стандартная (существует на странице все время) и эффектная (появляется только на время пролета над картинкой мышиного курсора). Чтобы написать тег, поддерживающий "mouseover", вы сначала пишете обычный тег загрузки картинки (загружается стандартная картинка). Для примера возьмем примитивный случай: заменим синюю улыбающуюся рожицу (blueface.gif) на красную (redface.gif), причем, эффектной картинкой будет последняя. Соответственно, пишем тег для синей рожицы: <Img src="blueface.gif" alt ="happy face"> для того, чтобы эффект работал нам необходимо поименовать картинки, тогда в итоговой конструкции мы сможем сослаться на них. Воспользуемся для этого атрибутом Name <Img src="blueface.gif" Name="face" alt ="happy face"> в дескрипторе name не нужно использовать пробелов и знаков препинания, а также он должен быть написан латинскими буквами. Теперь поставим тег ссылки, ведь именно для этого вся возня и затевалась. <a href="http://www.mymoney.ru/"> <Img src="blueface.gif" Name="face" alt ="happy face"> </a> Мы получим самый, что ни на есть обычный кусок HTML текста со ссылкой через картинку на сайт mymoney.ru, теперь сделаем небольшие изменения в теге ссылки, чтобы показать нужный нам эффект. Для этого добавим два новых дескриптора: атрибуты onmouseover (эффектная картинка) и onmouseout (стандартная картинка). Итак, мы получим: <a href="http://www.mymoney.ru/" Во-первых, обратите внимание, что в конструкции document.face.src посередине между двумя точками стоит название, которое мы придали документу через дескриптор name. Второй важный момент: убедитесь, что название файлов в дескрипторах onmouseover и onmouseout стоит одинарных кавычках. Вот и все. Конечно, можно сделать то же самое с помощью Javascript, но, скажите мне, зачем? Этот способ гораздо проще и в большинстве случаев удобнее, к тому же вы не рискуете "порушить" браузер пользователем некорректной интерпретацией скрипта. Удачи вам. Источник: рассылка "Альманах вэбмастера", рассылается http://www.citycat.ru/
|
||
|
||
Copyright © 2000г. "Internet Zone" & Nik Romanov, info@izcity.com | ||
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. |