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

 

JavaScript rollover. Image swap

 

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 ] ): 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.

Renaming files in mc

 

Renaming a file in mc / Midnight Commander: - Select a file --> Shift - F6 --> Edit existing file name into a new one --> Enter Select a file Edit file name The original way of renaming a file - the one mc / Midnight Commander had before "Shift - F6" was implemented - is also still there: - Select a file --> F6 --> Enter a new file name --> Enter Select a file Enter file name And "Esc - 6" may be used instead of "F6": - Select a file --> Esc - 6 --> Enter a new file name --> Enter Select a file Enter file name