INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

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!

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

Jobs

Image change on Rollover

Image change on Rollover

(OP)
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?

CODE

.btn1 {
width:175px;
background:#D4D4D4;
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;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #000;
margin-bottom: 15px;
}

.btn1:hover {
background:#5CCD00;
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;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:16px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #459A00
} 


CODE

<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,
K

RE: Image change on Rollover

Well I would skip the javascript and go for a pure css solution.

I would replace the <img /> tag with a <span /> and control the image via the background - as an image tag's src is not controllable from css.

Then you would just need to do something like this in addition to your css:

CODE

.btn1 span{
  background-image: url('pp_i.png');
  background-repeat: no-repeat;
  width: 16px; //your width
  height: 16px; //your height
}
.btn1:hover span{
  background-image: url('pp_a.png');
} 

You can see it in action: http://jsfiddle.net/vcw05wa3/

RE: Image change on Rollover

(OP)
That worked great but I have 4 buttons on this page. Is there a way to reuse all of the above code for each button rather than paste and rename it 4 times (each button has a different image)?

RE: Image change on Rollover

nd, Please use [code ... /code] markup tags to make it more readable

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Image change on Rollover

Sure just give each button TWO classes, or give the span a class.

CODE

.buttons span{
  background-repeat: no-repeat;
  width: 16px; //your width
  height: 16px; //your height
}
.btn1 span{
  background-image: url('pp_i.png');
}
.btn1:hover span{
  background-image: url('pp_a.png');
}

// ---- OR BELOW with the above .buttons span declaration ----

.buttons span.i{
  background-image: url('pp_i.png');
}
.buttons span.a{
  background-image: url('pp_a.png');
} 

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!

Resources

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