Need a bit of simple HTML/CSS help

[unrealalex]

I have a button that has a background and some text on it like so:

<a href="#" id="ad-toggle" class="postbutton">Click this </a>

.postbutton {
background:url("blue/post.png") no-repeat scroll center top


What I'd like to do is get rid of the text on top and use just one image without text as the link for the button, AND I'd like it to show a different image when you hover over it.

So if I were to do
<a href="#" id="ad-toggle"><img src="button url" > </a>
I can't really make it show another image on hover can I?

How can I implement this. I'm not a novice to HTML/CSS but this has left me scratching my head

 

[pat J]

html

<a href="#" id="ad-toggle" class="postbutton"></a>

Css

.postbutton a, a:active, a:visited {

background:url("image-url.png") no-repeat scoll center top;

}

.postbutton a:hover {

background:url("the-other-image.png") no-repeat scoll center top;

}

 

[pat J]

Oh man, i must be drunk. That wont work. I need some sleep. I'll get back with the answer later.

 

[Clientbag]

First, let me introduce you to sprites. Sprites mean that you put both states (hover and normal) into one one image. If your button is 100x30 pixels, then you create an image that is 100x60 pixels (double height).

The code then should look like this:

#ad-toggle {
width:100px;
height:30px;
display:block;
text-indent:-9999px;
background:url("blue/post.png") no-repeat 0px 0px;
}
#ad-toggle:hover {
background:url("blue/post.png") no-repeat 0px -30px;
}

Explanation:
Because anchor tag is an inline element we need to "convert" it to block element so we can apply width and heigh to proper dimensions.
Because you want to hide the text, we use the text-indent property to move it WAAAY left out of the visible area.

The second selector then just moves the background image 30px up when you hover over the button. Because we set dimensions to that button, the excess of that image is hidden.

Read this article if you want to learn more about Sprites:
A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

Tom

 

[Flash4Ever]

First, let me introduce you to sprites. Sprites mean that you put both states (hover and normal) into one one image. If your button is 100x30 pixels, then you create an image that is 100x60 pixels (double height).

The code then should look like this:

#ad-toggle {
width:100px;
height:30px;
display:block;
text-indent:-9999px;
background:url("blue/post.png") no-repeat 0px 0px;
}
#ad-toggle:hover {
background:url("blue/post.png") no-repeat 0px -30px;
}

Explanation:
Because anchor tag is an inline element we need to "convert" it to block element so we can apply width and heigh to proper dimensions.
Because you want to hide the text, we use the text-indent property to move it WAAAY left out of the visible area.

The second selector then just moves the background image 30px up when you hover over the button. Because we set dimensions to that button, the excess of that image is hidden.

Read this article if you want to learn more about Sprites:
A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

Tom

Hey man that's my answer too.
Best advice to use sprites and not multiple images, in this way the site is faster for less HTTP request/response.

 

[unrealalex]

First, let me introduce you to sprites. Sprites mean that you put both states (hover and normal) into one one image. If your button is 100x30 pixels, then you create an image that is 100x60 pixels (double height).

The code then should look like this:

#ad-toggle {
width:100px;
height:30px;
display:block;
text-indent:-9999px;
background:url("blue/post.png") no-repeat 0px 0px;
}
#ad-toggle:hover {
background:url("blue/post.png") no-repeat 0px -30px;
}

Explanation:
Because anchor tag is an inline element we need to "convert" it to block element so we can apply width and heigh to proper dimensions.
Because you want to hide the text, we use the text-indent property to move it WAAAY left out of the visible area.

The second selector then just moves the background image 30px up when you hover over the button. Because we set dimensions to that button, the excess of that image is hidden.

Read this article if you want to learn more about Sprites:
A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

Tom

this worked like a charm, thanks a lot man.

 

[Clientbag]

You're welcome

 

[nvanprooyen]

First, let me introduce you to sprites. Sprites mean that you put both states (hover and normal) into one one image. If your button is 100x30 pixels, then you create an image that is 100x60 pixels (double height).

The code then should look like this:

#ad-toggle {
width:100px;
height:30px;
display:block;
text-indent:-9999px;
background:url("blue/post.png") no-repeat 0px 0px;
}
#ad-toggle:hover {
background:url("blue/post.png") no-repeat 0px -30px;
}

Explanation:
Because anchor tag is an inline element we need to "convert" it to block element so we can apply width and heigh to proper dimensions.
Because you want to hide the text, we use the text-indent property to move it WAAAY left out of the visible area.

The second selector then just moves the background image 30px up when you hover over the button. Because we set dimensions to that button, the excess of that image is hidden.

Read this article if you want to learn more about Sprites:
A List Apart: Articles: CSS Sprites: Image Slicing’s Kiss of Death

Tom

Good post man. +rep. Wish all new members contributed like this.