ロールオーバーで吹き出しをつける方法とは？
- 顔写真が横3つ縦3つと複数配置してあるホームページを作ろうとしています。マウスオーバーしたときに写真1つ1つから吹き出しが出るようにしたいのですが、これはjavascriptで作るのでしょうか？それともFlashでしょうか？
- 普通のjavascriptのロールオーバーは作ったことがあるのですが、今回はマウスポイント前(写真のみ)と後(写真＋吹き出し)で画像の大きさが変わってしまうので、できるのか悩んでいます。(同じ写真のまま吹き出しだけが出るようにしたいのです)
- 計6枚の写真それぞれから吹き出しが出るようにしたいと思っています。所有ソフトはXP環境でDreamweaver8とFlash8です。どうぞよろしくお願いいたします。
- ベストアンサー
ロールオーバーで吹き出しをつけたい
お世話になっております。カテ違いでしたらすみません。 顔写真が横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>
関連するQ&A
- javascriptのロールオーバーの問題につきまして。
Dreamweaverのjavascriptを使ってロールオーバーを作成したのですが、firefoxなどでロールオーバーした画像からリンク先に飛んで、ブラウザの戻るで戻ると、画像がロールオーバー状態のままになってしまいます。なにか良い解決方法はないでしょうか。よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
- ボタンにロールオーバーで吹き出し表示
ボタンにロールオーバーで吹き出し表示 flash初心者です。。 ボタンが数個並んでおり、それぞれにロールオーバーすると、吹き出しで説明画像を表示、マウスが外れたら吹き出しも消える、ということをしたいです。 難しいスクリプトを使わずに出来るだけ単純で分かりやすい方法(gotoandplayくらい)で実現するにはどうしたらよいでしょうか？ ネットで調べたりしているのですが、スクリプトだと応用が出来ず… ご存知の方がいらっしゃいましたらどうかお教え願えないでしょうか。
- 締切済み
- Flash
- javascriptで作ったロールオーバーがロールオーバーのままになってしまう
質問お願いします。 javascriptで作った画像二枚で表現するロールオーバーボタンの不具合についてです。 ieでの動作は問題なかったのですがsafari3.1.2とfirefox3.03では、 その作ったロールオーバーボタンをクリックして他のページに行き、 そしてブラウザに予め備わっている機能の戻るボタンで元のページに戻るとクリックしたロールオーバーボタンがマウスが重なっていないのにロールオーバーしたままの状態になってしまいます。 (その状態でもう一度ロールオーバーボタンにマウスを重ねると元に戻ります。) 流れを簡単に書かせていただきます。 <1.ロールオーバーボタンをクリックする> ↓ <2.他のページにリンクする> ↓ <3.リンク先のページでブラウザの戻るボタンをクリックする> ↓ <4.1のページに戻る> ↓ <5.1でクリックしたロールオーバーボタンがカーソルが触れていないのにロールオーバーした状態> ロールオーバーボタンを作る方法は二通り試したのですが、両方とも上に書いた通りの状態です。 <試した方法> 1.DreamweaberMXのビヘイビア機能で作成。 2.http://css-happylife.com/log/javascript/000157.shtmlこちらのページを参考にさせて頂いての作成。 この不具合の事を気にして色々なウェブサイトを見てみたのですが、やはりjavascriptで作っているであろうロールオーバーボタンは同じような状態のウェブサイトが、多数有りました。 この問題の解決策をご存じの方がいらっしゃいましたら、どうかご教授下さい。よろしくおねがいします。
- 締切済み
- その他（インターネット・Webサービス）
- ロールオーバーで指定の位置にテキストを配置
画像のロールオーバーメニューで、マウスオーバー時に指定の位置にテキストが現れるようなメニューを作りたいのですが、そのようなjsだったり、jqueryなどありますでしょうか？ 添付の画像のような感じで、メニュー1、2、3それぞれにマウスオーバーすると、メニュー1の横に必ずテキストが現れるようにしたいです。 もちろん、改行などもできるようにしたいです。 どうしたら良いでしょう？
- ベストアンサー
- JavaScript
- ボタン画像の下のFlashにポインタを移動するとロールオーバーのまま（IE以外）
例として、三洋電機と三菱電機のサイトをあげます。 http://www.sanyo.co.jp/ http://www.mitsubishielectric.co.jp/index.html これらのサイトは、メニューにボタン画像を使用しており ロールオーバーの効果をもたせています。 そして、ボタン画像のすぐ下にページのメイン要素となるFlashが配置されています。 私もこのような構造のサイトを作っているのですが、 ひとつ解決できない問題があり悩んでいます。 私の作ったサイトでボタン画像にポインタを乗せるとロールオーバーするのですが、 ロールオーバー状態でポインタをFlashに移動させると ボタン画像が通常の画像に戻らずロールオーバーのままなのです。 ポインタをFlashの領域から外すと通常のボタン画像に戻ります。 この現象は、Win IE以外のブラウザ（FirefoxやSafari）で起こります（Macではまだ検証していません）。 しかし、先述の三洋や三菱のサイトでは、 ボタン画像にポインタを乗せロールオーバー状態でポインタをFlashに移動させても、 ボタン画像が通常の画像に戻ります。 ちなみに、私のサイトでは、ボタン画像をJavaScriptの「rollover.js」を、 Flashは「SWFObject」を使って配置しています。 何か解決策をご存知の方いらっしゃいましたら どうぞ宜しくお願いします。
- 締切済み
- HTML
- ロールオーバーで下画像を表示させる
ステージを400ｘ400として写真をおきます。 その上に100ｘ100のmcを重ねます。マウスのロールオーバーで次々に画像が現れ 最終的に1枚の写真として見えるようにしたいです。 今はmcが1つですが、これを16個配置したいと思います。 その方法を教えてください。 FLASH CS3 AS2.0で制作しています。 import mx.transitions.*; import mx.transitions.easing.*; my_mc1.onRollOver = function() { TransitionManager.start(my_mc1, {type:Fade, direction:Transition.OUT, duration:2, easing:None.easeNone}); }
- 締切済み
- Flash
- JavaScriptのwindowcloseとボタンのロールオーバーの組み合わせ方
いまHPを作成中です。 そのなかでクリックすると、指定された大きさで表示される別ウィンドウがあります。 そのウインドウに次の2つのJavaScriptを使いたいのです。 ひとつひとつなら出来るのですが、二つを組み合わせるとどう書いていいのかわかりません。 しかも、ふたつともhead内に書き込むにはどうしたらいいですか？ １、ウインドウに「閉じる」ボタンを付けたい ２、そのボタンはロールオーバー効果を使ってマウスがオーバーのときはボタンが変化するよう、別のgifを表示したい 1,2の詳しい内容です。 1<a href="javascript:window.close();"></a> 2<head> <title>ロールオーバーイメージ</title> <script language="JavaScript"> <!-- function changeImage1(){ document.myimg.src="img2.gif"; } function changeImage2(){ document.myimg.src="img1.gif"; } // --> </script> </head> <body> <p> <a href="javascript:;" onMouseOver="changeImage1()" onMouseOut="changeImage2()"><IMG src="img1.gif" name="myimg" border=0></a> </p> </body>
- 締切済み
- JavaScript
- マウスオーバーで他の2個の画像を入れ替えるには？
javascript初心者です。何度試してみてもできないので、どなたか教えて下さい。 3つの画像が横に並んでいます。1番目の画像をマウスオーバーすると、2番目、3番目の画像が変わります。2番目の画像をマウスオーバーすると、1番目、3番目のい画像が変わります。3番目の画像をマウスオーオーバーすると、１番目、２番目の画像が変わります。こういった処理がしたいのですが、うまくできません。どなたかよろしくお願いします。 （イメージ的にはこんな感じです。これはflash ですが・・・⇒http://www.yamazakipan.co.jp/）
- ベストアンサー
- JavaScript
- イメージマップでマウスオーバーするとポップアップ
いつもお世話になっております。 地図の画像をイメージマップにして、地図の各ポイントをマウスオーバーすると画像が横に出る というものを作りたいのですが、可能でしょうか？ 調べたのですが「イメージマップにマウスオーバーで説明文を出す」や 「リンクにマウスオーバーで画像を出す」というものしか見つかりませんでした。 javascriptオフにも対応するためCSSで実現できないかと考えているのですが方法を教えて頂けませんでしょうか？ 宜しくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
お礼
ご回答ありがとうございます。 早速試してみました。吹き出しは中の文字も含め、完全に画像にするつもりだったので、こんなやり方もあるんだ！とびっくりです！感動しました。 デザインに凝らないといけないので、結局は画像になってしまうかもしれませんが、大変参考になりました。お忙しいところとても丁寧にご回答下さり、ありがとうございました！助かりました。
補足
締め切りが遅くなり、申し訳ありませんでした。ありがとうございました。