画像マップしたリンク先をクリックするとフェードでリンク先のページに切り

締切済

質問者：motomm
質問日時：2010/10/15 17:32
回答数：2件

画像マップしたリンク先をクリックするとフェードでリンク先のページに切り替わることなどできないでしょうか？？

問題のコードです

<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でもかまいません。

なにかよい考えございましたらぜひお教え願えたらと思います。

甘えた質問で申し訳ありませんが、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2010/10/18 19:21

No1です。

補足を見ると、何をしたいのかよくわからなくなりましたが…

単に表示時にフェードインするということではないのでしょうか？

<html lang="ja">
<body>

<script type="text/javascript">

</script>



</body>
</html>

みたいな構成ではダメ？

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2010/10/15 18:12

＞なにかよい考えございましたら～～

ということなので、考え方を…

新しい表示先がフェードインで表示されるという感じであるなら、リンク元のスクリプトで行なうよりも、リンク先（site02/ex_01.htm）でやったほうがよさそう。
フェードアウト→フェードインみたいにしたいのなら、前半を現在のドキュメントで、後半を新しいドキュメントで受け持つのが良さそうですが、通信時間にどのくらいかかるかなどで、間の時間がいろいろになのでおかしなことになるかも。
それなので、フェードインだけにしておくほうが簡単かも知れません。
フェードインする場合と、そうでない（普通に表示する）場合があるのなら、リンクアドレスのサーチ部を利用してパラメータを渡すなどで制御することも可能だと思われます。

具体的な方法として思いつくのは、
フェードインするなら、ロード初期にドキュメントのbodyを透明にしておくなどにして、onloadで全体をフェードインさせればよろしいかと。
この場合でも、ページのロードやレイアウトに要する時間がどのくらいかかるかによって、何も表示されない時間が変わってくるので、環境の悪いユーザだと何も表示されない時間が長くなるし、表示されるまでにかかるトータル時間も長くなってしまいます。
（フェードアウトも同様）

・・・と、ここまで考えたら、ajaxで全体を入れ替えることにしてしまえば、少なくとも何も表示されないまま長時間待つというのは回避できそうですね。
この場合は、同じドキュメント内ということになりますので、そのまま「フェードアウト→入れ替え表示→フェードイン」みたいなことでいけるかも。
フェードイン、フェードアウトの方法は上で述べたのと同様の方法で可能でしょう。

- 0
- 件

通報する

この回答へのお礼

早い返信本当にありがとうございます

リンク先のページをフェードインさせると簡単ですね!!
ありがとうございます。リンク元で行うことばかり考えていました。

またさらに甘えた質問になるのですが、
フェードインをjqueryで行おうと思うのですが、ロードされたらフェードインするという
コードはどのように書けばいいでしょうか？

いろいろと調べて実験をしてみたのですが、
$(document).ready(
function(){
$("#mg").hover(function(){
$(this).fadeTo("normal", 0.0);
},function(){
$(this).fadeTo("normal", 1.0);
});
});

このようなコードしか思い浮かばずにいます。(--;;)
マウスの動きに関わらず、フェードインのみでいいのですが、
どのようなコードを記述したらよいのでしょか？？

すみません
ご教授ねがえたらと思います。