クリッカブルマップにロールオーバーを付ける

Question

クリッカブルマップにロールオーバー（Javascript）を付けようと思うのですが、
どうも目指していることが上手くいきません。

まずは、下記サイトをご覧ください。
http://www.webdlab.com/template/clickable2/
これはソースコードが乗っているサイトです。

この通りに書けば、通常のロールオーバーはできるのですが、
私の目的はあと＋α必要になります。

[内容]
1.　オンマウス時にロールオーバー
2.　クリック後も、ロールオーバー状態
3.　他のイメージにオンマウスしても、さっきクリックしたイメージがロールオーバー状態
４．他のイメージをクリックして、はじめてロールオーバー画像が切り替わる。

以上です。
ちなみに現状（上記サイト）は.onmouseover、.onmouseout、.onclickの３つすべてロールオーバー後のイメージを指定すれば[内容]の１と２まではクリアなのですが、３以降がNGです。
そもそもクリッカブルのロールオーバーでは不可能なのでしょうか。

どなたがご教授よろしくお願いいたします。

fujillin · Accepted Answer

#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行付け加えればすむのではないかと想像します）

＞考えを整理するとこうも奇麗でコンパクトなコード
考え方を整理したわけではありません。（何をお考えなのか不明でしたので）
私が勝手に条件を仮定してみただけですので、質問者様の思う条件とは違っている可能性があります。

fujillin · Answer

#3です。
見落としてました。

＞ご迷惑でなければＪａｖａｓｃｒｉｐｔを覚えた経緯などを教えていただければと思います。
＞（使用した参考書など。）

ネットの拾い読みで覚えました。
実際にはjavascriptを利用することがないので、なんとなく興味本位から「へ～、こんなことができるんだ」というのが出発点。
ここでの質問と他の方の回答を見るのもとても参考になります。

参考書は読んでいません。サイ本のシリーズが良いらしいということもなんとなくここの情報で覚えましたので、そのうちいつか読んでみるかもしれません。

fujillin · Answer

#1です。不明確と書いたのは理由がわからないのではなく、「矛盾していたり処理がどうなるのかわからない」という意味です。一番些細な質問にだけはお答えいただきましたが、残りは不明のままなのでどうしたいのかわからないままです。＞つまり、最初のロールオーバーイメージを保ちつつ、＞それ以外のロールオーバー機能も動作させ、もとのご質問文では、2度目からのロールオーバーはないはずなので、ますます混乱します。＞次のリンクをクリックした際に、先ほどの動作が＞次のリンクにも受け継がれる仕組み No1でも書きましたが、通常はリンクでページ遷移するはずなので、表示中のページは消えるはずです。＞クリッカブルの数が多ければ多いほど、膨大な量の画像が必要になります。＞それを思うと、とても大変ですね参考サイトの方法は比較的プリミティブな方法なので組合せが多くなれば大変ですね。結局、何をやりたいのかはわからないままですが、クリック対象部分が矩形であるならばという仮定のもとにエスパー的に想像して… クリッカブルマップを使わないで、普通のロールオーバーを用いる方法もあるのではという参考例（やりたいことが不明なので、なんとも言えないけれど、方法はいろいろあるという意味です）やりたいことを整理して考えてみれば、もっと簡単な方法が見つかるかもしれませんので、一度整理して考えてみることをおすすめします。（ロールオーバーはCSSで、click処理はスクリプトで行なっています） sample

fujillin · Answer

基本的に可能だと思いますが、質問者様の目的の内容が不明確なのでわかりかねます。

・通常、クリックするとリンク先へ遷移すると思いますが、常にリンクは
　キャンセルということでしょうか？それとも、遷移までの間だけ画像が
　変わっていればよいということ？
・ページ遷移が起こると３.以降の内容は意味を持ちませんが？
・マウスオン時１.に従えば画像変更、３.に従えば画像は変えない。
　（↑）どこか矛盾していませんか？
・些細なことですが、１.で画像変更後、そのままマウスアウトすると
　どうなるのか不明。

てなところでよくわからないけれど、単純化して『クリックしたらば画像を変更。リンクは常にキャンセルする。』という機能でよいのでは？
そうであれば、参考サイトのonmouseoverをonclickに変えればほとんど実現できるかと思います。

初期表示の画像が特別で、最初のロールオーバーだけは実現したいのなら、それだけ特別処理としてmouseoverを一回だけ実行するようにしてあげればよさそう。
具体的にはフラグでも設けておいて、実行したらフラグをセット。フラグがセットされていたら実行しないようにするとか。
でも、この初期画像って二度と表示されることがないので、わざわざ特別処理を作らなくても良さそうにも思えますが…

どうでも良いことですが、「ロールオーバー」ってクリックを伴わない動作に使うのではないのかなぁ…

クリッカブルマップにロールオーバーを付ける

#1、#2です。

#3です。

#1です。

この回答への補足

基本的に可能だと思いますが、質問者様の目的の内容が不明確なのでわかりかねます。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング