hover on div layout image |
hover on div layout image |
Apr 27 2006, 11:11 PM
Post
#1
|
|
Peggy. Group: Member Posts: 2,508 Joined: Aug 2005 Member No: 214,025 |
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? |
|
|
Apr 30 2006, 04:53 PM
Post
#2
|
|
Peggy. Group: Member Posts: 2,508 Joined: Aug 2005 Member No: 214,025 |
BUMP.
No one seems to help me or even view this topic. |
|
|
Apr 30 2006, 06:02 PM
Post
#3
|
|
t-t-t-toyaaa Group: Official Member Posts: 19,821 Joined: Apr 2004 Member No: 11,270 |
Image rollovers:
http://www.createblog.com/tutorials/download.php?id=91 |
|
|
Apr 30 2006, 06:14 PM
Post
#4
|
|
Peggy. Group: Member Posts: 2,508 Joined: Aug 2005 Member No: 214,025 |
^ 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.?
|
|
|
Apr 30 2006, 06:49 PM
Post
#5
|
|
t-t-t-toyaaa Group: Official Member Posts: 19,821 Joined: Apr 2004 Member No: 11,270 |
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} |
|
|
Apr 30 2006, 09:05 PM
Post
#6
|
|
You'll find me in your dreams. Group: Official Member Posts: 8,536 Joined: Mar 2005 Member No: 114,010 |
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.
|
|
|
Apr 30 2006, 09:49 PM
Post
#7
|
|
Peggy. Group: Member Posts: 2,508 Joined: Aug 2005 Member No: 214,025 |
^I am more familiar with css than tables though.
|
|
|
Apr 30 2006, 10:00 PM
Post
#8
|
|
You'll find me in your dreams. Group: Official Member Posts: 8,536 Joined: Mar 2005 Member No: 114,010 |
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> Then your CSS might resemble this:<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"> [ http://www.blewmyallowanceonmanga.net/ribbons/hover.html ]
.hover{width: 50px; text-align: center;} .hover a:link{background-color: #000000; color: #FFFFFF;} .hover a:hover{background-color: #FFFFFF; color: #000000;} </style> |
|
|
*mipadi* |
May 2 2006, 09:32 AM
Post
#9
|
Guest |
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> |
|
|