Edit the active-page state for each tab. The correct portion of the image needs to
show when a tab is the active page, and this is done by replacing the rule from
step 6 of the previous exercise with the following four rules, which should be
placed after the rules added in the previous step.
#homePage #homePageLink a:link, #homePage #homePageLink a:visited {
background: url(css-rollover-grid.gif) 0 -120px;
}
#servicesPage #servicesPageLink a:link, #servicesPage
?? #servicesPageLink a:visited {
background: url(css-rollover-grid.gif) -185px -120px;
}
#customerSupportPage #customerSupportPageLink a:link,
?? #customerSupportPage #customerSupportPageLink a:visited {
background: url(css-rollover-grid.gif) -370px -120px;
}
#contactDetailsPage #contactDetailsPageLink a:link,
?? #contactDetailsPage #contactDetailsPageLink a:visited {
background: url(css-rollover-grid.gif) -555px -120px;
}
5. Finally, the two rules for the hover and active states need to be replaced by four
rules each??”one for each tab. Again, negative margin values are used to display the
relevant portion of the background image for each state for each image. Add these
rules after those from the previous step.
#navigation li#homePageLink a:hover {
background: url(css-rollover-grid.gif) 0 -40px;
}
#navigation li#servicesPageLink a:hover {
background: url(css-rollover-grid.gif) -185px -40px;
}
#navigation li#customerSupportPageLink a:hover {
background: url(css-rollover-grid.
Pages:
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313