CODEWITHSUNDEEP
javascriptonmouseover
CHEBURASHKA
CHEBURASHKA

Reputation: 1713

JavaScript How to make an image to change color onmouseover?

I have a button and an image and want them to change color onmouseover. The button changes color fine:

<script>
function secondColor(x) {
x.style.color="#000000";
}
function firstColor(x) {
x.style.color="#ffaacc";
}
</script>

<input onmouseover="secondColor(this)" onmouseout="firstColor(this)" type="submit"><br>

How can I do the same thing with the image? Is there any way:

<img src="..." ......

Or do I have to have a second image to replace the first one onmouseover and this is the only way?

Upvotes: 2

Views: 6330

Answers (5)

Billy Hallman
Billy Hallman

Reputation: 41

I know that this is old, but you don't need two images. Checkout my example using one image.

You can simply change the position of the background image.

<div class="changeColor">&nbsp;</div>

JavaScript

var dvChange = document.getElementsByClassName('changeColor');

 dvChange[0].onmouseover = function(){
   this.style.backgroundPosition = '-400px 0px'; 
 }

dvChange[0].onmouseout = function(){
   this.style.backgroundPosition = '0px 0px'; 
}

CSS

.changeColor{
    background-image:url('http://www.upsequence.com/images/multibg.png');
    width:400px;
    height:400px;
    background-position: 0px 0px;
}

.changeColor:hover{
    background-image:url('http://www.upsequence.com/images/multibg.png');
    width:400px;
    height:400px;
    background-position: -400px 0px;
}

You can also try changing the opacity of the images onmouseover and onmouseout. I don't have an example for that, but its super easy to find and I am sure it has be answered already on stack exchange somewhere.

In the JSFiddle below there is Javascript and non-Javascript examples. http://jsfiddle.net/hallmanbilly/gtf2s8ts/

Enjoy!!

Upvotes: 2

bvx89
bvx89

Reputation: 888

If you don't care that much about supporting older browsers, you could use the new CSS3 filter brightness. In chrome, you could write something like this:

var image = document.getElementById('img');

image.addEventListener('mouseover', function() { 
    image.setAttribute('style','-webkit-filter: brightness(1.5)'); 
}, false);

image.addEventListener('mouseout', function() { 
    image.setAttribute('style','-webkit-filter: brightness(1.0)'); 
}, false);

I don't recommend this approach, though. Using another picture while hovering would be a better solution.

Upvotes: 2

Jhankar Mahbub
Jhankar Mahbub

Reputation: 9848

If you have access to JQuery use hover function. If you want to change image

$('#imageid').hover(function(){
    //change image or color or opacity
    $(this).attr('src', newImageSrc);
});

add this function in document ready function.

Upvotes: 0

user2443795
user2443795

Reputation: 138

You can change image SRC on mouse over, you can load two images and use fade effects to "change" them. But better, you can use image as DIV background, make sprite and just move BG on mouse over.

Loading of two different images bring you to disappearing when hover and second image loading. Better do not use JS at all. Make sprite from two images, put it as BG of DIV and write two CSS for DIV, normal and when hover.

Upvotes: 1

miltonb
miltonb

Reputation: 7355

I think you have to use a second image. I recently cam across the following article describing how to do image crossfading on hover using css. Crossfading Image Hover Effect

Upvotes: 1

Related Questions