質問: クリッカブルマップでリモートロールオーバー 過去の質問を見ましたが、ソフトを使ったやり方でしたので、改めて質問させていただきます。 1つの画像の中にクリッカブルマップを3つ貼り、リモートロールオーバーで別の場所にある画像を変更させたいと考えています。 別場所に表示される画像からもリンクができるとうれしいです。 できればjavascriptは別ファイルにしたいのですが、htmlファイルに書き込む形でも構いませんので、方法を教えていただければと思います。 どうぞよろしくお願いいたします。
回答: リモートロールオーバーによる画像変換というのは、 1つの画像に対してですか?それともエリアごとにそれぞれ画像が割り当てられているのでしょうか? <1つの画像に対して> エリア1に対して画像1を画像aに変え、 エリア1に対して画像1を画像bに変え、 ... なのか、 <エリアごとに画像が割り当てられている> エリア1に対して画像1-1を画像1-2変え、 エリア2に対して画像2-1を画像2-2変え、 ... とりあえず、map の各 area 要素に対して mouseover のイベントをつけてやれば 大丈夫だとは思います。 少し考えてみて下さい。 また、map の name は廃止予定のはずなので name と id 両方書くことをオススメします。 以下のソースは、<1つの画像に対して>の場合を想定して作りました。 たとえば、 id='id-img' の画像を エリア1 (id='id-area-0') にマウスがきたら images/a.jpg に エリア2 (id='id-area-1') にマウスがきたら images/b.jpg に エリア3 (id='id-area-2') にマウスがきたら images/c.jpg に 入れ替えるものです。 ※イベントはdocumentのmouseoverを監視しています。 ------------------------------------------------------------------------- ( function ( toimageobject, mouseoverevent ) { var arrimgs = [ "images/a.jpg", "images/b.jpg", "images/c.jpg" ]; toimageobject( arrimgs ); // imageオブジェクトに変換 mouseoverevent = mouseoverevent( arrimgs ); //@cc_on document./*@if (@_jscript) attachevent( 'on'+ @else@*/ addeventlistener( /*@end@*/ 'mouseover', mouseoverevent, false ); // destroy arrimgs = toimageobject = mouseoverevent = null; } )( function ( arr ) { var i, i, tmp; for( i=0, i=arr.length; i