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 form submit

 

Submitting a form using JavaScript. A dropdown list (form + select + multiple options) is processed without any submit button. Example: --- Select a page --- Linux Windows DOS HTML / XHTML. Code: <form action="action.php" method="post"> <select name="page" required="required" onchange="this.form.submit()"> <option value="" selected="selected" disabled="disabled"> --- Select a page --- </option> <option value="http://www.kompx.com/en/os/linux-1.htm">Linux</option> <option value="http://www.kompx.com/en/os/windows-1.htm">Windows</option> <option value="http://www.kompx.com/en/os/dos-1.htm">DOS</option> </select> <noscript><input type="submit" value="Submit" /></noscript> </form> When an option has been chosen from the dropdown list, the form's state is changed. So the onchange event occurs and JavaScript code in onchange is executed: the process of the form submission in started by the script, not by clicking submit button which is absent. Some server-side script [ 3 ] is meant then to handle the form action. The script is supposed to get what the form sends and have it processed. A PHP script in action.php is used in the example: <?php if (isset($_POST["page"])) {     header("Location: $_POST[page]");     exit; } else {     echo "No options selected"; } $_POST is an array of variables passed to the current script via the HTTP POST method. So $_POST[page] contains the content of the value attribute in a select option. That is, a URL. It is passed from form to PHP script and the script redirects browser to the URL / page selected. HTML code of <noscript><input type="submit" value="Submit" /></noscript> is present in the form as a fallback in case JavaScript happens to be turned off. Then there is a submit button to appear and the form is usable anyway. [ 1 ] As well as Netscape 3.04+, Mozilla 0.6+. [ 2 ] As well as Netscape 3.04+, Mozilla 0.6+. [ 3 ] If a CMS is used, form action may be handled by some of its inbuilt means.

Network setup in DOS. Microsoft Network Client 3.0

 

In order to install Microsoft Network Client 3.0 and set up network in DOS, there have to be several programs at hand: 1. Microsoft Network Client 3.0 [ Download ] 2. NDIS 2.0 driver for Ethernet network card. For example: Realtek RTL8029AS [ Download ]. Drivers for other network cards may be found, for instance, on web sites of Ethernet cards manufacturers. 3. If it is not MS-DOS 6.0+ to be used, QEMM97 [ Download ] Installing Microsoft Network Client 3.0 and setting up network in DOS, step by step: 1. Create a folder, for example C:\DRIVERS\. Put there: a NDIS 2.0 driver for Ethernet network card. 2. Prepare installation floppies of Microsoft Network Client 3.0: DSK3-1.EXE -d A: DSK3-2.EXE -d A: 3. Start setup.exe from the first floppy and begin Microsoft Network Client 3.0 installation. Installation is starting. Press Enter to continue Select folder for Microsoft Network Client 3.0 to be installed to. It may be any or the suggestion of the installer may be left as it is - in the case discussed it is left as it is. Enter Microsoft Network Client 3.0 installer examining the system files Select driver for Ethernet network card. If there is no right driver on the list, choose "*Network adapter not shown on list below ..." Enter This dialogue appears if there was no right driver on the proposed list of Ethernet network card drivers and "*Network adapter not shown on list below ..." has been selected. Specify the path to the folder containing the appropriate driver for the Ethernet network card. In the case discussed it is C:\DRIVERS\, typing it in. Enter Select driver from C:\DRIVERS\ folder specified in the previous step. In the case discussed it is RTL8029AS PCI Ethernet Adapter. Enter Choose to let or not to let Microsoft Network Client 3.0 use more RAM in its work to get the best performance. Any of the two choices is acceptable. For example - let it to. Enter Enter user name of up to 20 characters. It can contain Latin letters, numbers and characters listed. In the case discussed it is "net".