homepage Welcome to WebmasterWorld Guest from 54.161.190.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Mouse over & image change
athomas




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

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




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

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

athomas




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved