4

こんにちは、次のように設定された HTML ボタンがあります。

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

画像はCSS経由で割り当てられていないため、ホバー時にどのように変更するつもりですか?

4

5 に答える 5

15

非常に簡単な方法：

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

JSFiddle (デモ): http://jsfiddle.net/E6xHr/

これを行うにはもっと目立たない方法がありますが、これでうまくいきます。

于 2012-04-26T10:34:50.463 に答える
1

私が見ることができる2つのオプションがあります：

1) CSS

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

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

(例の入力要素にクラス「変更」を追加します。)

2) JavaScript

<input type="image" src="derp.png" onmouseover="this.src='mouseover.png'" onmouseout="this.src='derp.png'">
于 2012-04-26T10:38:32.433 に答える
1

提供されたほとんどの回答は JavaScript ネイティブまたは CSS ベースのアプローチであったため、jQuery ソリューションを提案します。hover()jQueryで簡単に使用できます。

jQuery スクリプト

$(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">

作業例を参照してください。

于 2012-04-26T10:44:25.217 に答える
1

data-*次のようなものは機能しますが (現在はテストされていません) 、スクリプトがそれを見つける場所を知るために別の画像を custom 属性に格納する必要があり、元の画像をsrc同様の属性に格納して元data-*に戻します。マウスアウト:

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 フィドルのデモ。

上記でinputは、HTML フォームが必要であることに注意してください。

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

CSS オプションを追加するために編集されましたが、残念ながら不完全であり、属性inputに画像が設定されていない必要があります。src

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 フィドルのデモ。

于 2012-04-26T10:35:15.203 に答える