Kompx.com or Compmiscellanea.com

JavaScript rollover. Image swap

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 ].

Example n.1 ( For modern web browsers: Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, [ 3 ] ):

JavaScript rollover. Image swap

HTML / XHTML. Code:

<a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" width="728" height="67" alt="JavaScript rollover. Image swap" /></a>

CSS. Code:

.image {border: 0px;}

JavaScript. Code:

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';

};

Swap image 1 ( out.gif ):

Swap image 2 ( over.gif ):

Example n.2 ( For older web browsers: Internet Explorer 4.0+, Netscape 3.04+, Opera 3.21+ ):

HTML / XHTML. Code:

<a href="javascript-rollover-image-swap.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 rollover. Image swap"></a>

JavaScript. Code:

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';

};

Swap image 1 ( out.gif ):

Swap image 2 ( over.gif ):

Demo page 1 of Example n.2 - JavaScript code in external file - for Internet Explorer 4.0+, Netscape 3.04 - 4.xx, Opera 3.21 - 3.6x: [ Open demo page ] [ Download archive file ]

Demo page 2 of Example n.2 - JavaScript code inside the HTML document (it was used, for instance, for Netscape 3.xx displaying pages from web servers not configured to send the "application/x-javascript" MIME type for .js files) - for Internet Explorer 4.0+, Netscape 3.04 - 4.xx, Opera 3.21 - 3.6x: [ Open demo page ] [ Download archive file ]

JavaScript rollover. Image swap

There were fewer practical client side options in 1990s, than today to make a web page anything beyond simple. CSS was less developed, there were non-CSS web browsers still around even in about 1999. Internet connections were too often too slow. Java and JavaScript were the main way to visual effects on a web page. Java applets being in itself a very powerful tool are more complicated to learn and implement. So JavaScript was then more than now responsible for visual effects and less for technical part - handled more by server side technologies.

But later spread of web browsers with thorough CSS support, first .link, .visited, .hover, .active pseudo-classes, then background image positioning, @font-face and some others pushed JavaScript out of many visual effects areas. Also the Web has become more SEO aware in 2000s: this did a lot in favour of text over images and plug-ins content - which in its turn promoted the CSS case even more, taking some of JavaScript space even more as well. As for rollovers, JavaScript ones began to be often phased out in favour of CSS rollovers.

Now there are still cases when JavaScript rollovers are appropriate, but in other situations - like rollovers used in menus - CSS rollovers are more suitable. So JavaScript rollovers are in a way a living past still among us. Same as centering page content by table tag or table borders without CSS. Oldish, but still fully functional.

The concept :

1. Two images are loaded by a JavaScript code into web browser cache. And an image the same as one of the two preloaded is placed in the web document by img HTML tag.

2. When mouse pointer is moved over the image, the other preloaded one is displayed. When mouse pointer is moved out from the image, the initial one is displayed.

There are also other ways of creating rollovers, both the JavaScript ones and by other technologies: CSS, VBScript, Java, Flash, some others.


[ 1 ]

As well as Mozilla 0.6+ and Netscape 3.04+.

[ 2 ]

As well as Mozilla 0.6+ and Netscape 3.04+.

[ 3 ]

As well as Mozilla 0.6+ and Netscape 6.0+.


Aliosque subditos et thema

 

ELinks. Use

 

Jump to: ELinks - Text-based or console web browser. Description: features, screenshots, download links. ELinks. Configuration - How to configure ELinks. Once started, ELinks allows a user to do almost all it is capable of by means of its menu. So it is only how to start ELinks and how to do several other things as an example that is explained here. 1 ) Starting ELinks - ELinks may be run under a GUI environment (X Windows, MS Windows, etc) or some command-line interface. In the first case a terminal emulator / console must be opened before ELinks is to be started: xterm, rxvt, Win32 console and others: ELinks ( Linux ) - To start ELinks, enter command: elinks - To start ELinks opening a web document from Internet: elinks Web address of a web document - To start ELinks accessing hard disk to browse local folders: elinks file:/// or: elinks / - To start ELinks opening a local folder: elinks file:///home/user1/ or: elinks /home/user1/ - To start ELinks opening a local file: elinks file:///home/user1/document1.htm or: elinks /home/user1/document1.htm ELinks ( Windows ) - To start ELinks, enter command: elinks - To start ELinks opening a web document from Internet: elinks Web address of a web document - To start ELinks accessing hard disk to browse local folders: elinks file:/// - To start ELinks opening a local folder: elinks file://c/home/user1/ - To start ELinks opening a local file: elinks file://c/home/user1/document1.htm 2 ) To access the menu of ELinks: Press Esc on keyboard 3 ) Opening a web document in ELinks already running: Press g on keyboard or Esc --> File --> Go to URL --> [ Enter a web address ] --> Enter 4 ) Going back: Left arrow of Arrow keys on keyboard or Esc --> File --> Go back 5 ) Opening a link in a new tab in background: Shift - t or Esc --> Link --> Open in new tab in background 6 ) Going to the next tab: Shift - > or Esc --> View --> Next tab 7 ) Closing a tab: Press c on keyboard or Esc --> View --> Close tab 8 ) Passing a URI to an external application when running ELinks in a terminal emulator. There are many applications it is possible to pass a URI to, here it is about passing a URI to clipboard.

Windows console applications. Multimedia

 

MPlayer : FFmpeg Media players appeared long ago, but their heyday began with the mass spread of personal computers powerful enough to play video files. This coincided with the mass spread of operating systems and other software with graphical user interface. However, a program with a graphical user interface is dualistic in its nature: there is a code responsible for graphical user interface, for the appearance and there is a code - for performing the task the given application has been created for in the first place. Both code complexes consume system resources, their response time to user actions makes up certain amount of waiting time. And in cases or concepts when appearance is taken as less important - less important to the point of sparing or almost sparing to employ it - console applications, among others, appear. Moreover, the segmentation of the GUI and of the engine makes it easier to change the graphical user interface or perform complex automated operations. The scheme is implemented for media players for Windows as well. MPlayer, for instance, in its usual form is a console application, starting up quickly, having fast response to user actions, consuming system resources almost entirely for its immediate task. And on this basis if desired, one or another graphical interface may be added for creating, all in all, a new application. MPlayer - / home page / Console media player for Windows. Basis for SMPlayer and UMPlayer. There are versions for Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, some other *nix system, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS, Windows. Supported video, audio formats, static images, subtitles, etc. ( List and More extensive list of video and audio codecs ). MPlayer: "Dead Man" MPlayer: "Sky Captain and the World of Tomorrow" MPlayer: "10,000 BC" MPlayer: "13 Tzameti" MPlayer: "The Draughtsman's Contract" MPlayer: "Balzaminov's Marriage" FFmpeg - / home page / Pack of utilities and libraries for work with video and audio files. Created in and for Linux, but there is a Windows variant. Source code may be compiled for some other operating systems. Supported file formats and codecs: ( List ). Also, VLC media player can be run in text mode, ncurses using.