Mouse over & image change

[athomas]

Hello,

I’ve got my site to do a button with text (on the left, entitled ‘Button here’) which changes background on a mouseover.

I added an icon (the speech bubble to the left) but it caused a white gap to appear above the button. Also I want the icon’s image to change when they do a mouse over (I’ll have another one so the backgrounds match).

Any ideas how I do this? Thanks.

<snip>

[edited by: swa66 at 10:13 am (utc) on Mar. 20, 2009]
[edit reason] No personal URLs please see ToS [/edit]

[PSWorx]

Do you have a css/html snippet so i can see what it is were looking at here?

[athomas]

Sure:

<snip>

I've fixed the white space, but I still want to use css to change the image on mouseover. Thanks!

[edited by: swa66 at 5:14 pm (utc) on Mar. 23, 2009]
[edit reason] No URLs please seee ToS, post minimal code instead. [/edit]

[PSWorx]

The code was removed due to its size and remember not to post URLs.

Ill provide an example so you may get the jist of what to do:

CSS:

.myRollOver, .myRollOver:visited {
background-image: url('yourImage.gif'); /* This would be the normal image */
}

.myRollOver span {
text-indent: -5000px;
}

.myRollOver:hover, .myRollOver:active {
background-image: url('yourImage2.gif'); /* This would be the roll over image */
}

HTML:
<!-- Set the class to be the same as the css above -->
<a href="#" class="myRollOver"><span>Text Link</span></a>

This is a very bare bones example, you would most likely want to setup width and height (dont forget to set the display type to block (display: block;), which will allow for the dimensions to be set.

Also the span tag is in there if you wanted to hide the text, see the text-indent line in the css.