• A single image for a menu with multiple links

Each file that must be loaded in the page means a request to the server and a waiting for response, so, if you have a menu with 5 links with images, to make the page loads faster, it is better to use a single image file to style the links, not 15 files (5 * 3).
This tutorial shows you how to style link buttons using a Single Image and CSS, for all the three conditions of a button /link: normal, hover, and active (when it is clicked). Also, how to use a single image file for all the links of a menu.

It is simple, the idea is to have the pictures for the 3 conditions of the button symmetrically positioned on the image, vertically: top, center, bottom; or horisontally: left, center, right. It is indicated to have the height of image (or width, deppends on how you arrange the pictures, vertically or horisontally) to can be divided exactly to 3.
Then, in CSS set the width and height of the link the same size as the width and height of the button in the image.


• If the conditions of the button (for normal, hover, active) are vertically positioned in the image, like this:
vertical image button
Set the CSS property background-position with these pairs of values: 0, 0; 0, 50%; and 0, 100% (or: top, center, bottom); for each condition (normal, hover, active). Using percentage values​​, provides a better control of positioning.
- Here's an example (the image width is 125 pixels, the height is 120 pixels; with the buttons drawed vertically. The height of the link /button is 40px):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example link /button using single image and CSS</title>
<style type="text/css"><!--
#addnew {
  width: 125px;
  height: 40px;
  display: block;
  background: url('button_img1.gif');
  background-position: 0 0;
  background-repeat: no-repeat;
  border: none;
  text-indent: -9999px;       /* To not show the text-link */
}

/* When the mouse-cursor is over the button */
#addnew:hover {
  background-position: 0 50%;
}

/* When the the button /link is clicked */
#addnew:active {
  background-position: 0 100%;
}
//-->
</style>
</head>
<body>

<a href="http://coursesweb.net/" title="Web Programming Courses" id="addnew">CoursesWeb.net</a>

</body>
</html>
Demo (position the mouse over the button, then keep the button clicked to see the "active" condition):
CoursesWeb.net

• If the conditions of the button (for normal, hover, active) are horisontally positioned in the image, like this:
horisontal image button
- Set the CSS property background-position with these values: 0, 0; 50% 0; and 100% 0 (or: left, center, right); for each condition (normal, hover, active).
- Here's an example (with the buttons drawn horizontally):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example link /button using single image and CSS</title>
<style type="text/css"><!--
#addnew {
  width: 125px;
  height: 40px;
  display: block;
  background: url('button_img2.gif');
  background-position: 0 0;
  background-repeat: no-repeat;
	text-indent: -9999px;       /* To not show the text-link */
}

/* When the mouse-cursor is over the button */
#addnew:hover {
  background-position: 50% 0;
}

/* When the the button /link is clicked */
#addnew:active {
  background-position: 100% 0;
}
//-->
</style>
</head>
<body>

<a href="http://www.marplo.net/" title="Courses Games Anime" id="addnew">MarPlo.net</a>

</body>
</html>
Demo:
MarPlo.net

A single image for a menu with multiple links

In the same way you can use a single image to style a menu with multiple links. The trick is to draw the buttons symmetrically in the image, then to define the CSS background-position property according to the position of the buttons in the image, using percentages representing the distance from the upper-left corner, the pair of values: left, top (it can be needed to test various values till you get the best display of each buttons). Using percentage values​​, provides a better control of positioning.
- Here's an example, a meniu with 4 links, using this image:
image for buttons
<style type="text/css"><!--
 /* Sets the image for buttons in links and common properties for all links in #menu */
#menu a {
  width: 125px;
  height: 40px;
  display: block;
  background: url('buttons.gif');
  background-repeat: no-repeat;
  text-indent: -9999px;       /* To not show the text-link */
}

 /* The button from image for First link */
#menu #addnew {
  background-position: 0 0;
}
 /* First link hover */
#menu #addnew:hover {
  background-position: 48% 0;
}
 /* First link clicked */
#menu #addnew:active {
  background-position: 100% 0;
}

 /* The button from image for Second link */
#menu #delete {
  background-position: 0 32%;
}
 /* Second link hover */
#menu #delete:hover {
  background-position: 48% 32%;
}
 /* Second link clicked */
#menu #delete:active {
  background-position: 100% 32%;
}

 /* The button from image for Third link */
#menu #accept {
  background-position: 0 66%;
}
 /* Third link hover */
#menu #accept:hover {
  background-position: 48% 66%;
}
 /* Third link clicked */
#menu #accept:active {
  background-position: 100% 66%;
}

 /* The button from image for Fourth link */
#menu #cancel {
  background-position: 0 99%;
}
 /* Fourth link hover */
#menu #cancel:hover {
  background-position: 48% 99%;
}
 /* Fourth link clicked */
#menu #cancel:active {
  background-position: 100% 99%;
}
//-->
</style>

<nav id="menu">
 <a href="#" title="Add New" id="addnew">Add New</a>
 <a href="#" title="Delete" id="delete">Delete</a>
 <a href="#" title="Accept" id="accept">Accept</a>
 <a href="#" title="Cancel" id="cancel">Cancel</a>
</nav>
Demo (position the mouse over the button, then keep the button clicked to see the "active" condition):

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food = array("fruits" => array("banana", "apple"), "veggie" => array("collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
Styling link buttons using a Single Image and CSS

Last accessed pages

  1. The Rise Of Atlantis (344)
  2. Mystic India Pop (907)
  3. Puzzle Games (2378)
  4. Svetlograd Zuma (1401)
  5. Zuma Deluxe (2845)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (46193)
  2. Read Excel file data in PHP - PhpExcelReader (34685)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (34542)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (31135)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (28363)