- 締切済み
クリッカブルマップとロールオーバーを組み合わせたい
近い既出質問はあったんですが、上手く応用出来なかったので質問します。 １枚の画像Aの中に、隣接する３範囲にそれぞれクリッカブルマップを作りました。 これを、それぞれ別の色に変化する３画像（Aと同サイズ）を使ってロールオーバー表示 させたいのですが、方法が判りません。 組み合わせ可能なスクリプトと、ソースの説明を希望いたします。 使用しているのはWin2000でGoLive６なんですが、ソフトの操作方法より ソースをいじる方が確実でしたら、それでもかまいません。 ちなみに、Flash使用は出来ません。 どうぞよろしくお願いいたします。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- taseki
- ベストアンサー率66% (155/233)
javascriptが違っているというよりも、下に私が書いたタグは、onMouseOver と onMouseOut の中には「よくあるパターン」を書いたものです。 つまり onMouseOver と onMouseOut の中を、お使いのスクリプト（の関数呼び出し）に適当に変えてもらえれば動くと思います。 一応「よくあるパターン」を以下に書きます。そのままHTMLファイルとして保存して、開いてみてください。 BODYタグの中の「onLoad="preloadImages();"」というのは動作を軽くするためのものです。 画像は、menu_01.gif、menu_01_ov.gif、menu_02_ov.gif、menu_03_ov.gifの4つです。 ------------------------ <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- var preloadFlag = false; function newImage(arg) { if (document.images) { rslt = new Image(); rslt.src = arg; return rslt; } } function changeImages() { if (document.images && (preloadFlag == true)) { for (var i=0; i<changeImages.arguments.length; i+=2) { document[changeImages.arguments[i]].src = changeImages.arguments[i+1]; } } } function preloadImages() { if (document.images) { // ********** 先読みする画像 menu_01_over = newImage("/menu_01_ov.gif"); menu_02_over = newImage("/menu_02_ov.gif"); menu_03_over = newImage("/menu_03_ov.gif"); preloadFlag = true; } } // --> </SCRIPT> </HEAD> <BODY onLoad="preloadImages();"> <IMG NAME="menu_01" SRC="/menu_01.gif" WIDTH="300" HEIGHT="100" BORDER="0" ALT="○○○" USEMAP="#map_01"> <MAP NAME="map_01"> <!-- ********** Menu 01 --> <AREA SHAPE="rect" COORDS="11,16,63,54" HREF="page1.html" ALT="Menu 01" onMouseOver="changeImages('menu_01', '/menu_01_ov.gif'); return true;" onMouseOut="changeImages('menu_01', '/menu_01.gif'); return true;"> <!-- ********** Menu 02 --> <AREA SHAPE="poly" COORDS="73,50,159,50,159,24,73,9" HREF="page2.html" ALT="Menu 02" onMouseOver="changeImages('menu_01', '/menu_02_ov.gif'); return true;" onMouseOut="changeImages('menu_01', '/menu_01.gif'); return true;"> <!-- ********** Menu 03 --> <AREA SHAPE="circle" COORDS="197,32,28" HREF="page3.html" ALT="Menu 03" onMouseOver="changeImages('menu_01', '/menu_03_ov.gif'); return true;" onMouseOut="changeImages('menu_01', '/menu_01.gif'); return true;"> <!-- ********** Menu default --> <AREA SHAPE="default" HREF="/index.html" ALT="default"> </MAP> </BODY> ------------------------ また蛇足ですが、 ご存知かもしれませんが、全ページでメニューが共通などの場合、スクリプトをheadタグの中に書かずに外部ファイルにしておけば、他のページからはそのファイルを呼び出すだけで使えて便利です。さらに画像のURI（ファイル）指定に"/menu_03_ov.gif"というように頭にスラッシュを付けて（ルートから指定して）おけば、どの位置からでも使えます。
- taseki
- ベストアンサー率66% (155/233)
普通の（クリッカブルマップなし）画像にロールオーバーを設定する方法は解るんですよね？ 以下そう仮定しています。 通常のロールオーバーは、対象画像を囲む<A>タグにマウスオーバー属性などを設定しますよね。たとえば以下のように。 <A HREF="page1.html" onMouseOver="changeImages('menu_01', 'menu_01_ov.gif'); return true;" onMouseOut="changeImages('menu_01', 'menu_01.gif'); return true;"> <IMG NAME="menu_01" SRC="menu_01.gif" WIDTH="100" HEIGHT="50" BORDER="0" ALT="○○○"> </A> ※見やすいように改行を入れています。 この、通常は<A>タグに設定するマウスオーバーなどを、<AREA>タグに入れればＯＫです。 <IMG NAME="menu_01" SRC="menu_01.gif" WIDTH="100" HEIGHT="50" BORDER="0" ALT="○○○" USEMAP="#map_01"> <MAP NAME="map_01"> <AREA SHAPE="RECT" COORDS="11,16,63,54" HREF="page1.html" ALT="○○○" onMouseOver="changeImages('menu_01', 'menu_01_ov.gif'); return true;" onMouseOut="changeImages('menu_01', 'menu_01.gif'); return true;"> <AREA… … </MAP>
補足
ご回答ありがとうございます。 GoLiveを使ったロールオーバー指定ですと、吐き出されるjavascriptが違っている為か、 うまく移植出来ませんでした。 すみませんが、<head>内のjavascriptも教えて頂けませんでしょうか？