So you’ve designed some sweet rollovers in Photoshop, and you want to use rollover images in your navigation. You’re committed to the image, so simple a:hover styles aren’t going to work. However, building on concepts we have already learned, we can build kick-ass hovers without having to use complex Javascripts.
First, start by actually typing in the text of the navigation, and format each link as a separate heading style (H1, then H2, etc). If you run out of Heading tags, try creating new ones – you can make a h7, h8, etc in the code. Create a CSS rule for each heading (and make it a contextual selector, such as #nav h1) that creates a box the correct size for each graphic that is going to be used, and place the normal state graphic in the background.
After you have created all the header styles with graphics, create an overall link style for the navigation (#nav a) and size the link font to 1 pixel. Also choose a truly awful background color for the links. This is going to show you the box that will activate the link. At this point, it should be a pathetic little box in the upper left corner of each link graphic. At least the font is too small to read.
Now, create rules for each link to increase the size of the box. These will also be contextual selectors such as #nav h1 a, #nav h2 a, etc. Use padding on the right and bottom size of the boxes to fill most, but not all of the box. Leave a little wiggle room in case someone starts increasing text sizes in a browser. The awful tacky background color should cover the text contents of each graphic, at the very least.
Next, create the rollover styles. These selectors should read as pseudo classes applied to the headings, such as #nav h1:hover, #nav h2:hover, etc. All these rules simply need to declare a new background image – the rollover image you created in Photoshop.
Finally, go back into #nav a and get rid of the background color. Set the text color to something that will disappear into the background of the graphic.
Upload all the page and it’s dependent files, and test it online. you should be able to activate the links and see the rollovers. You might notice a flash when the links are rolled over. We’ll fix this next, but you have two choices how to create preloaders.
Preloaders via Javascript in Dreamweaver
Go up to the Window menu, and load the Behaviors panel. Select the body tag in your breadcrumb trail, and use the “+” button in the Behaviors panel to Preload Images. MAke sure the top of the behaviors panel shows the body tag. Add each rollover image to the list using Browse and then the “+” button until all the rollovers are present. Hit return. You should see the behavior added as an “onLoad” behavior. This will tell the web browser to download each image when the page loads, so that when they are rolled over, they instantly appear (without the white flash).
Preloaders via the CSS head fake
I hate Javascript. Try this method for a change of pace, and a method controlled entirely by your style sheet. You’ll have to dive into the CSS slightly with this solution, but not in any particularly hard manner.
Create an empty div with ID “preloader” at the bottom of your layout, and create a rule to control the div. Set the left margin to “-1000″ pixels (that’s negative one thousand), and the height and width to something small, like 10 pixels each. This is going to move the div off the left side of your screen, and it won’t create a horizontal scrollbar.
The next part is slightly more complicated. Go into the CSS code and add the following code inside the #preloader rule to create multiple background images for the div:
background:url(images/rollover1.gif) no-repeat;
You will need one line of this code per rollover image. Change the folder and file name as necessary to point to your rollover images.
That’s it. Upload the style sheet and the dependent files. The preloader div should not be visible in any way, but all the images should preload as the page loads.
And, you have a preloader “script” that lives inside your style sheet, which means it’s one step to add or change images. Bad-ass.
Tags: css, hover, onLoad, preloader, rollover
This entry was posted on Wednesday, October 28th, 2009 at 3:20 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.