- 締切済み
画像マップしたリンク先をクリックするとフェードでリンク先のページに切り
画像マップしたリンク先をクリックするとフェードでリンク先のページに切り替わることなどできないでしょうか？？ 問題のコードです <div id="main_ex"> <img id="mg" src="site02/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/ex_01.htm"> <area shape="rect" coords="582,468,790,496" href="site02/ex_02.htm"> <area shape="rect" coords="800,465,932,493" href="site02/ex_03.htm"></div> href="site02/ex_01.htmに切り替わるときにフェードで切り替わりたいです。 (site02/ex_02.htm site02/ex_03.htmも同様) jQuery でも javascriptでもかまいません。 なにかよい考えございましたらぜひお教え願えたらと思います。 甘えた質問で申し訳ありませんが、よろしくお願いいたします。
- motomm
- お礼率75% (3/4)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
No1です。 補足を見ると、何をしたいのかよくわからなくなりましたが… 単に表示時にフェードインするということではないのでしょうか？ <html lang="ja"> <body> <script type="text/javascript"> <!-- $("body").hide(); $(function(){ $("body").fadeIn(2500); }); //--> </script> <!-- 本文 --> </body> </html> みたいな構成ではダメ？
- fujillin
- ベストアンサー率61% (1594/2576)
＞なにかよい考えございましたら～～ ということなので、考え方を… 新しい表示先がフェードインで表示されるという感じであるなら、リンク元のスクリプトで行なうよりも、リンク先（site02/ex_01.htm）でやったほうがよさそう。 フェードアウト→フェードインみたいにしたいのなら、前半を現在のドキュメントで、後半を新しいドキュメントで受け持つのが良さそうですが、通信時間にどのくらいかかるかなどで、間の時間がいろいろになのでおかしなことになるかも。 それなので、フェードインだけにしておくほうが簡単かも知れません。 フェードインする場合と、そうでない（普通に表示する）場合があるのなら、リンクアドレスのサーチ部を利用してパラメータを渡すなどで制御することも可能だと思われます。 具体的な方法として思いつくのは、 フェードインするなら、ロード初期にドキュメントのbodyを透明にしておくなどにして、onloadで全体をフェードインさせればよろしいかと。 この場合でも、ページのロードやレイアウトに要する時間がどのくらいかかるかによって、何も表示されない時間が変わってくるので、環境の悪いユーザだと何も表示されない時間が長くなるし、表示されるまでにかかるトータル時間も長くなってしまいます。 （フェードアウトも同様） ・・・と、ここまで考えたら、ajaxで全体を入れ替えることにしてしまえば、少なくとも何も表示されないまま長時間待つというのは回避できそうですね。 この場合は、同じドキュメント内ということになりますので、そのまま「フェードアウト→入れ替え表示→フェードイン」みたいなことでいけるかも。 フェードイン、フェードアウトの方法は上で述べたのと同様の方法で可能でしょう。
お礼
早い返信本当にありがとうございます リンク先のページをフェードインさせると簡単ですね!! ありがとうございます。リンク元で行うことばかり考えていました。 またさらに甘えた質問になるのですが、 フェードインをjqueryで行おうと思うのですが、ロードされたらフェードインするという コードはどのように書けばいいでしょうか？ いろいろと調べて実験をしてみたのですが、 $(document).ready( function(){ $("#mg").hover(function(){ $(this).fadeTo("normal", 0.0); },function(){ $(this).fadeTo("normal", 1.0); }); }); このようなコードしか思い浮かばずにいます。(--;;) マウスの動きに関わらず、フェードインのみでいいのですが、 どのようなコードを記述したらよいのでしょか？？ すみません ご教授ねがえたらと思います。