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

 

Features : Configuration : Use : Screenshots : Download links ELinks is an effort to create an advanced text-based web browser. It started as a fork based on the code of Links browser. Aiming first to try and realize several features more or less weak / absent in Links. Hence "E" in "ELinks" - "Experimental" [Links]. The success of the effort made it to be understood as "Extended" or "Enhanced". There was a crossroad at the point when Links browser achieved certain level of completeness, surpassing in some areas then the most advanced text mode web browser, Lynx: to move forward into displaying graphics and further beyond pure text or to enhance text-based web surfing experience beyond boundaries reached first by Lynx and then Links browsers - but still keeping it in text mode. The first course resulted into a Links version capable of displaying graphic content of web pages - Links2. The second one is ELinks web browser. Lynx was and is a very mature software in its kind. Its authors conceived and realized a quite elaborate concept of web surfing in text mode with specific abstractions and conventions, which aided to overcome many restrictions and shortages of text-based surfing and created an experience, a world so definitely different from rapidly expanding graphical web. But with the time HTML and hardware moved forward, spread of scripting languages took place, the whole world of presenting, finding and consuming information advanced. New possibilities appeared. Many of them were realized in Links web browser, but then next shift in information visual presentation in web documents - from more of HTML to more of CSS - made new roads open; even still keeping it to be in text mode. And that is where ELinks tries to come: colors in enabled consoles, some CSS positioning and even beginning of JavaScript / ECMAScript support. Technical part of networking (like SSL support) and various text encodings support were pretty strong in Links browser already, but ELinks enhanced some features and made others to be more worked out. ELinks moved forward the concept of text mode web browser, making ELinks the most advanced example of it. Although Lynx still keeps positions pretty strongly. Its concept of text mode web surfing even if being simplifying, bringing different approach to information presentation and handling rather than trying to be resembling to graphical web browsers environment - works quite well. Web documents become more and more complicated in realization and (while having all the inevitable restrictions of text mode web browsing) to follow a different way of handling it is quite competitive to trying to be like mainstream, graphic full featured web browsers of desktop computers. It is like this dilemma for smaller screen mobile devices browsers: to try and imitate full sized display computers or to transform web document and make it corresponding to the characteristics of the environment. Text-based web browsers are used mostly on computers with more or less large displays, so there are less of dimensional restrictions and more temptations: Lynx - to stay restrained, ELinks - to extend it. Features Text-based web browser. Versions for Linux, other *nix systems, Windows, DOS, OS/2, BeOS and some others. HTML ( tables and frames including ). Meagre support for CSS and JavaScript ( More ). Support for 16, 88 or 256 colors palette in capable terminal emulators / consoles. Tabbed browsing, background download with queuing. Mouse support. Editing of text boxes / forms in web pages in external text editor. Shortcuts for URLs. Scripting in Perl, Lua, Guile, Ruby. Passing URI of a web page in ELinks or URI of a link in a web page in ELinks to external applications: from clipboard app (to copy URI and paste it some place else) to other web browser, etc. Control over how HTML of the surfed web pages is rendered: like display frames or not. Bookmarks. And More. HTTP and Proxy authentication. Persistent HTTP cookies. SSL. http, https, ftp, fsp, IPv4, IPv6 and experimentally BitTorrent, gopher, nntp protocols. Configuration Go to "ELinks.

Arachne web browser. Installing and setting up for dial-up internet connection

 

A : Installing Arachne web browser on a disk created in RAM - Arachne runs the fastest this way. RAM size should allow for a RAM disk of 6 MB or more. In order to install and set up Arachne web browser for dial-up internet connection, there have to be several programs at hand: 1. Arachne web browser [ Download ] 2. If Arachne web browser is to be used for surfing web pages with character encoding other than Latin for West European languages, visit www.glennmcc.org/apm/ to find available character set packages and download the necessary one. 3. Mouse driver, mouse.com for instance [ Download ] 4. Archivers. For example, PKZIP [ Download ] and PKUNZIP [ Download ] 5. If it is not MS-DOS 6.0+ to be used, QEMM97 [ Download ] 6. If it is not MS-DOS 6.0+ to be used, TDSK [ Download ] Installing and setting up Arachne web browser, step by step: 1. Create a RAM disk. Which drive letter will be assigned to it comes from the assumption that A: and B: go to floppy drives (even if there is only one, both letters will be reserved anyway), C: goes to the first active primary MS-DOS partition on the first physical hard disk. If there are more disks, then there will be as many letters used consecutively as to name them all. Unless there are no devices installed using DRIVER.SYS or similar drivers, the next drive letter will be assigned to the RAM disk. In order to be sure, after having the relevant string for making RAM disk added to CONFIG.SYS (See below), computer could be restarted and what letter is assigned to the RAM disk checked by experiment. In this case, it is E: Depending on RAM size it needs to be decided how many megabytes can be reserved for RAM disk. Basically, the more the better. Since, for instance, web browser cache is going to swell during prolonged and intensive use within a session. In this example the RAM disk is 12 000 KB. The maximum size for RAMDRIVE.SYS MS-DOS driver is 32 767 KB, the one of TDSK - 64 MB. In order to create such a disk, the string has to be added somewhere in the middle of CONFIG.SYS as follows: DEVICE=C:\DOS\RAMDRIVE.SYS 12000 512 512 /E 2. Create a folder, for example C:\DRIVERS\. Put there a mouse driver, for instance mouse.com 3. Add a string starting mouse driver to AUTOEXEC.BAT. Specify there the full path to the driver, may be any: LH C:\DRIVERS\MOUSE.COM 4. Run MemMaker or OPTIMIZE from QEMM97 to optimize base memory management. If it is MemMaker, press Enter at any suggestion - MemMaker will handle it itself. Computer is going to restart several times, each time MemMaker will be re-running - again nothing, just Enter, is a safe choice. If it is QEMM97 (specifically OPTIMIZE), then there is going to be several restarts too and each time just pressing Enter is OK. 5. Start installation of Arachne web browser on RAM disk. In the case discussed it is E: A195GPL.EXE Press Y to continue: Press N to specify the path to the folder Arachne web browser is to be installed in: Specify the path to the folder Arachne web browser is to be installed in. In the case discussed it is E:\ARACHNE\.