- ベストアンサー
オンマウス時に別画像を上に重ねる方法。
オンマウス時に別画像、png画像を重ねたいと思っています。 置き換えではありません。 a.jpgを用意して マウスオーバーで b.pngを重ねたいです。 常にa.jpgは表示し続けるという意味ですがどうやればいいのでしょうか。 ※a.jpgにb.pngが重なっているc.jpgを用意して、置き換えるという答えはなしでお願いします。 説明不足の場合補足いたします。 どうぞよろしくお願いします。
- rossi46mail
- お礼率96% (251/259)
- 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ほど下に動きました。 同じ画像サイズの場合は上記のタグではダメなのでしょうか。
関連するQ&A
- JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです
JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです JPG にオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのですが、良い方法はありませんでしょうか？ 例えば、分かれ道を撮したJPG画像に、マウスのカーソルを合わせる（載せる）と、JPG画像の上に、矢印だけが描かれた透過GIF画像、もしくは透過 PNG画像が表示されるようにしたいのです。 現在はJPG画像に矢印を書き加えたものを、onmouseoverで差し替え表示をする方法を行っていますが、書き加えられた矢印などの画像はJPG圧縮や縦横サイズの関係でノイズが載ってしまい、イマイチきれいじゃありません。 マウスの動作で透過GIF画像や透過PNG画像を重ねたり、外したりできる良い方法があればお教えください。
- 締切済み
- HTML
- オンマウスで2箇所の画像を変えたい
似た内容の質問をいくつか拝見したのですが、どうしても解決できず…よろしくお願いいたします。 □ ←画像Ａ ----------- □ ←画像Ｂ □ ←画像Ｃ □ ←画像Ｄ ・（以下同型のものが複数） ・ とある時に、 画像Ｂをオンマウスで画像Ａ→画像A-1、かつ、画像Ｂ→画像Ｂ’ 画像Ｃをオンマウスで画像Ａ→画像A-2、かつ、画像Ｃ→画像Ｃ’ 画像Ｄをオンマウスで画像Ａ→画像A-3、かつ、画像Ｄ→画像Ｄ’ となるようにしたいのです。 関係ないかもしれませんが、画像Ｂ～はリンクになっていて、他ページへ飛ぶようになっております。 皆様、どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- オンマウスで離れた画像が変わる。
HPを作っているのですが、Aの画像にマウスを乗せたときに、そのAの画像が変化することは出来るのですが、 『Aにマウスを乗せたとき、少し離れたところにあるBの画像が変化する』 と、言うようなことはどのようにすれば出来るのでしょうか？ また、『A1、A2、A3と、マウスを乗せるところがあり、変化する画像はBの位置の画像のみ』・・・のようなことは出来ないでしょうか？ 上手く説明できないのですが、回答、どうぞよろしくお願いします。
- ベストアンサー
- HTML
- それぞれの画像をオンマウスのときに違う画像にしたい
下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");
- 締切済み
- JavaScript
- マウスオーバー：一つの画像だけを変えるには？
javascript初心者です。マウスオーバーの記述について教えてください。 ３つのリンクボタンがあるのですが、このうち、一つだけ画像が変わるようにしたいと思っています。 ※リンク先は、３つもと同じです。 例：A・B・Cのリンク画像 A～CのどれをオンマウスしてもAの画像だけが変わるようにしたい。 また、マウスアウトした時には、元の画像に戻るようにしたいです。 以上、よろしくお願い致します。
- ベストアンサー
- JavaScript
- オンマウスで、画像切り替え＋別箇所の画像も同時に切り替えられのでしょうか？
お世話になっております。 もしJavascriptのカテゴリーと違うものでしたらすみません。 オンマウスにて画像を切り替えるJavascriptがあるのは存じておりますが、 オンマウス時にそのような画像切り替えをすると同時に 別部分にある画像エリアの画像、（もしくはHTML）も切り替える事は可能なのでしょうか。 別々に切り替え設定をすることは出来そうですが、同時に切り替えが出来るものなのかと思いまして、今回質問させて頂きました。 何ぶんよくわかっていないもので説明不足な点も多いかと思いますが、何卒宜しくお願い致します。
- ベストアンサー
- JavaScript
- 1つの画像オンマウスで3つの画像を切り替えたい！
現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！
- ベストアンサー
- JavaScript
- オンマウスで画像が差し変わるタグ教えてください！
Web制作初心者です。 Dreamweaverを使用しています。 オンマウス又はクリックで、下記のようなイメージで画像が差し変わるように 設定したいと思っています。 画像1 画像2 メイン画像（画像1表示デフォルト） 画像3 ↓画像2をクリックまたはオンマウスで 画像1 画像2 メイン画像（画像2が表示） 画像3 イメージとしては、下記サイトの各作品ページ内のような設定です。 http://book.nihonvogue.co.jp/magazine/keitodama_web/148/works.html わかりますでしょうか？ ジャバスクリプトとかスタイルシートとか、使えないため、 Dreamweaverでタグ埋め込みなどで設定したいと思っています。 でもそれができるのかどうかも不明です。 マウスオーバーの方法はわかるのですが、これとは少し違うの思い やり方が全くわからず、質問させていただきました。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- 離れた場所にマウスオーバーで画像を変えたい。
宜しくお願いします。 色々と調べて試してみるのですが解決できず、こちらでご相談させ頂こうと思います・・・。 サイト内にあるボタン自体をマウスオーバーで変化させ、かつそのボタンを選択している時には、別の離れた場所にも指定した画像を表示させたいと考えております。 1つやっかいなのが、今回.3つ画像があるのですが、3つとも微妙に異なる場所へ表示させなければなりません。一応、簡単な資料を作成しましたので添付のデータをご確認頂きたいのですが・・・。 配置はそれぞれ記載されている感じで、#A、#B、#Cというコンテナ内に入っているボタン画像にマウスが行くと、ボタン自体もマウスオーバーで変化し、かつ、#container内の赤い画像の場所にも別のsampleA.pngを表示させたいと考えています。 BとCに関しても同様で、それぞれ個別の位置に画像を表示させたいと思います。 ボタン側のマウスオーバーは出来たのですが、更に加えて離れた場所に画像を表示させる方法が分かりません。 <div id="container">ここに画像を表示させたいです！</div> <div id="A"><a href="***"><img src="images/1.png" onmouseover="this.src='images/over1.png'" onmouseout="this.src='images/1.png'"></a></div> <div id="B"><a href="***"><img src="images/2.png" onmouseover="this.src='images/over2.png'" onmouseout="this.src='images/2.png'"></a></div> <div id="C"><a href="***"><img src="images/3.png" onmouseover="this.src='images/over3.png'" onmouseout="this.src='images/3.png'"></a></div> どなたか、こういった方法でサイトを作成させた方いらっしゃいましたらアドバイスいただけますと助かります。 どうぞ、宜しくお願いいたします。m(_ _)m
- ベストアンサー
- CSS
- リンク画像をオンマウスで変えたい
今、ホームページを作成しています。 それで、以下のようなことをしたいのですが、可能でしょうか？ １ 最初の画面に、ＥＮＴＥＲの画像を表示する ２ 『１』の画像をオンマウスすると、画像が変わる ３ 『２』の画像からマウスを放すと、画像が『１』に戻る ４ 『２』の画像をクリックすると、別のページに飛ぶ なんだか説明下手ですいません・・・ 一応自分で調べてみたのですが、それらしい物が見つからず、失敗してばかりなので、質問させていただきました。よろしくお願いします！
- ベストアンサー
- その他（インターネット・Webサービス）
お礼
回答ありがとうございます！ さすがORUKAさんとしか言いようがないです。 完璧な回答ありがとうございました。 今回分からない事が多かったのでいただいた情報を元にもっと勉強をしようと思います。 いつもありがとうございます。