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

 

Arachne. Graphical web browser for DOS

 

Jump to: Arachne web browser. Installing and setting up for internet connection via Ethernet Arachne web browser. Installing and setting up for dial-up internet connection Versions : Configuration and use : Download links Arachne is a full-screen graphical web browser for DOS on PC computers. Originally developed by Michael Polák. First release - 22th December 1996. The last Arachne version by Arachne Labs was released on 22th January 2001. Arachne source code was opened in November of 2003 and the subsequent versions are released under GNU GPL license. Arachne is distributed as a software suite containing, besides web browser, built-in e-mail client, FTP, internet connection wizard, WAV files player. More add-ons are available: image viewer, PDF, file managers, mplayer, Telnet client, IRC and more. Arachne supports Windows-1251 and KOI8-R Cyrillic after additional packages are installed. Internet connection is via serial ports (COM) and Ethernet. There are also Arachne for Linux / SVGAlib. Versions GPL versions of Arachne. The main line of Arachne development. Major changes and updates take place within its framework. Maintained by a group of enthusiasts who also develop GPL version for Linux / SVGAlib. Arachne Labs versions. Arachne Labs, xChaos software initially, were the main structure engaged in development of Arachne until 2003, when Arachne source code was opened and the GPL versions of the browser became the main line. The last Arachne Labs version was released on 22th January 2001: Arachne 1.70 Release 3. Ray Andrews version. A GPL Arachne variation. PTS-DOS version. Similar to the corresponding versions of Arachne, but to some extent integrated with the PTS-DOS distribution. DR-WebSpyder. Based on Arachne. Basically - different web browser, for which Arachne is just an ancestor. Later the browser was renamed as Lineo EmBrowser. Configuration and use Arachne web browser was created in DOS and for DOS (the Linux version stands somewhat apart). Therefore, even though Arachne will run under many versions of Windows, Windows XP for instance, it is working under DOS when Arachne qualities are revealed best. Arachne web browser works in all major DOS variants, for example MS-DOS, FreeDOS or PTS-DOS. System requirements are low. The minimum: 80x86 CPU, 500 KB DOS base memory, 1 MB XMS/EMS memory, 512 KB SVGA video, 5 MB HDD space. Although requirements for using maximum screen resolution, maximum color depth are higher. But in this case too they are extremely small by today's standards - 486, better Pentium I computer, 640 KB base memory, 8+ MB XMS/EMS memory, 2+ MB SVGA video. Yet it depends - using 640x480 screen resolution, installing Arachne on RAM disk let to have Arachne running quite well on 386 CPU computer; if only there are enough of RAM and video adapter capabilities. Besides traditional hard disk installation, DOS LIVE CD by Roman Karpach may be used ( www.fdd5-25.net/doslivecd ), where Arachne web browser is among the software present. The characteristics of Arachne web browser installation process make the main settings be set right from the beginning. These settings for the most part are the responsibility of operating system on computers running Windows, Mac OS X or Linux, but in DOS Arachne browser takes care of everything itself.

HTTPS to HTTP redirect for a single page

 

Redirecting a single page with HTTPS to the page with HTTP. Server configuration: Apache + nginx. SSL is enabled for the whole web site, so all pages are served with HTTPS. But there is a need to make just one single page to be with HTTP. Directives for .htaccess file: RewriteEngine On RewriteCond %{HTTP:HTTPS} on [NV] RewriteRule ^(page\.html)$ http://%{HTTP_HOST}/$1 [R=301,L,QSA] HTTPS to HTTP redirect for a single page in detail -- Enable runtime rewriting engine RewriteEngine On -- If HTTPS is present RewriteCond %{HTTP:HTTPS} on [NV] -- Then, when a page name and extension correspond to the search group in parentheses, form for it a URI with HTTP RewriteRule ^(page\.html)$ http://%{HTTP_HOST}/$1 [R=301,L,QSA] Notes RewriteCond %{HTTP:HTTPS} on [NV] is not the only way to detect if HTTPS is present. Moreover, for some server configurations other directives may be more suitable, like RewriteCond %{SERVER_PORT} 443 for example. The point is to find out somehow if HTTPS is on. So it should probably be checked by practice what is going to work in a particular case. QSA is used to keep the existing query string, if there is any, when the replacement URI also contains a query string. So that in the end both query strings are to be combined. More on the subject: http://httpd.apache.org/docs/2.2/rewrite/flags.html#flag_qsa