Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


Image change on Rollover

Image change on Rollover

Image change on Rollover

I understand this is more of a css/javascript thing but I need a little help here. I have created a css button that I have added an icon image to that is an inactive version. When I hover I want the image to change to the color version. After searching the internet what I have found is not helping. Does anyone have any ideas here?

.btn1 {
background:-moz-linear-gradient(top,#D4D4D4 0%,#7F7F7F 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#D4D4D4),color-stop(100%,#7F7F7F));
background:-webkit-linear-gradient(top,#D4D4D4 0%,#7F7F7F 100%);
background:-o-linear-gradient(top,#D4D4D4 0%,#7F7F7F 100%);
background:-ms-linear-gradient(top,#D4D4D4 0%,#7F7F7F 100%);
background:linear-gradient(top,#D4D4D4 0%,#7F7F7F 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#D4D4D4', endColorstr='#7F7F7F',GradientType=0);
padding:10px 15px;
font-family:'Helvetica Neue',sans-serif;
border:1px solid #000;
margin-bottom: 15px;

.btn1:hover {
background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5CCD00', endColorstr='#4AA400',GradientType=0);
padding:10px 15px;
font-family:'Helvetica Neue',sans-serif;
border:1px solid #459A00

<button type="submit" class="btn1" onclick="btn('myfunction');return false;"><img src="pp_i.png"> Presentation</button>
The hover button would be "pp_a.png".

Thank you in advance,

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close