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

 

Internet Explorer 3. Screenshots 1

 

Internet Explorer 3 running under Windows 7 (32-bit). Screenshots 1. Internet Explorer 3: windows.microsoft.com/en-US/windows/upgrade-your-browser Internet Explorer 3: w3schools.com/browsers/browsers_stats.asp Internet Explorer 3: en.wikipedia.org/wiki/Internet_Explorer_3 Internet Explorer 3: ebay.com Internet Explorer 3: kompx.com/en/netscape-3-screenshots-1.htm Internet Explorer 3: twitter.com Download Internet Explorer 3: a pack, containing 3.0, 4.01, 5.01, 5.5, 6.0 versions of Internet Explorer. During installation process it is possible to select which one version only to install or install several or install all. It is very much probable that all versions, except Internet Explorer 3, will not work even under 32-bit Windows 7. So if you would like to try all older Internet Explorers you should have Windows XP or earlier installed. Internet Explorer 3 functions under 32-bit Windows 7 pretty well though.

VBScript rollover. Image swap

 

VBScript rollover, using image swap. Two examples: several ways of applying VBScript in a web page. VBScript rollover Example 1 HTML / XHTML. Code: <a href="#" onmouseover="onMouse_over()" onmouseout="onMouse_out()"><img src="out.gif" id="rollover" alt="" /></a> VBScript. Code (<script> tag including): <script type="text/vbscript"> Sub onMouse_over() rollover.src='over.gif' End Sub Sub onMouse_out() rollover.src='out.gif' End Sub </script> Note: an external VBScript script file may also be used. The code itself is the same (without <script> tag pair, surely). The file is linked to page very much like a JavaScript file would be: <script type="text/vbscript" src="vbscript.vbs"></script> VBScript rollover Example 2 HTML / XHTML. Code: <a href="#"><img src="out.gif" id="rollover2" alt="" /></a> VBScript. Code (<script> tag including): <script type="text/vbscript" event="OnMouseOver" for="rollover2"> rollover.src='over.gif' </script> <script type="text/vbscript" event="OnMouseOut" for="rollover2"> rollover.src='out.gif' </script>