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

 

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>

Lynx. Web data extraction

 

Aside from browsing / displaying web pages, Lynx can dump the formatted text of the content of a web document or its HTML source to standard output. And that then may be processed by means of some tools present in Linux, like gawk, Perl, sed, grep, etc. Some examples: Dealing with external links Count number of external links Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http:", sends the result further again to grep that picks lines not starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (external links of the web page) out of it, wc counts the number of links extracted and displays it: lynx -dump -listonly "elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | wc -l Find external links and save them to a file Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http:", sends the result further again to grep that picks lines not starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (external links of the web page) out of it and saves them to a file: lynx -dump -listonly "elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" > file.txt Find external links, omit duplicate entries and save the output to a file Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http:", sends the result further again to grep that picks lines not starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (external links of the web page) out of it, sort sorts them and uniq deletes duplicate entries. The output is saved to a file: lynx -dump -listonly "elinks.htm" | grep -o "http:.*" | grep -E -v "http://compmiscellanea.com|http://www.compmiscellanea.com" | sort | uniq > file.txt Dealing with internal links Count number of internal links Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (internal links), wc counts the number of links extracted and displays it: lynx -dump -listonly "elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" | wc -l Find internal links and save them to a file Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (internal links) and saves them to a file: lynx -dump -listonly "elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" > file.txt Find internal links, omit duplicate entries and save the output to a file Lynx sends list of links from the content of a web page to standard output. Grep looks only for lines starting with "http://compmiscellanea.com" and "http://www.compmiscellanea.com" (internal links), sort sorts them and uniq deletes duplicate entries. The output is saved to a file: lynx -dump -listonly "elinks.htm" | grep -E -o "http://compmiscellanea.com.*|http://www.compmiscellanea.com.*" | sort | uniq > file.txt The reason behind using "lynx -dump -listonly" instead of just "lynx -dump" is that there may be web pages with plain text strings looking like links (containing "http://" for instance) in the text of the content, as it is the case with http://www.kompx.com/en/elinks.htm page.