0

私はこれに本当に苦労しています。私はこのようなコーディングについて少し知識がありますが、実際のコーディングよりも修正が必要です。

PNG画像の2つの異なるレイヤー（ドアとドアハンドル）をオーバーレイできるようにするコードを探しています。これらの画像は、ページ上でリンクをクリックすると、それぞれ異なる画像に変わります。たとえば、別のハンドルや別のハンドルなどです。ドアのスタイルまたは色。

#png1 {
position:absolute;
top:0;
left:0;
z-index:0;
}

#png2 {
position:absolute;
top:0;
left:0;
z-index:0;
}

上記のCSSと以下のHTMLを組み合わせると、オーバーレイが得られます。フレームに入れて（DIVかもしれませんが）、HTMLリンクで画像を変更すると便利です。

<img id="png1" src="aub.png" />
<img id="png2" src="handle1.png" />
4

2 に答える 2

0

position:absoluteおよびz-index css プロパティはツールです

ドア ハンドルは、ドアよりも優れた z-index を持っている必要があります

リンクをクリックして動作を変更するには、jQuery を使用します。

于 2012-09-03T21:25:30.707 に答える
0

画像の周りにラッパー div を追加します。相対位置に設定します。上部に表示する画像の z-index を、下部に表示する画像よりも大きくします。

jQuery クリック機能を使用して、画像タグの src を変更したり、他の画像を表示/非表示にしたりします。

.my_link_1 と .my_link_2 のクラスを持つ 2 つのリンクを作成して、変更するイメージのトリガーとして機能すると仮定します。

$(".my_link_1").click(function() {
  $("#png1").attr('src', 'red.png');
});

$(".my_link_2").click(function() {
  $("#png1").attr('src', 'blue.png');
});
于 2012-09-03T21:31:16.320 に答える