Nav Roll overs? Options

[kariiissa]

So i want to create rollovers on my navigation. My website was created in Ai, then sliced in Ps, so its in a table. the site looks like this:
and when you roll over the links, i want it to look like this:

Is this possible or no?
I've looked everywhere for an answer before i posted this.

[TheOn3LeftBehind]

Yeah it's possible. Well.. with me and my difficult ways.. I would make it in Photoshop like you've done and crop out the part to create an individual file (with the original yellow background color), then I would do the way it would look rolled over and make that a separate file and code it from there.

But I'm making it harder than it is. I'm pretty sure you'll get some other replies making it easier, in which I'll be looking forward to as well.

PS: That's a badass navigation. : D!

[Mikeplyts]

Of course it is! Just do this:

Slice up each of image of the navigation in Photoshop, both regular states and hover states. Then, copy (CTRL/Command + C) each regular state images and post them into a new document (CTRL/Command + N). The width and height of the image should already be filled out to the copied images' widths and heights. When you paste all the regular states into separate documents, double the height of each of those documents. Now go back to your original document and copy each of the hover state images and paste each one accordingly with the appropriate regular states. Position the hover states in the separate documents to the bottom of the image and save (CTRL/Command + S) the image as one. So for example, this would be your home image:

Now upload your images to an image hosting site so you can obtain an image URL. After that, we'll start with the coding:

Input into your CSS

CODE

a.ROLLOVER_NAME {
     background: url("IMG_URL") top left no-repeat;
     width:###px;
     height:###px;
     display:block;
}
a.ROLLOVER_NAME:hover {
     background: url("IMG_URL") bottom left no-repeat;
     width:###px;
     height:###px;
     display:block;
}

• ROLLOVER_NAME will be changed to the name of your rollover. (Don't change the a part!)
• IMG_URL in the background property will be changed to the image URL you got for your image rollover from the image hosting site you uploaded them to.
• ### in the width property will be changed to exactly to the image's width.
• ### in the height property will be changed to half of the image's height. (This is important!)

Ok, now that's pretty much it for the CSS. You don't really have to change anything else. *And just by the way, you should repeat the code above for each different rollover.

Input into your HTML

CODE

<div class="navigation">
<a href="URL" class="ROLLOVER_NAME"></a>
</div>

• class="navigation" in the div tag can be changed to the name of the DIV container that will hold the rollovers. (Remember, you must define that class in the CSS as well.)
• URL in the a tag should be changed to the URL where you want the rollover link to take the user.
• ROLLOVER_NAME in the a tag will be changed to the exact same name you used for the rollover.

*Repeat the a tag for each rollover. But remember, each different rollover needs a different class name (ROLLOVER_NAME2, ROLLOVER_NAME3, etc...).

Alright, you're done! If you didn't quite understand, you can try looking at an example I made for you here. (Sorry it's not the best quality, I kind of made it quick. Try rolling over the home link. ;D)

[TheOn3LeftBehind]

*twitch* I need to read that over a couple hundred times. Lmao. I'm such an amateur at nav rollovers.