- ベストアンサー
クリッカブルマップにロールオーバーを付ける方法
- クリッカブルマップにロールオーバー（Javascript）を付ける方法について困っています。具体的には、オンマウス時にロールオーバーができるようにしたいです。また、クリック後もロールオーバー状態を維持し、他のイメージにオンマウスしても前にクリックしたイメージがロールオーバー状態になるようにしたいです。
- 現在は.onmouseover、.onmouseout、.onclickの３つのイベントを使用してロールオーバー後のイメージを指定していますが、３以上の要件を満たすことができません。クリッカブルのロールオーバーでは不可能なのかどうか、ご教授いただけないでしょうか。
- お願いします。
- mark28
- お礼率64% (44/68)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1、#2です。 ＞他のロールオーバーが元に戻るという動作です。 #2の例では、hoverと同じ状態で表示するのにするのにclass="clicked"をセットしているだけです。 スクリプトはクリックの時の処理だけ行なっていますので、上記のクラスをセットするときに他の要素のクラスをリセットしておくという、とてもよくあるパターンでよいのでは？ var t = evt.target || evt.srcElement; if(t.nodeName!="A") return; var e, i=0, a = t.parentNode.parentNode.getElementsByTagName("a"); while(e = a[i++]) e.className = e.className.replace(" clicked", ""); t.className = t.className + " clicked"; CSSを変えることで、hoverの状態とclickedの状態を異なったものにすることも可能です。 ＞リンクをクリックをすると、同ページ内にコンテンツを表示させようとしています 多分、そちらもスクリプトで行なうのではないかと想像しますが、条件分岐や要素の把握などで共通部分が多いと思いますので、同時に処理をしてしまうのがよろしいかと思います。 （↑のコードに1～2行付け加えればすむのではないかと想像します） ＞考えを整理するとこうも奇麗でコンパクトなコード 考え方を整理したわけではありません。（何をお考えなのか不明でしたので） 私が勝手に条件を仮定してみただけですので、質問者様の思う条件とは違っている可能性があります。
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
#3です。 見落としてました。 ＞ご迷惑でなければＪａｖａｓｃｒｉｐｔを覚えた経緯などを教えていただければと思います。 ＞（使用した参考書など。） ネットの拾い読みで覚えました。 実際にはjavascriptを利用することがないので、なんとなく興味本位から「へ～、こんなことができるんだ」というのが出発点。 ここでの質問と他の方の回答を見るのもとても参考になります。 参考書は読んでいません。サイ本のシリーズが良いらしいということもなんとなくここの情報で覚えましたので、そのうちいつか読んでみるかもしれません。
お礼
学びたいという気持ちが最も大事であって、 使用する資料や参考書はたいした問題ではないということですね。 この質問レスはきっと、私以外にも多くの人に役立つ内容だと思います。 ありがとうございました。 では失礼いたします。
- fujillin
- ベストアンサー率61% (1594/2576)
#1です。 不明確と書いたのは理由がわからないのではなく、「矛盾していたり処理がどうなるのかわからない」という意味です。 一番些細な質問にだけはお答えいただきましたが、残りは不明のままなのでどうしたいのかわからないままです。 ＞つまり、最初のロールオーバーイメージを保ちつつ、 ＞それ以外のロールオーバー機能も動作させ、 もとのご質問文では、2度目からのロールオーバーはないはずなので、ますます混乱します。 ＞次のリンクをクリックした際に、先ほどの動作が ＞次のリンクにも受け継がれる仕組み No1でも書きましたが、通常はリンクでページ遷移するはずなので、表示中のページは消えるはずです。 ＞クリッカブルの数が多ければ多いほど、膨大な量の画像が必要になります。 ＞それを思うと、とても大変ですね 参考サイトの方法は比較的プリミティブな方法なので組合せが多くなれば大変ですね。 結局、何をやりたいのかはわからないままですが、クリック対象部分が矩形であるならばという仮定のもとにエスパー的に想像して… クリッカブルマップを使わないで、普通のロールオーバーを用いる方法もあるのではという参考例 （やりたいことが不明なので、なんとも言えないけれど、方法はいろいろあるという意味です） やりたいことを整理して考えてみれば、もっと簡単な方法が見つかるかもしれませんので、一度整理して考えてみることをおすすめします。 （ロールオーバーはCSSで、click処理はスクリプトで行なっています） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #target{ width:500px; height:300px; background-image:url(A.jpg); /* マップの画像 */ position:relative; } #target ul{ list-style:none; position:absolute; bottom:0; right:0; } #target li{ margin:8px; } #target li a{ display:block; width:80px; padding:5px; color:#000; text-align:center; text-decoration:none; background-color:#fff; border:1px solid #aaa; } #target li a:hover, #target li a.clicked{ color:#f00; font-weight:bold; background-color:#ffa; border-color:#f00; } </style> <script type="text/javascript"> <!-- function test(evt){ var t = evt.target || evt.srcElement, c = t.className; if(t.nodeName!="A") return; if(!c && !c.match(/\bclicked\b/)) t.className = c + " clicked"; } //--> </script> </head> <body> <div id="target" onclick="test(event);return false;"> <ul> <li><a href="#">Area1</a></li> <li><a href="#">Area2</a></li> <li><a href="#">Area3</a></li> </ul> </div> </body> </html>
お礼
数回に渡りご教授を頂き、ありがとうございました。 ちなみに、 ご迷惑でなければＪａｖａｓｃｒｉｐｔを覚えた経緯などを教えていただければと思います。 （使用した参考書など。）
補足
ご教授ありがとうございます。 上手く説明できない私ではありますが、 上記コードは私の目指している動作に果てしなく近いです。 >>No1でも書きましたが、通常はリンクでページ遷移するはずなので、表示中のページは消えるはずです。 この点に関してですが、 リンクをクリックをすると、ページ遷移でコンテンツを表示させるのではなく、 同ページ内にコンテンツを表示させようとしています。（フレーム？でしょうか） ですので、選択したリンクはロールオーバー状態にしておきたかったのです。 http://www.openspc2.org/reibun/javascript/frame/004/code.html ※大分違いますが、同ページ内に表示させるという意味ではこんな感じでしょうか。 更に果てしなく近いという部分に関して、 目指しているもう一つの動作は、他のリンクをクリックすると、他のロールオーバーが元に戻るという動作です。 また、考えを整理するとこうも奇麗でコンパクトなコードが書けるのですね、 とても勉強になります。 私自身、「よくわかるゼロからはじめる」シリーズの参考書などを買って勉強しようと思います。
- fujillin
- ベストアンサー率61% (1594/2576)
基本的に可能だと思いますが、質問者様の目的の内容が不明確なのでわかりかねます。 ・通常、クリックするとリンク先へ遷移すると思いますが、常にリンクは キャンセルということでしょうか？それとも、遷移までの間だけ画像が 変わっていればよいということ？ ・ページ遷移が起こると３.以降の内容は意味を持ちませんが？ ・マウスオン時１.に従えば画像変更、３.に従えば画像は変えない。 （↑）どこか矛盾していませんか？ ・些細なことですが、１.で画像変更後、そのままマウスアウトすると どうなるのか不明。 てなところでよくわからないけれど、単純化して『クリックしたらば画像を変更。リンクは常にキャンセルする。』という機能でよいのでは？ そうであれば、参考サイトのonmouseoverをonclickに変えればほとんど実現できるかと思います。 初期表示の画像が特別で、最初のロールオーバーだけは実現したいのなら、それだけ特別処理としてmouseoverを一回だけ実行するようにしてあげればよさそう。 具体的にはフラグでも設けておいて、実行したらフラグをセット。フラグがセットされていたら実行しないようにするとか。 でも、この初期画像って二度と表示されることがないので、わざわざ特別処理を作らなくても良さそうにも思えますが… どうでも良いことですが、「ロールオーバー」ってクリックを伴わない動作に使うのではないのかなぁ…
お礼
※他の質問サイトのアドバイスには ----------------------------------------- 大まかな回答で申し訳ないですが、「onmouseover」で画像を切り替える時に、条件を追加してみては？ 現在選択中（onclickした個所）の名前を変数に入れておいて、もし、変数に名前が入っていれば、onmouseoverとonmouseoutを機能させない。（画像を差し替えない） また、変数に名前が入っていなければ、通常通りonmouseoverとonmouseoutを機能させる。 ----------------------------------------- とありました、 これにのっとって色々ググってみましたが、 素人であるわたしには具体的な追加方法がわかりませんでした。 これに関しては、質問元のアドバイザー様のHELPにより解決いたしました。 残すところ問題は1つです。 1つのクリッカブルをクリックした時のロールオーバー状態は維持できたものの、 他のクリッカブルにマウスを合わせた祭の、ロールオーバーができません。 つまり、最初以降はクリックしないとロールオーバー状態になりなくなってしまったわけです。 これを回避するためには、1つの動作にもう一つ条件と画像を追加する形になるのだと思います。 もう一つの画像とは、複数箇所ロールオーバー状態になっている画像のことです。 しかしそうなると、クリッカブルの数が多ければ多いほど、膨大な量の画像が必要になります。 それを思うと、とても大変ですね。 しかし、具体的な書き方がわかりません。 お手数をお掛けしますが、お力添えよろしくお願いいたします。
補足
アドバイスありがとうございます。 >>・些細なことですが、１.で画像変更後、そのままマウスアウトするとどうなるのか不明。 mouseoverの場合は、mouseoutすればロールオーバー前の画像に戻るのがBestです。 また、onclickした場合は、mouseoutしても、他のリンクにmouseoverしても画像はロールオーバーのままがBestです。 ですが、他のリンクにマウスをあわせると、きちんとロールオーバーしてほしいです。 つまり、最初のロールオーバーイメージを保ちつつ、それ以外のロールオーバー機能も動作させ、 尚且つ、次のリンクをクリックした際に、先ほどの動作が次のリンクにも受け継がれる仕組みを目指しています。 目的が不透明だったということで、 もう少し詳しく内容を記したいと思います。 3と4の必要性ですが、 クリックした祭、同ページの下部にコンテンツを表示させます。 そして、マップ上の他のリンクをクリックするごとに、コンテンツ内容を変更させます。 よって、マップ上のクリックされたイメージは、他のリンクをクリックするまではロールオーバー状態を保ちたいというわけです。 ※他の質問サイトのアドバイスには ----------------------------------------- 大まかな回答で申し訳ないですが、「onmouseover」で画像を切り替える時に、条件を追加してみては？ 現在選択中（onclickした個所）の名前を変数に入れておいて、もし、変数に名前が入っていれば、onmouseoverとonmouseoutを機能させない。（画像を差し替えない） また、変数に名前が入っていなければ、通常通りonmouseoverとonmouseoutを機能させる。 ----------------------------------------- とありました、 これにのっとって色々ググってみましたが、 素人であるわたしには具体的な追加方法がわかりませんでした。 お力添えよろしくお願いいたします。
お礼
長期に渡りお付き合い頂いてありがとうございました。 目指している事の第一段階はfujillin様のご教授により、 完成させることができました。 残りのスクリプトに関しては自力でやってみます。 ありがとうございました。 とても感謝しております。