Image change on Rollover

[LWolf]

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 {
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
}

<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

 

[Borvik]

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:

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

 

[LWolf]

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

 

[ChrisHirst]

nd, Please use

 markup tags to make it more readable 


Chris.

Indifference will be the downfall of mankind, but who cares?
[b]Time flies like an arrow, however, fruit flies like a banana.[/b]
[url=http://webmaster-talk.eu]Webmaster Forum[/url]

 

[Borvik]

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

.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');
}