Kompx.com or Compmiscellanea.com

JavaScript ролловер. Смена изображения

Windows : Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 3.21+, Safari 3.1+, SeaMonkey 1.0+, [ 1 ].

Linux : Firefox 1.0+, Chromium, Opera 5.0+, SeaMonkey 1.0+, hv3, [ 2 ].

Пример n.1 ( Для современных веб браузеров: Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, [ 3 ] ):

JavaScript ролловер. Смена изображения

HTML / XHTML. Код:

<a href="javascript-rollover-smena-izobrazhenija.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" width="728" height="67" alt="JavaScript ролловер. Смена изображения" /></a>

CSS. Код:

.image {border: 0px;}

JavaScript. Код:

imageout=new Image();

imageout.src="out.gif";

imageover=new Image();

imageover.src="over.gif";

function image_out(){

document.images['imageout'].src='out.gif';

};

function image_over(){

document.images['imageout'].src='over.gif';

};

Изображение для смены 1 ( out.gif ):

Изображение для смены 2 ( over.gif ):

Пример n.2 ( Для старых веб браузеров: Internet Explorer 4.0+, Netscape 3.04+, Opera 3.21+ ):

HTML / XHTML. Код:

<a href="javascript-rollover-smena-izobrazhenija.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" name="imageout" width="728" height="67" border="0" alt="JavaScript ролловер. Смена изображения"></a>

JavaScript. Код:

imageout=new Image();

imageout.src="out.gif";

imageover=new Image();

imageover.src="over.gif";

function image_out(){

document.images['imageout'].src='out.gif';

};

function image_over(){

document.images['imageout'].src='over.gif';

};

Изображение для смены 1 ( out.gif ):

Изображение для смены 2 ( over.gif ):

Cтраница-пример 1 примера n.2 - JavaScript код во внешнем файле - для Internet Explorer 4.0+, Netscape 3.04 - 4.xx, Opera 3.21 - 3.6x: [ Открыть страницу-пример ] [ Cкачать в архиве ]

Cтраница-пример 2 примера n.2 - JavaScript код в HTML документе (использовалось, например, для Netscape 3.xx, отображающего страницы с веб серверов не сконфигурированных отсылать клиентам MIME-тип "application/x-javascript" для файлов .js) - для Internet Explorer 4.0+, Netscape 3.04 - 4.xx, Opera 3.21 - 3.6x: [ Открыть страницу-пример ] [ Cкачать в архиве ]

JavaScript ролловер. Смена изображения

В 1990ые существовало меньше рабочих способов на стороне клиента для того, что бы сделать веб-страницу чем-то большим, чем простой веб-документ. Реализация CSS была слабее и даже к 1999 году все еще заметно использовались веб браузеры, не поддерживающие CSS. Интернет-соединения слишком часто были слишком медленными. Java и JavaScript были основной возможностью добиться визуальных эффектов на веб-странице. Java-апплеты, являясь очень мощным инструментом, более сложны в освоении и реализации. Так что JavaScript был тогда в большей мере, чем сейчас ответственен за визуальные эффекты и меньше за техническую сторону - которой больше занимались с помощью технологий со стороны сервера.

Но позже распространение веб браузеров с основательной поддержкой CSS, сначала псевдоклассов .link, .visited, .hover, .active, затем позиционирования фонового изображения, @font-face и некоторых других вытеснило JavaScript из многих визуальных эффектов. Так же, в 2000ых Интернет стал более ориентированным на поисковую оптимизацию. Это способствовало в пользу текста против изображений и представления содержимого с помощью плагинов. Что в свою очередь еще больше распространило CSS технологию, еще больше сокращая область применения JavaScript в сфере визуальных эффектов. Что касается смены изображений, то вместо ролловеров, созданных с помощью JavaScript стали больше использовать CSS ролловеры.

Ныне продолжают существовать случаи, когда удобно применять JavaScript ролловеры, однако в других ситуациях - ролловеры, используемые в меню - CSS ролловеры подходят больше. Так что JavaScript ролловеры в некотором роде представляют собой живое прошлое все ещё среди нас. Так же как выравнивание содержимого страницы по центру с помощью тега table или имитация обращения с границами HTML таблиц через использование атрибутов cellspacing и bgcolor. Устаревшее, но и сейчас вполне работающее.

Общая идея

1. Два изображения загружаются с помощью JavaScript кода в кэш браузера. А такое же, как одно из двух предзагруженных изображений помещается в веб документ HTML тегом img.

2. Когда курсор мыши наводится на изображение, отображается другое предзагруженное изображение. Когда курсор мыши уводится с изображения, отображается изначальное изображение.

Существуют и другие способы создания ролловеров, как с помощью JavaScript, так и других технологий: CSS, VBScript, Java, Flash, некоторых других.


[ 1 ]

А так же в Mozilla 0.6+ и Netscape 3.04+.

[ 2 ]

А так же в Mozilla 0.6+ и Netscape 3.04+.

[ 3 ]

А так же в Mozilla 0.6+ и Netscape 6.0+.


Aliosque subditos et thema

 

JavaScript submit form

 

Обработка формы с помощью JavaScript. Выпадающий список (form + select + несколько option) обрабатывается без использования кнопки submit. Пример: --- Выбрать страницу --- Linux Windows DOS HTML / XHTML. Code: <form action="action.php" method="post"> <select name="page" required="required" onchange="this.form.submit()"> <option value="" selected="selected" disabled="disabled"> --- Выбрать страницу --- </option> <option value="http://www.kompx.com/ru/os/linux-1.htm">Linux</option> <option value="http://www.kompx.com/ru/os/windows-1.htm">Windows</option> <option value="http://www.kompx.com/ru/os/dos-1.htm">DOS</option> </select> <noscript><input type="submit" value="Submit" /></noscript> </form> Когда в выпадающем списке выбирается одна из опций, состояние формы изменяется. Так что происходит событие onchange и запускается JavaScript в onchange: процесс обработки формы и передачи данных инициируется скриптом, а не кликом на кнопку submit, которая отсутствует. Для работы с action формы назначается тот или иной скрипт [ 3 ], выполняемый на сервере. Скрипт принимает то, что отсылает форма и обрабатывает принятое. В данном примере используется PHP скрипт в action.php: <?php if (isset($_POST["page"])) {     header("Location: $_POST[page]");     exit; } else {     echo "Ничего не выбрано"; } $_POST представляет собой массив из переменных, передаваемых данному скрипту методом HTTP POST. Так что $_POST[page] содержит значение атрибута value в одном из option внутри select. То есть, URL. Он передается от формы к PHP скрипту, а скрипт перенаправляет браузер на выбранный URL / страницу. HTML код <noscript><input type="submit" value="Submit" /></noscript> присутствует в форме на случай, если JavaScript отключен. Тогда появится кнопка submit и форма все равно останется пригодной к использованию. [ 1 ] А так же в Netscape 3.04+, Mozilla 0.6+. [ 2 ] А так же в Netscape 3.04+, Mozilla 0.6+. [ 3 ] Если используется CMS, для работы с action формы может применяться один из ее собственных инструментов.

Консольные приложения для Windows. Мультимедиа

 

MPlayer : FFmpeg Медиаплееры появились давно, но их расцвет начался с массовым распространением компьютеров достаточно мощных, что бы проигрывать видеофайлы. Это по времени совпало и с массовым распространением операционных систем и вообще софта с графическим интерфейсом. Однако в природе программы с графическим интерфейсом имеется двойственность: есть комплекс кода, который отвечает за графический интерфейс, за внешний вид и есть - за то, что бы выполнялась та задача, ради которой данное приложение вообще было создано. Оба комплекса потребляют системные ресурсы, их реакция на действия пользователя формирует какой-то объем времени ожидания. И в случаях или при концепциях, когда внешний вид признается менее важным - менее важным до степени отказа или почти отказа от него - появляются, помимо прочих, консольные приложения. Кроме того, разделенность GUI и движка позволяет легче менять графический интерфейс или совершать комплекс автоматизированных действий. Эта схема реализуется и в отношении медиаплееров для Windows. MPlayer, например, в обычном виде представляет собой консольное приложение, быстро запускающееся, имеющее быстрый отклик на действия пользователя, потребляющее системные ресурсы почти полностью на свою непосредственную задачу. И уже на эту основу при желании добавляется тот или иной графический интерфейс для создания, в общем, нового приложения. MPlayer - / home page / Консольный медиаплеер для Windows. Основа для SMPlayer и UMPlayer. Существуют версии для Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, некоторых других *nix систем, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS, Windows. Поддерживаемые форматы видео, аудио, статичных изображений, субтитров и т.д. ( Более полный список видео и аудио кодеков ) MPlayer: "Dead Man" MPlayer: "Sky Captain and the World of Tomorrow" MPlayer: "10,000 BC" MPlayer: "13 Tzameti" MPlayer: "The Draughtsman's Contract" MPlayer: "Женитьба Бальзаминова" FFmpeg - / home page / Набор утилит и библиотек для работы с видео и аудио файлами. Создан в и для Linux, но есть вариант и для Windows. Возможна компиляция под другие операционные системы. Поддерживаемые форматы файлов и кодеки: ( Список ). Так же, VLC медиаплеер может быть запущен с текстовым интерфейсом, с использованием ncurses.