8 replies [Last post]
asengh
asengh's picture
Offline
Enthusiast
Last seen: 15 years 11 weeks ago
Joined: 2006-11-25
Posts: 107
Points: 0

http://kttm.freehostia.com/sikhsoul3/

HTML

SikhSoul

CSS
html,body,img,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
vertical-align: text-bottom;}

body
{
}

/* Navbar CSS */

.navbar {
width: 693px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 42px;
}

#nav li {
display: inline;
list-style-type: none;
}
#home a:hover {
background-image: url(images/home.gif);
background-repeat: no-repeat;
width: 99px;
}
#home a:active {
background-image: url(images/homeclick.gif);
background-repeat: no-repeat;
width: 99px;

The effect I want is that when the mouse goes over the image the image changes. Why doesn't this way work?

Also is there a way to have a different image displayed when the image link is clicked and can this image restore to its original image after another image link is clicked.

Thanks in advance.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You need to learn how to

:? You need to learn how to use the pseudo classes, you should be placing an image background on the anchor and changing it on the :hover pseudo class not on the :active one, active is for the actual key/mouseclick action and is gone in the blink of an eye.

Oh that's confusing you have an inline image on the anchor and trying to change it on hover to a background one, the background is masked by the inline one.

If I were you I would have a read of some image replacement tutorials.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

asengh
asengh's picture
Offline
Enthusiast
Last seen: 15 years 11 weeks ago
Joined: 2006-11-25
Posts: 107
Points: 0

http://kttm.freehostia.com/si

http://kttm.freehostia.com/sikhsoul3/

I can't even put an image on the anchor. What am I doing wrong?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

What you're doing wrong is

What you're doing wrong is not understanding how descendent selectors work

Your anchor IS #home it is not a child or descended from #home

so #home a cant work as an anchor cant be found that has a ancestor called #home, however do:

a#home{} or #home {} or even a {}

And the ruleset properties will be applied.

However, there is yet one more fact that I think your missing, your anchor as it stands has no content therefore it does not exist, therefore you will have no image background as the background area does not exist, you have placed a width but an anchor is inline; inline elements do not take dimensions.

To get the background to show you need content, to get the background to match the image dimensions you need to set a height at the least, in order to do that you must set the anchor to display:block so that it can accept dimensions, this is an absolute fundamental technique with links lists and anchors, used all the time.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

asengh
asengh's picture
Offline
Enthusiast
Last seen: 15 years 11 weeks ago
Joined: 2006-11-25
Posts: 107
Points: 0

Thanks hugo Problem

Thanks hugo :thumbsup:

Problem solved.

asengh
asengh's picture
Offline
Enthusiast
Last seen: 15 years 11 weeks ago
Joined: 2006-11-25
Posts: 107
Points: 0

Ok now I don't like the fact

Ok now I don't like the fact that the image flickers as you put the mouse over it, click it etc etc. How would you get the perfect css image replacement navbar? Without flickering in between!

Thanks.

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 12 years 31 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

Instead of making two

Instead of making two images, you make one and change the background position. This will fix your flickering problem.
http://wellstyled.com/css-nopreload-rollovers.html

@}->-- Amanda

asengh
asengh's picture
Offline
Enthusiast
Last seen: 15 years 11 weeks ago
Joined: 2006-11-25
Posts: 107
Points: 0

amadika wrote:Instead of

amadika wrote:
Instead of making two images, you make one and change the background position. This will fix your flickering problem.
http://wellstyled.com/css-nopreload-rollovers.html

I read through that article but how can that be applied to images? It seems like that article suggests that images shouldn't be used. How does the Microsoft's Vista website do it?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 1 week ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

If your structure allows it

If your structure allows it you can also stack your background images on different elements. The :hover rule on the front element removes the background image revealing the (preloaded) background on the image behind.