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


Text-based web browsers for Linux


Lynx : Links : ELinks : W3m : Netrik : Retawq : Line mode browser When general public Linux distributions came around, web browsing was quite young, but with some way behind it. There were several web browsers already, many of them ported gradually to Linux. Some text-based web browsers were in the first wave. After a while Linux became the main habitat of text-based browsers, where most of them are developed and used. Even if these text-based web browsers are mostly intended not just for Linux, but for various other *nix systems as well. And there are also their ports to plenty of other operating systems for most various platforms. Lynx - / home page / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, DOS, Windows, BeOS, MINIX, QNX, AmigaOS, OpenVMS and classic Mac OS. HTML ( More 1 ) ( More 2 ) Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: lynx.isc.org Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: w3schools.com/browsers/browsers_stats.asp Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: en.wikipedia.org/wiki/Lynx_(web_browser) Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: ebay.com Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: kompx.com/en/elinks.htm Lynx 2.8.7rel.1 in GNOME Terminal 2.32.1 on Zenwalk Linux: twitter.com Links - / home page 1 : home page 2 / Text-based web browser. Versions for Linux, FreeBSD, Mac OS X, some other *nix systems, BeOS, Haiku, OS/2, DOS, Windows.

Windows console applications. Multimedia


MPlayer : FFmpeg Media players appeared long ago, but their heyday began with the mass spread of personal computers powerful enough to play video files. This coincided with the mass spread of operating systems and other software with graphical user interface. However, a program with a graphical user interface is dualistic in its nature: there is a code responsible for graphical user interface, for the appearance and there is a code - for performing the task the given application has been created for in the first place. Both code complexes consume system resources, their response time to user actions makes up certain amount of waiting time. And in cases or concepts when appearance is taken as less important - less important to the point of sparing or almost sparing to employ it - console applications, among others, appear. Moreover, the segmentation of the GUI and of the engine makes it easier to change the graphical user interface or perform complex automated operations. The scheme is implemented for media players for Windows as well. MPlayer, for instance, in its usual form is a console application, starting up quickly, having fast response to user actions, consuming system resources almost entirely for its immediate task. And on this basis if desired, one or another graphical interface may be added for creating, all in all, a new application. MPlayer - / home page / Console media player for Windows. Basis for SMPlayer and UMPlayer. There are versions for Linux, FreeBSD, NetBSD, OpenBSD, Apple Darwin, Mac OS X, QNX, OpenSolaris/Solaris, Irix, HP-UX, AIX, some other *nix system, BeOS, Syllable, AmigaOS, AROS, MorphOS, DOS, Windows. Supported video, audio formats, static images, subtitles, etc. ( List and More extensive list of video and audio codecs ). MPlayer: "Dead Man" MPlayer: "Sky Captain and the World of Tomorrow" MPlayer: "10,000 BC" MPlayer: "13 Tzameti" MPlayer: "The Draughtsman's Contract" MPlayer: "Balzaminov's Marriage" FFmpeg - / home page / Pack of utilities and libraries for work with video and audio files. Created in and for Linux, but there is a Windows variant. Source code may be compiled for some other operating systems. Supported file formats and codecs: ( List ). Also, VLC media player can be run in text mode, ncurses using.