2

ボタンと画像があり、それらの色を変更したいonmouseover。ボタンの色が細かく変わります:

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

画像で同じことを行うにはどうすればよいですか？方法はありますか:

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

それとも、最初の画像を置き換えるために 2 番目の画像が必要でonmouseover、これが唯一の方法ですか?

4

5 に答える 5

2

これが古いことはわかっていますが、2 つの画像は必要ありません。1 つの画像を使用して私の例を確認してください。

背景画像の位置を簡単に変更できます。

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

onmouseover と onmouseout で画像の不透明度を変更することもできます。その例はありませんが、見つけるのは非常に簡単で、どこかのスタック交換ですでに回答されていると確信しています。

以下の JSFiddle には、Javascript と非 Javascript の例があります。 http://jsfiddle.net/hallmanbilly/gtf2s8ts/

楽しみ！！

于 2014-08-30T20:35:57.020 に答える
2

古いブラウザーのサポートをあまり気にしない場合は、新しい CSS3 フィルターを使用できますbrightness。クロムでは、次のように書くことができます：

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

ただし、このアプローチはお勧めしません。ホバリング中に別の画像を使用すると、より良い解決策になります。

于 2013-09-12T22:28:13.107 に答える
1

マウス オーバーでイメージ SRC を変更できます。2 つのイメージをロードし、フェード効果を使用してそれらを「変更」できます。しかし、画像をDIV背景として使用し、スプライトを作成し、マウスオーバーでBGを移動するだけです。

2 つの異なる画像を読み込むと、ホバーして 2 番目の画像を読み込むと消えます。JS をまったく使用しない方がよいでしょう。2枚の画像からスプライトを作り、DIVのBGとして置き、DIV用のCSSをノーマルとホバー時の2つ書きます。

于 2013-09-12T22:10:53.893 に答える