Typically, graphical arrows on websites are used to organize navigation. When you click such a pointer, you go to another page or to another section of the current page. Sometimes some actions are tied to them - highlighting the content of the tag field, launching a JavaScript script, etc. To emphasize that this arrow is an active element, use the "highlight" effect, i.e. changes in appearance on mouseover.
Necessary
Basic knowledge of HTML and CSS languages
Instructions
Step 1
Determine which mechanism for implementing the arrow highlighting is best for you. There are several of them, two simple ones are given in the subsequent steps of this instruction. They both use the CSS hover pseudo-class. When the mouse cursor is over a graphic element (arrow), the style described in this pseudo-class is applied to it, and the rest of the time this style is not active. For both options described below, you can use the same HTML code, but different style descriptions. The arrow code in the page source can be written as follows: The id attribute specifies the link identifier (arrowA), by which the browser will determine which of the style descriptions should be applied to it.
Step 2
The first option will require you to prepare two arrow images - with and without backlit. Save them to files with names such as arrON.
a # arrowA, a # arrowA: visited {
display: block;
height: 30px;
width: 100px;
background: url (arrOFF.gif) no-repeat;
border: 0;
}
a # arrowA: hover {
background: url (arrON.gif) no-repeat;
border: 0;
}
The first block contains the dimensions of the arrow (height: 30px; width: 100px;) - replace them with the dimensions of the prepared arrow images.
Step 3
The second option allows you to get by with only one image file. You need to place both images of the arrow in it - both highlighted and inactive. You can place them side by side, you can one above the other. In the sample code, we will assume that the highlighted arrow is placed under the inactive one, and the file is named arr.
a # arrowA, a # arrowA: visited {
display: block;
width: 100px;
height: 30px;
background: url (arr.gif) no-repeat;
border: 0;
}
a # arrowA: hover {
background: url (arr.gif) no-repeat 31px;
border: 0;
}
Don't forget to resize here too.
