ID非公開

2022/1/14 23:49

33回答

HTML&CSSについて質問です。 マウスを乗せると画像が切り替わるようにしたいのですが、下のイラストが消えてくれず上に乗っかってしまう状況です。

ベストアンサー

2

2人がナイス!しています

その他の回答(2件)

0

画像を入れ替えたいのであれば、<canvas>要素を使い、JavaScriptでimageオブジェクトを作成して画像のURLから読み込ませ、canvasに書き込む処理を入れる必要があります。 https://javascript.programmer-reference.com/js-canvas-draw/ あとは初期表示させたい画像はonloadイベントで、マウスを乗せるアクションはonmouseoverイベント、外すときはonmouseoutイベントで、それぞれ目的とする画像を読み込んで描写する処理を組み込めばいいです。

他のやり方としては、<div>要素を2つ重ねるようにして、下の要素でonmouseoverがあったら上の要素の表示状態(visibility)や透過度(opacity)を変更するようにする方法もあります。 https://www.webdevqa.jp.net/ja/javascript/%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E9%9D%9E%E8%A1%A8%E7%A4%BA%E3%81%AEdiv%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AF%EF%BC%9F/969917968/

0

これ、現状のコードや、完成形のイメージ図など補足できますか?

ID非公開

質問者2022/1/15 3:24

ちょっと今補足が難しいのですが、マウスホバーで目を開けたり閉じたりってのを二枚の絵でやりたいって感じです。