Help - Search - Members - Calendar
Full Version: hover on div layout image
Forums > Resource Center > Graphics Help > Graphics Help Resolved Topics
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>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.