As per step 8 of the previous exercise, the active
state graphic can be set. In this case, this is done by displaying the fourth state in
the rollover image via the following rule:
#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
?? #servicesPage #servicesPageLink a:link, #servicesPage
?? #servicesPageLink a:visited, #customerSupportPage
?? #customerSupportPageLink a:link, #customerSupportPage
?? #customerSupportPageLink a:visited, #contactDetailsPage
?? #contactDetailsPageLink a:link, #contactDetailsPage
?? #contactDetailsPageLink a:visited {
background: url(css-tab-rollover-image.gif) 0 -120px;
}
Again, you can change the id value of the body element to one of the other list
item id values to change the active section link.
Required files The files from the graphical-navigation-bar folder and
css-rollover-grid.gif from the navigation-images folder in
the chapter 5 folder.
What you??™ll learn How to amend the previous exercise, in order to create a different
tab for each link??”still by using a single image.
Completed files The graphical-navigation-bar-grid folder in the chapter 5
folder.
Using a grid image for multiple link styles and colors
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
214
Taking the previous exercise??™s completed files as a starting point, along with
css-rollover-grid.gif, which will be used as the rollover image, you??™re now going to
have a different tab for each link.
Pages:
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311