hover on div layout image Options

[sprezzatura]

http://glamour-beauty.com/

See the navi portion? When you mouseover it, that area would change to a white background and blue text.

I have Photoshop/Imageready CS2 and how do I make it like this? Also, I have heard that it requires javascript?

[sprezzatura]

BUMP.

No one seems to help me or even view this topic.

[freeflow]

Image rollovers:
http://www.createblog.com/tutorials/download.php?id=91

[sprezzatura]

^ Thanks for the link. Do I have to image slice the main div image if I am going to make it into a xanga layout etc.?

[freeflow]

I actually never did image rollovers
but If I did decide to do it I would slice that part.
Plus the owner of glamour-beauty sliced her layout, so I guess yea. (if you watch it load or it loads slowly you can tell).

{sorry I can't be POSITVE}

[talcumpowder]

Technically, something like that can be done with pure CSS. But if you wanna do images, I guess that's marginally easier if you're more familiar with tables than CSS.

[sprezzatura]

^I am more familiar with css than tables though.

[talcumpowder]

Okay... Let me think for a second, you'll be using the hover psuedo-class. Let's say your navigation is this (in a larger table, probably):

CODE

<tr>
<td class="hover"><a href="http://">Link</a></td>
<td class="hover"><a href="http://">Link</a></td>
<td class="hover"><a href="http://">Link</a></td>
<td class="hover"><a href="http://">Link</a></td>
</tr>

Then your CSS might resemble this:

CODE

<style type="text/css">
.hover{width: 50px; text-align: center;}
.hover a:link{background-color: #000000; color: #FFFFFF;}
.hover a:hover{background-color: #FFFFFF; color: #000000;}
</style>

[ http://www.blewmyallowanceonmanga.net/ribbons/hover.html ]

[*mipadi*]

It might be best to put the :hover property on the <TD> tag itself, like this:

CODE

<tr>
<td class="hover"><a href="http://">Link</a></td>
<td class="hover"><a href="http://">Link</a></td>
<td class="hover"><a href="http://">Link</a></td>
<td class="hover"><a href="http://">Link</a></td>
</tr>

CODE

<style type="text/css">
TD.hover {/* normal properties */}
TD.hover:hover {/* hover properties */}
</style>