- ベストアンサー
ロールオーバーで吹き出しをつける方法とは？
- 顔写真が横3つ縦3つと複数配置してあるホームページを作ろうとしています。マウスオーバーしたときに写真1つ1つから吹き出しが出るようにしたいのですが、これはjavascriptで作るのでしょうか？それともFlashでしょうか？
- 普通のjavascriptのロールオーバーは作ったことがあるのですが、今回はマウスポイント前(写真のみ)と後(写真＋吹き出し)で画像の大きさが変わってしまうので、できるのか悩んでいます。(同じ写真のまま吹き出しだけが出るようにしたいのです)
- 計6枚の写真それぞれから吹き出しが出るようにしたいと思っています。所有ソフトはXP環境でDreamweaver8とFlash8です。どうぞよろしくお願いいたします。
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
実際にどの程度のイメージなのか不明なので、なんとも言えませんが、Flashのほうがよさそう。 回答がないみたいなので、scriptでのとりあえずの例として… マウスオーバーで吹出しを表示、アウトで元に戻しています。 やっていることは、単純に、吹出しのクラスを変えているだけ。 各吹出しが同じものならもっと簡単にできるし、テキストを引数化するのもありかも… （画像を用いないようにするため、写真・吹出しともdivで代用。） （吹出しはボーダーの加工で作っているので、形は良くないです。自由な 形のものは、検索すればscriptでもいろいろ見つかることでしょう。） <html> <head> <style> .photo{ width:200px; height:200px; padding:10px; margin:3px; float: left; border:2px solid Silver; background-color:AliceBlue; } .fukidasi{ display: none; position: absolute; top: 30px; left: 30px; } .fukidasi_disp{ display:block; position: relative; top: 50px; left: 50px; padding: 5px; width: 110px; border-bottom:15px solid AliceBlue; border-left:8px solid Ivory; background-color: Ivory; } </style> <script> window.onload = function() { var elm=document.getElementsByTagName('div'); for (var i=0; i<elm.length; i++){ if (elm[i].className=='photo'){ elm[i].onmouseover = function(){disp(this,1);}; elm[i].onmouseout = function(){disp(this,0);}; } } } function disp(el,d) { var f0=d?'fukidasi':'fukidasi_disp'; var f1=d?'fukidasi_disp':'fukidasi'; var e = el.firstChild; while (e){ if (e.className==f0) {e.className=f1; break;} e = e.nextSibling; } } </script> </head> <body> <div class="photo">写真のつもり1 <div class="fukidasi">文字テスト1</div> </div> <div class="photo">写真のつもり2 <div class="fukidasi">吹出し2</div> </div> <br style="clear:left;"> <div class="photo">写真のつもり3 <div class="fukidasi">吹出し3</div> </div> <div class="photo">写真のつもり4 <div class="fukidasi">吹出し4</div> </div> </body> </html>
お礼
ご回答ありがとうございます。 早速試してみました。吹き出しは中の文字も含め、完全に画像にするつもりだったので、こんなやり方もあるんだ！とびっくりです！感動しました。 デザインに凝らないといけないので、結局は画像になってしまうかもしれませんが、大変参考になりました。お忙しいところとても丁寧にご回答下さり、ありがとうございました！助かりました。
補足
締め切りが遅くなり、申し訳ありませんでした。ありがとうございました。