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


CSS. Target Firefox only


CSS targeting Firefox web browser only: This text is red in Firefox HTML / XHTML. Code: <p>This text is red in Firefox</p> CSS. Code: @-moz-document url-prefix() {p {color: #f00;}} Unlike the method of styling elements for Opera browser only, it is essentially a hack - since the rule originally is intended for a different purpose. But lack of support in browsers other than Firefox allows to isolate code for use by Firefox web browser only. [ 1 ] Other browsers with Gecko web browser engine, like SeaMonkey 1.0+ or older Netscape 9.0, also support the hack. [ 2 ] Various versions of Internet Explorer, Google Chrome, Opera, Safari react to the hack as they are meant to - these browsers ignore the whole code of the Firefox specific hack. [ 3 ] There is also one more browser where text gets red - ELinks, an advanced text-based web browser with some support for CSS.

Unzip multiple files. Linux


Unzip multiple zip files into one directory by Linux command line unzip. Contrary to possible expectations, "unzip *.zip" is not going to work, *.zip should be put into quotes: unzip "*.zip" There may be files with the same names in these archives. To avoid overwriting: unzip -B "*.zip" "Unzip -B" makes unzip to overwrite duplicates during extraction process, but saving a backup copy of each overwritten file. The names for these backup copy files are created by adding tilde ("~") at the end of the original names of the files. If a file extension is present, then "~" is added after it. If that is not enough, unique sequence number (up to 5 digits) is appended after the "~". "Unzip -B" is not too practical. For example, since when the sequence number range for numbered backup files gets exhausted (99999, or 65535 for 16-bit systems), the backup file with the maximum sequence number is deleted and replaced by the new backup version without notice ( More on the subject ). The number of files in an archive may not be always known in advance or may be more than possible sequence number range, so "Unzip -B" is not a great choice. Renaming duplicate files by adding "~" at the end of their names, after the extension, is not too convenient either. But another built-in option is even worse. If the "-B" modifier is not used, each time a file with same name as there already unpacked is being extracted, unzip asks "replace example.txt? [y]es, [n]o, [A]ll, [N]one, [r]ename:". And each time "r" must be hit, then a new name has to be input. So some bash or another script solving the problem should probably be prepared and used instead.