CODEWITHSUNDEEP
htmlcssforms
Dragan Marjanovic
Dragan Marjanovic

Reputation: 1287

Changing image for button on hover?

Hi I have a HTML button that is setup like this:

<input type="image" src="derp.png">

As the image is not assigned via CSS how am I meant to change it on hover?

Upvotes: 4

Views: 59775

Answers (5)

TokeBloke
TokeBloke

Reputation: 1

My idea would be to put an image under the button and have the alpha for the button background image transition set to 0 so that you can see the image under.

Upvotes: 0

deex
deex

Reputation: 515

Since most answers provided were JavaScript native or CSS based approached, I'll suggest a jQuery solution. You can simply use hover() in jQuery.

jQuery script

$(document).ready(function() {
 $('#img1').hover(function() {
    $('#img1').attr('src','second_img.jpg');
  }, function() {
   // do something here
   alert('hovered out');
 });
});

HTML

<input id="img1" type="image" src="first_img.png">

See working example.

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

Something like the following would work (though currently untested), it requires the alternate image to be stored in a custome data-* attribute in order that the script knows where to find it, and then stores the original src in a similar data-* in order to put it back on mouseout:

var inputs = document.getElementsByTagName('input');

for (var i = 0, len = inputs.length; i < len; i++) {
    input = inputs[i];
    input.onmouseover = function(){
        this.setAttribute('data-orig-image',this.getAttribute('src'));
        this.src = this.getAttribute('data-alt-image');
    };
    input.onmouseout = function(){
        this.src = this.getAttribute('data-orig-image');
    };
}​

JS Fiddle demo.

Bear in mind the above requires your input to have the HTML form:

<input type="image" src="http://path.to/default/image.png" data-alt-image="http://path.to/mouseover/image.png" />​

Edited to add a CSS option, which is somewhat imperfect unfortunately, and requires that the input has no image set in its src attribute:

input[type=image] {
    background-image: url(http://davidrhysthomas.co.uk/img/dexter.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 200px;
    height: 185px;
}
input[type=image]:hover,
input[type=image]:active,
input[type=image]:focus {
    background-image: url(http://davidrhysthomas.co.uk/img/mandark.png);
}​

JS Fiddle demo.

Upvotes: 1

Mitch Satchwell
Mitch Satchwell

Reputation: 4830

You have two options that I can see:

1) CSS

input.change {
background-image:url(derp.png);
}

input.change:hover {
background-image:url(mouseover.png);
}

(Adding the class 'change' onto the input element from your example.)

2) JavaScript

<input type="image" src="derp.png" onmouseover="this.src='mouseover.png'" onmouseout="this.src='derp.png'">

Upvotes: 1

OdinX
OdinX

Reputation: 4211

A very simple way:

<input type="image" src="derp.png" onMouseOver="this.src='aderp.png'" onMouseOut="this.src='derp.png'">

JSFiddle (demo): http://jsfiddle.net/E6xHr/

There are much more unobtrusive ways to do this, but this will work.

Upvotes: 16

Related Questions