Backlighting of buttons in web pages is usually organized using two images. When you hover the mouse cursor over the corresponding element of the document (link or button), an event is generated, which, in accordance with the instructions written in the CSS language, prompts the browser to change one image to another. When the mouse cursor is moved away from the button, the reverse replacement occurs.
Necessary
Basic knowledge of HTML and CSS languages
Instructions
Step 1
There are several options for implementing such a highlighting mechanism. For any of them, you can use the same HTML code, changing only the corresponding style description. The HTML code of the button may look like this: text on the button Here is the identifier of this page element (id = "btnA") to which the style description will be attached.
Step 2
To implement one of the options, you need to prepare two pictures, one of which shows the button in an inactive state, and the second one with a backlight. They will be used as the background image of the link. The CSS instructions for this button might look like this:
a # btnA, a # btnA: visited {
display: block;
width: 50px;
height: 20px;
background: url (btnA.gif) no-repeat;
border: 0;
}
a # btnA: hover {
background: url (btnA_hover.gif) no-repeat;
border: 0;
}
Here, in the first block, the dimensions of the image depicting the button are indicated (width: 50px; height: 20px;). You need to replace them with the dimensions of your picture. The names of the image files should be changed in the same way: btnA.
Step 3
One alternative is to put both images in one picture. It can be one above the other, or it can be next to each other. It will also be used as a background for the link. Since the button sizes are specified in the button style description, anything that does not fit into them will not be visible. In this case, the instructions placed in the CSS description should, when the mouse cursor is hovering, scroll the background image so that the area with the image of the highlighted button falls into the frame. For this option, the code from the previous step must be changed as follows:
a # btnA, a # btnA: visited {
display: block;
width: 50px;
height: 20px;
background: url (btnA.gif) no-repeat;
border: 0;
}
a # btnA: hover {
background: url (btnA.gif) no-repeat 21px;
border: 0;
}
This assumes that you have placed the images one above the other (highlighted at the bottom) and saved to a file called btnA.gif. The height of the buttons is 20px, the width is 50px - you need to replace these values with your own.
