0

クリックした後に別の画像に変わるロールオーバー画像を作成したいと思います。たとえば、ボタンがクリックされていない場合、画像 1 が表示されます。

その上にカーソルを合わせると、画像 2 に変わります。

次に、ユーザーがボタンをクリックすると、画像 3 に変わり、ページが更新されるまでそのままになります。

さらに、ユーザーがボタンを押すと、新しいタブでリンクが開きます。

これは私がこれまでに持っているものです: <img src="image/b1n.png" alt="Button 1" id="Image2" height="53" width="281">

4

4 に答える 4

1

ホバーに CSS を使用します。

.button {
    background: #2c82b9;
}
.button:hover {
    background: #359cdd;
}
.button.clicked, .button.clicked:hover {
    background: #aa0000;
}

次に、クリックに JavaScript を使用します。

<div class="button" alt="Button 1" id="Image2" onClick="this.className = this.className + ' clicked';"></div>

このデモを参照してください。

:active実装はブラウザによって異なるため、疑似クラスは使用しないでください。

于 2013-08-02T16:24:35.423 に答える
1

ボタンにクラスを追加してから、次の操作を行います。 通常の状態の場合。

button.class{
    background-image: url("images/image.jpg");
}

ホバーの場合:

button.class:hover{
    background-image: url("images/image2.jpg");
}

アクティブの場合:

button.class:active{
    background-image: url("images/image3.jpg");
}

アクティブな疑似クラスは、一部の IE バージョンとは相性が悪いことに注意してください。

于 2013-08-02T16:22:13.690 に答える
0

CSS を使用してホバー効果を作成する

 **CSS**
 #Image1:hover { background-image: url("dir/image2.jpg"); }

次に、単純な JavaScript コードを使用してクリック イベントを処理し、画像 3 に変更します。

  **HTML**
 <img src="image/b1n.png" alt="Button 1" id="Image1" height="53" width="281" onclick="changeImage()">

 **JavaScript**
 function changeImage() {
      document.getElementById("Image1").src = "dir/image3.jpg";
 }
于 2013-08-02T16:35:14.693 に答える
0

ページにスタイル シートを追加します。その中に次のようなものがあります：

.roll-over { background-image:url('image.png'); }
.roll-over:hover { background-image:url('image2.png'); }
.current { background-image:url('image3.png'); }

現在のページ リンクに現在のリンクを適用し、他のリンクにロール オーバーを適用します。いくつかの作業が必要な場合がありますが、それが一般的な考え方です

于 2013-08-02T16:22:08.043 に答える