Using Style Sheets

We can use the rollover technique in a completely different way. This time, no image swap is necessary, only a simple image shift when the link is flown over or clicked on.

A three-position rollover using style sheets

Our image is surrounded with borders giving it a 3D appearance. We will move the image with a clever change in the border thickness according to the event.

 5: <style>
 6: <!--
 7: .mouseBeOffMe {
 8: border-top:    10px solid #AAAAAA;
 9: border-bottom: 10px solid #AAAAAA;
10: border-left:   6px solid  #444444;
11: border-right:  10px solid #444444;
12: }
13: .mouseBeOnMe {
14: border-top:    6px solid #AAAAAA;
15: border-bottom: 14px solid #AAAAAA;
16: border-left:   10px solid #444444;
17: border-right:  6px solid #444444;
18: }
19: .mouseBeDown {
20: border-top:    13px  solid #AAAAAA;
21: border-bottom: 7px   solid #AAAAAA;
22: border-left:   10px  solid #444444;
23: border-right:  6px   solid #444444;
24: }
25: .mouseBeUp {
26: border-top:    10px  solid #AAAAAA;
27: border-bottom: 10px  solid #AAAAAA;
28: border-left:   10px  solid #444444;
29: border-right:  6px   solid #444444;
30: }
31: //-->
32: </style>

[...]

95: <A HREF="#"
96:    onmouseover = "img4.className='mouseBeOnMe'"
97:    onmousedown = "img4.className='mouseBeDown'"
98:    onmouseup = "img4.className='mouseBeUp'"
99:    onmouseout = "img4.className='mouseBeOffMe'">
100: <img src = "img3.gif" border = "0" name="img4"
101: class = "mouseBeOffMe">A three-position rollover
102: </A>

Borders are defined in a style sheet (lines 5 to 32). Four different setups are necessary to create the animation: normal status (mouseBeOffMe), focus status (mouseBeOnMe), clicked status (mouseBeDown) and released status (mouseBeUp). For each status, we define the border thickness of the four sides of the image (10px denotes 10 pixels, for instance) together with the colour (#AAAAAA for light grey, #444444 for a deep grey).

The rest of the process is as simple as in the previous unit. For each event, we change the style by modifying the value of the image className attribute (lines 96 to 99). The two new events introduced are for the mouse click on the associated link (onmousedown) and for the mouse button release after the click (onmouseup).