JavaScript How to make an image to change color onmouseover? - Stack Overflow

admin管理员组

文章数量:1324614

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?

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?

• javascript
• onmouseover

Share Improve this question Follow asked Sep 12, 2013 at 22:05 CHEBURASHKACHEBURASHKA 1,7131111 gold badges5353 silver badges8888 bronze badges 4

• It depends on what you want to do? A border color? Otherwise you need a second image. – putvande Commented Sep 12, 2013 at 22:07
• Thank you for reply. I need the image look brighter. I have to use a second image right? There is no way to use one image. How can I implement it? – CHEBURASHKA Commented Sep 12, 2013 at 22:09
• you can change opacity? do u have access to jQuery – Jhankar Mahbub Commented Sep 12, 2013 at 22:10
• You might have to use a second image, or you could do something with HTML canvas. – putvande Commented Sep 12, 2013 at 22:10

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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 remend this approach, though. Using another picture while hovering would be a better solution.

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./images/multibg.png');
    width:400px;
    height:400px;
    background-position: 0px 0px;
}

.changeColor:hover{
    background-image:url('http://www.upsequence./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/hallmanbilly/gtf2s8ts/

Enjoy!!

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

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.

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.

本文标签： JavaScript How to make an image to change color onmouseoverStack Overflow