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:
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):
<style>
#addnew {
width: 125px;
height: 40px;
display: block;
background: url('css/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>
<h4>Example link /button using single image and CSS</h4>
<p>The states of button use this image:
<img src='css/button_img1.gif' alt='vertical image button' width='125' height='120' /><br><br>
- Position the mouse over the button, then keep the button clicked to see the 'active' condition</p>
<a href='https://coursesweb.net/' title='Web Programming Courses' id='addnew'>CoursesWeb.net</a>
- 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):
<style>
#addnew {
width: 125px;
height: 40px;
display: block;
background: url('css/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>
<h4>Example link /button using single image and CSS</h4>
<p>The states of button use this image:
<img src='css/button_img2.gif' alt='vertical image button' width='464' height='40' /><br><br>
- Position the mouse over the button, then keep the button clicked to see the 'active' condition</p>
<a href='https://coursesweb.net/' title='Web Programming Courses' id='addnew'>CoursesWeb.net</a>
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 CSSbackground-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:
<style>
/* 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('css/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>
<h4>Example single image for multiple buttons</h4>
<p> - Position the mouse over the button, then keep the button clicked to see the 'active' condition</p>
<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>