Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Mouse over & image change



9:50 am on Mar 20, 2009 (gmt 0)

5+ Year Member


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.


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


1:08 pm on Mar 23, 2009 (gmt 0)

10+ Year Member

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


3:07 pm on Mar 23, 2009 (gmt 0)

5+ Year Member



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]


9:16 pm on Mar 23, 2009 (gmt 0)

10+ Year Member

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:


.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 */

<!-- 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.


Featured Threads

Hot Threads This Week

Hot Threads This Month