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

 

Renaming folders in DOS

 

Renaming a folder in DOS by MOVE command: MOVE FOLDER1 FOLDER2 - Renames FOLDER1 into FOLDER2 The method works in Windows command prompt as well. [ 1 ] MS-DOS 6.0+ tested - but it also may happen to work well under other versions of MS-DOS or other DOS'es.

ELinks. Configuration

 

Jump to: ELinks - Text-based or console web browser. Description: features, screenshots, download links. ELinks. Use - How to use ELinks. What ELinks can and what can not, i.e. what may be configured depends on several things. The most common are capability of the console it is run on and support of what was chosen during the compilation process of an ELinks browser source code. Under certain operating systems (Windows for instance) it is easier and more reliable to omit some possible features. The configuration of ELinks 0.12pre2 from Package Database of Zenwalk Linux (originally based on Slackware, still keeping compatibility with its binary packages) is discussed here. It is quite representative in its qualities among other Linux ELinks browser versions for desktop PC computers. User interface of Windows ELinks and that of Linux / some other *nix systems ELinks of comparable versions are the same. If an ELinks package has been compiled without some feature or the console is not capable of something then it just will not be possible to choose the feature in the configuration process; or possible, but it will not work. For example, if this ELinks is compiled without support of 256 colors or your console is not capable of displaying them, then it just will only be possible to choose 16 or "No colors (mono)" in the menu. And the ELinks will work as much well in the rest. The whole configuration of ELinks may be done through the menu of the browser - there is no need to edit config files. Even if some fine-tuning may require editing of elinks.conf or even source code files - but that is not the issue for average use. The menu of ELinks is hidden when it is displaying a web page: To access the menu, press Esc on the keyboard: Configuration options are in "Setup" group: 1 ) "Language" - set a language of ELinks user interface. It is possible to set it to the system language or to several others. System and terminal emulator / console have to be prepared for this change - corresponding localization / internationalization files installed and configured. Choose a language (English in this example): To keep it, press Esc again, then Setup, then Save options, then confirm by clicking OK.