Kompx.com or Compmiscellanea.com

CSS rollover. Changing background image position

Windows : Internet Explorer 5.01+, Firefox 1.0+, Google Chrome, Opera 7.0+, Safari 3.1+, SeaMonkey 1.0+, [ 1 ].

Linux : Firefox 1.0+, Chromium, Opera 7.0+, SeaMonkey 1.0+, hv3, [ 2 ].

CSS rollover. Changing background image position. Example:

HTML / XHTML. Code:

<div class="example">

<a href="css-rollover-changing-background-image-position.htm">CSS rollover. Changing background image position</a>

</div>

CSS. Code:

.example {position: relative; top: 0px; left: 0px; height: auto; width: 100%; white-space: nowrap; padding: 10px 20px 10px 20px;}

.example a {height: 35px; width: 100%; font-size: 24px; line-height: 35px; color: #006; text-decoration: none; text-align: right; display: block; background: url("bgimg.png") no-repeat left top;}

.example a:hover {color: #c00; background: url("bgimg.png") no-repeat left bottom;}

Background image:

CSS rollover

Changing background image position

The concept :

1. A link with width and height declared explicitly (here it is 100% and 35px), plus display: block - this makes a 100% by 35px rectangle, the whole area of which is a hyperlink. Line-height is declared explicitly as well, equal to the rectangle's height (35px here) - it helps to have the same vertical alignment of the link text across various web browsers. Text-align: right is added to move the link text to the right in the the link block.

(The link block area is highlighted in green to make it more obvious)

2. An image for the link block area background with height equal to two heights of the link block area is created. The image has two parts, the upper one and the lower one, each of height equal to the height of the link block area; here it is 35px.

3. The background image URL is added to the background CSS property of the link. The CSS background property values of no-repeat and left position the background image to the left of the link block area. The CSS background property value of top places the upper part of the background image on the same level as the link text.

4. The background image URL is added to background CSS property of the link's :hover pseudo-class. The CSS background property values of no-repeat and left of the link's :hover pseudo-class position the background image to the left of the link block area. The CSS background property value of bottom of the link's :hover pseudo-class places the lower part of the background image on the same level as the link text, when a user moves the mouse pointer over the link block area.

So, when there is no mouse pointer over the link block area, the upper part of the background image is placed on the same level as the link text. When there is a mouse pointer moved over the link block area, the lower part of the background image gets on the same level as the link text. Mouse out - the upper part is displayed, mouse over - the lower part shows up. And no need to preload any additional images.

This CSS rollover link block may be used for creating groups like menus - put into div's, li's or td's or other similar HTML elements.

There are also other ways of creating rollovers, both the CSS ones and by other technologies: JavaScript, VBScript, Java, Flash, some others.


[ 1 ]

As well as Mozilla 1.0+, Netscape 7.01+. Netscape 6.0+, if CSS class or id names without underscores in them used.

[ 2 ]

As well as Mozilla 1.0+, Netscape 7.01+. Netscape 6.0+, if CSS class or id names without underscores in them used.


Aliosque subditos et thema

 

Lightweight web browsers for Linux

 

Netsurf : Hv3 : Dillo : Links2 Nowadays the real lightweight web browsers are those without JavaScript and Flash support or with a very limited one. Because a web browser even with the lightest interface becomes heavyweight working with the modern internet crammed with scripts and multimedia. These browsers are not numerous and some of them are moving towards getting JavaScript support - i.e. towards dropping out of the "Lightweight web browsers" category. Lightweight web browsers may be more advanced - with CSS support. Or less - no CSS support or close to that. Netsurf - / home page / Currently the most advanced lightweight web browser for Linux. CSS support is quite solid. Good support of HTML. Feeble support for JavaScript - may be disabled by default. There is a version of Netsurf for *nix systems that can be run without X, using framebuffer of graphic adapter. Created initially for RISC OS and only later ported to Linux. There are also versions for other *nix systems, for AmigaOS, AmigaOS 4, Atari OS, BeOS/Haiku, Mac OS X, MorphOS. ( More about Netsurf features ) NetSurf 3.0 on PuppyLinux 5.2.8: netsurf-browser.org NetSurf 3.0 on PuppyLinux 5.2.8: w3schools.com/browsers/browsers_stats.asp NetSurf 3.0 on PuppyLinux 5.2.8: en.wikipedia.org/wiki/Netsurf NetSurf 3.0 on PuppyLinux 5.2.8: ebay.com NetSurf 3.0 on PuppyLinux 5.2.8: kompx.com/en/web-browsers-for-dos.htm NetSurf 3.0 on PuppyLinux 5.2.8: twitter.com Hv3 - / home page / Less advanced lightweight web browser for Linux, but still having considerable CSS support. Weak JavaScript / ECMAScript support. Quite good HTML support.

Windows console applications. Text editors

 

FTE : JED : MinEd : Nano : MS-DOS Editor Initially, all text editors did not have a graphical interface. And work with text almost from the outset was one of the main types of user activity on computer. With the invention and spread of low-level and especially high-level programming languages, text editor has become an important working tool of professionals. Then, other users had to use text editors for their daily tasks. So by the time the programs with GUI started to be wide spread, the concept of text editor was already well developed, there were mature, well-designed and implemented specimens of applications for text editing without graphical user interface. Why the text-based versions coexisted with GUI-based ones for very long and still graphical user interface programs have not replaced the console / text-based applications. While the average user is not aware of their existence, he / she does not know the power of vim or emacs, often even MS-DOS Editor, built in all the 32-bit versions of Windows is unknown, none the less, console text editors continue to exist and be developed. As it is the case with the text web browsers, the main line of text-based text editors development is in Linux and other *nix systems world. But under Windows as well, there are several interesting applications. FTE - / home page / Console text editor. Version for Linux, some other *nix systems, DOS, Windows, OS/2. Syntax highlighting support for: C, C++, Java, Perl, Sh, Pascal, SQL, Assembly, PHP, Python, REXX, Ada, Fortran, IDL, LinuxDoc, TeX, TeXInfo, HTML, etc. ASCII table. Various facilities for coding and errors handling. Copying words, characters or text blocks is in the same mode and by the same keyboard shortcuts (except Ctrl+A) as in major Windows text editors with graphical user interface - plus, there may be other variations. FTE 0.49.13: Open file FTE 0.49.13: A submenu FTE 0.49.13: Settings FTE 0.49.13: Opened .php file FTE 0.49.13: Opened .htm file FTE 0.49.13: Opened C code JED - / home page / Console text editor. Version for Linux, some other *nix systems, QNX, OS/2, BeOS, OpenVMS, DOS, Windows. Syntax highlighting support for: C, C++, FORTRAN, TeX, HTML, SH, python, IDL, DCL, NROFF, etc. JED can emulate Emacs, EDT, Wordstar, Borland, Brief. C-like S-Lang language for extra settings possibilities and extensions.