- ベストアンサー
オンマウス時に別画像を上に重ねる方法。
オンマウス時に別画像、png画像を重ねたいと思っています。 置き換えではありません。 a.jpgを用意して マウスオーバーで b.pngを重ねたいです。 常にa.jpgは表示し続けるという意味ですがどうやればいいのでしょうか。 ※a.jpgにb.pngが重なっているc.jpgを用意して、置き換えるという答えはなしでお願いします。 説明不足の場合補足いたします。 どうぞよろしくお願いします。
- rossi46mail
- お礼率96% (251/260)
- CSS
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 すみません。初歩的なミスが二つほど ・contentプロパティは内容の追加ですが、:before,:after擬似要素と組み合わせなければなりませんでした。 ・img要素には内容がないため内容の追加は出来ないのでした。 ⇒12. 生成内容、自動番号振り、リスト( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html ) ※:before擬似要素だと内容の前に追加されるため後続の本来の内容の下になってしまうので(z-indexプロパティで前面に移動させる必要がある)、:after擬似要素の方が良いです。 <!-- タブの代わりに全角スペースでインデントさせてます --> <p class="figure" id="jpg01"> <img src="./images/03.jpg" width="350" height="350" alt=""> </p> <p class="figure" id="jpg03"> <img src="./images/03.jpg" width="350" height="350" alt=""> </p> <p class="figure" id="jpg05"> <img src="./images/03.jpg" width="350" height="350" alt=""> </p> p.figure{position:relative;} p.figure:after{position:absolute;top:0;left:0;} p#jpg01:hover:after{content:url(./images/02.jpg);} p#jpg03:hover:after{content:url(./images/04.jpg);} p#jpg05:hover:after{content:url(./images/06.jpg);} 親要素にposition:relativeが指定されている理由などは、ご自身で確認して自家薬籠中のものとしてください。
その他の回答 (3)
- やぎ じじい（@yagijijii）
- ベストアンサー率56% (63/112)
すみません。理解が不足しておりました。以下でよろしいでしょうか。 ｂ画像は最初は非表示 →マイナスの数値で画面からはみ出させる ｂ画像が重なったら処理は終了 → Henkou2は不要 <html> <head> <title>オンマウスで画像表示を入れ替え</title> <script type='text/javascript'> function init(){ document.getElementById('id1').style.position = 'absolute'; document.getElementById('id1').style.top = '50px'; //１枚目の画像の最初の位置 document.getElementById('id1').style.left = '50px'; //１枚目の画像の最初の位置 document.getElementById('id2').style.position = 'absolute'; document.getElementById('id2').style.top = '-2000px'; //２枚目の画像の最初の位置 document.getElementById('id2').style.left = '-2000px'; //２目目の画像の最初の位置 } function henkou1(){ document.getElementById('id1').style.zIndex = 1; //１枚目の画像表示を下 document.getElementById('id2').style.zIndex = 2; //２枚目の画像表示を上 document.getElementById('id2').style.top = '100px'; //２枚目の画像位置 document.getElementById('id2').style.left = '100px'; //２目目の画像位置 } </script> </head> <body onload='init()'> <div id='id1'><img src='aaaa.jpg' onmouseover='henkou1()'></div> <div id='id2'><img src='bbbb.jpg'></div> </body> </html> まだ間違っていたら言ってください。
お礼
回答ありがとうございます。 僕の説明不足でしたが、マウスアウトすると2毎目の画像を外す必要がありました。 しかし、マウスオーバー後、画像をずっと重ねるときはぜひ使用させていただきます。 回答していただきありがとうございます。
- やぎ じじい（@yagijijii）
- ベストアンサー率56% (63/112)
２つの画像の処理だとすれば、以下でどうでしょうか。 <html> <head> <title>オンマウスで画像表示を入れ替え</title> <script type='text/javascript'> function init(){ document.getElementById('id1').style.position = 'absolute'; document.getElementById('id1').style.top = '0px'; //上からの位置 document.getElementById('id1').style.left = '0px'; //左からの位置 document.getElementById('id1').style.zIndex = 1; //まずは下なので 1 document.getElementById('id2').style.position = 'absolute'; document.getElementById('id2').style.top = '50px'; //上からの位置 document.getElementById('id2').style.left = '50px'; //左からの位置 document.getElementById('id2').style.zIndex = 2; //まずは上なので 2 } function henkou1(){ //１番の画像へマウスオーバー document.getElementById('id1').style.zIndex = 2; document.getElementById('id2').style.zIndex = 1; } function henkou2(){ //２番の画像へマウスオーバー document.getElementById('id1').style.zIndex = 1; document.getElementById('id2').style.zIndex = 2; } </script> </head> <body onload='init()'> <div id='id1'><img src='aaaa.jpg' onmouseover='henkou1()'></div> <div id='id2'><img src='bbbb.jpg' onmouseover='henkou2()'></div> </body> </html>
お礼
回答していただきありがとうございます。 上記のやり方を試してみたのですが、ダメでした。 初めから2枚の画像が表示されてしまいます。 2枚目の画像がtop 50px left 50pxとjavascriptで指定いますので 上、左、50pxずれた状態で表示されています。 pxを0にして overflow:hidden;とかやってみてもダメでした。 上記のやり方はid1の画像にid2の画像が重なるという認識でいいんですよね。 思ったのですが、 onmouseover='henkou1()' この部分のhenkou1()にマウスオーバー後のurlを入れるのでしょうか。 無知で申し訳ありませんがよろしくお願い致します。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ふたつの画像のサイズは？？？ 上に来る画像は透過？？？ :hover擬似クラスを使います。 HTMLの文書構造が分からないと具体的には無理です。 例えば、写真があって、その写真に:hoverすると、新しい写真をそれに重ねる <p class="figure"><img src="./images/photo.jpg" width="" height="" alt=""></p> p.figure{position:relative;} p.figure img[src="./images/photo.jpg"]:hover{content:url(./images/photo.2.jpg);position:absolute;top:0;left:0;}
お礼
回答していただきありがとうございます。 ふたつの画像のサイズは 350px × 350pxです。 上にくる画像のサイズも同じサイズで透過画像のpngになります。 教えて頂いた通り試してみたのですが、マウスオーバーしても変わりませんでした。 動作結果 マウスオーバーすると画像が5pxほど下に動きました。 同じ画像サイズの場合は上記のタグではダメなのでしょうか。
お礼
回答ありがとうございます！ さすがORUKAさんとしか言いようがないです。 完璧な回答ありがとうございました。 今回分からない事が多かったのでいただいた情報を元にもっと勉強をしようと思います。 いつもありがとうございます。