Hey - Prolem makeing a Simple Rolleover image with 3 status

[yanivkalfa]

hey well i am trying to make an image rolleover . with 3 status normal over click .i know its simple as hell but cant remmber how to make it.

i made Divs on my site . defind it . and i want inside it to come a big pic to do rolle over and cant manage to do so .

actualy body

<div id="blogo" class="bc"></div>

 

this is the css

#blogo {
position:absolute;
top:93px;
left:53px;
width:168px;
height:159px;
z-index:2;
}

.bc a { background-image:url(ButtonsLogo.png)}
.bc a:hover { background-image:url(ButtonslogoHover.png)}
.bc a:active { background-image:url(ButtonslogoClick.png)}

 

thanks alot i know i did something very wrong . cant find whats not good

 

thanks in advanced

[TheFilmGod]

<div id="blogo">
<a href="#"></a>
</div>

 

CSS:

 

#blogo {
position:absolute;
top:93px;
left:53px;
width:168px;
height:159px;
z-index:2;
}
#blogo a {
        display: block;
width:168px;
height:159px;
        background:url(ButtonsLogo.png) no-repeat;
}
#blogo a:hover {
        background:url(ButtonslogoHover.png) no-repeat;
}

 

EDIT: Your whole code is really unprofessional. Why say background-image: ... when you can say background: ....? And do not use absolute positioning. - Unless its a rare and special circumstance.

[haku]

Why say background-image: ... when you can say background: ....?

 

I don't necessarily agree with this. I prefer to be specific, so if I am only setting the background image and not the positioning of it or what not, I will use background-image. Background is a shortcut for setting more than one background attribute at a time.

[yanivkalfa]

Well why souldnt i use Absolut ? whats wrong with using it ?

[yanivkalfa]

 

#blogo {
position:absolute;
top:93px;
left:53px;
width:168px;
height:159px;
z-index:2;
}
#blogo a {
        display: block;
width:168px;
height:159px;
        background:url(ButtonsLogo.png) no-repeat;
}
#blogo a:hover {
        background:url(ButtonslogoHover.png) no-repeat;
}

 

EDIT: Your whole code is really unprofessional. Why say background-image: ... when you can say background: ....? And do not use absolute positioning. - Unless its a rare and special circumstance.

 

but in Body - how do i use this Blogo thingy do i just place the dive in the body ? with id="blogo" ? and it will be a roll over image ?

 

[TheFilmGod]

just post your whole code and then we'll help you...

 

You shouldn't use absolute positioning because it takes a div and sticks it out of the flow of the page. What that means is that you wouldn't be able to center the page on very high resolutions

 

[linstefoo]

To the TheFilmGod:

I agree that you shouldn't absolutely position any element, except, in rare cases. However if you going to absolutely position any element, first do this to it's container, more specifically do this, to the main wrapper in its css:

#wrapper
{
   position: relative;
}

 

By positioning your wrapper relatively, even if you position something absolutely it will be absolutely positioned, relatively to that parent element. But again, try to stray away from absolutely positing something.

 

@ yanivkalfa

If I were you I'd do something I learned a long time ago, first off take all three of your images and place side-by-side or bottom-to-bottom in one image file. Make sure you compress it correctly too and PNG should do you just fine. Next in your css do something like this.

#blogo a
{
    display: block;
    width: 168px;
    height: 159px;
    background: url(buttonslogo.png) no-repeat;
    text-indent: -999em;
    overflow: hidden;
    /* Do this for accessibility purpose, this way it's text underneath your background image */
}

#blogo a:hover
{
    background-position: 0 -X; /* X = the amount of pixels to your hover image, inside of the one image */
}

#blogo a:active 
{
   background-position: 0 -X; /* see above */
}

I'd personally not use a:active, because once you move over and away from that image, even if it is active, it will not stay in that state. If you know php test for it that way. Thanks and I hope this helps.