1. Creating Image Based Rollovers with CSS Mike Takahashi Office of Instructional Development

2. The “old” way Rollover effects were done using JavaScript and the “preload” command. Multiple separate images for each rollover had to be downloaded separately and took time.

3. The “better” way using CSS The Pixy Method  Works by using multiple image states in one single image and setting the CSS background-position property accordingly. This makes dynamic changes faster and requires no preload or JavaScript! We will be using this as a basis for our image-based rollovers.

4. Benefits From: http://wellstyled.com/css-nopreload-rollovers.htmlhttp://wellstyled.com/css-nopreload-rollovers.html Just one image is used. No preload is needed. State switching is as fast as possible (moving background position is much faster than replacing background image). Works in every CSS2 capable browser (IE5+, Firefox, Opera, Safari, etc.)

5. Create Your Image Create your image states as one image Here we have 2 states. The bottom is for the hover state and the top is for the normal state.

6. HTML and CSS Create your HTML code: Home Web Design Plone Print Photography Contact

7. HTML and CSS Creating a list will still allow for your page to work if CSS is disable.

8. CSS #nav { position: absolute; top: 55px; left: 290px; } #nav ul { position: relative; width: 480px; margin: 0; padding-left: 0; } #nav ul, #nav a:hover, #nav a.selected { background-image: url(nav.gif); background-repeat: no-repeat; height: 30px; } #nav li { position: absolute; list-style: none; } #nav li, #nav a { height: 30px; display: block; } /* Hides the HTML text and lets the rollover image show as the background image */ li span { display: none; }

9. CSS /* Width controls width of each text image. Top refers to position that is relative to nav.gif */ #navItem1, #navItem1 a { top: 0px; left: 0px; width: 44px; } #navItem1 a:hover, #navItem1 a.selected { background-position: 0px -28px; } #navItem2, #navItem2 a { top: 0px; left: 58px; width: 86px; } #navItem2 a:hover, #navItem2 a.selected { background-position: -58px -28px; } #navItem3, #navItem3 a { top: 0px; left: 152px; width: 77px; } #navItem3 a:hover, #navItem3 a.selected { background-position: -152px -28px; } #navItem4, #navItem4 a { top: 0px; left: 236px; width: 48px; } #navItem4 a:hover, #navItem4 a.selected { background-position: -236px -28px; } #navItem5, #navItem5 a { top: 0px; left: 295px; width: 105px; } #navItem5 a:hover, #navItem5 a.selected { background-position: -295px -28px; } #navItem6, #navItem6 a { top: 0px; left: 410px; width: 70px; } #navItem6 a:hover, #navItem6 a.selected { background-position: -410px -28px; }

10. Let’s see some examples http://write.oid.ucla.edu Uses image based rollovers with CSS using two image states. (http://write.oid.ucla.edu/images/nav.gif)http://write.oid.ucla.edu/images/nav.gif http://www.kevadamson.com/talking-of-design/ Uses multiple images for two image states. (http://www.kevadamson.com/images/nav- home.gif)http://www.kevadamson.com/images/nav- home.gif