• 締切済み

クリッカブルマップとロールオーバーを組み合わせたい

近い既出質問はあったんですが、上手く応用出来なかったので質問します。 1枚の画像Aの中に、隣接する3範囲にそれぞれクリッカブルマップを作りました。 これを、それぞれ別の色に変化する3画像(Aと同サイズ)を使ってロールオーバー表示 させたいのですが、方法が判りません。 組み合わせ可能なスクリプトと、ソースの説明を希望いたします。 使用しているのはWin2000でGoLive6なんですが、ソフトの操作方法より ソースをいじる方が確実でしたら、それでもかまいません。 ちなみに、Flash使用は出来ません。 どうぞよろしくお願いいたします。

  • HTML
  • 回答数2
  • ありがとう数1

みんなの回答

  • taseki
  • ベストアンサー率66% (155/233)
回答No.2

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)
回答No.1

普通の(クリッカブルマップなし)画像にロールオーバーを設定する方法は解るんですよね? 以下そう仮定しています。 通常のロールオーバーは、対象画像を囲む<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>タグに入れればOKです。 <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>

RYOKUYA
質問者

補足

ご回答ありがとうございます。 GoLiveを使ったロールオーバー指定ですと、吐き出されるjavascriptが違っている為か、 うまく移植出来ませんでした。 すみませんが、<head>内のjavascriptも教えて頂けませんでしょうか?

関連するQ&A

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

    クリッカブルマップにロールオーバー(Javascript)を付けようと思うのですが、 どうも目指していることが上手くいきません。 まずは、下記サイトをご覧ください。 http://www.webdlab.com/template/clickable2/ これはソースコードが乗っているサイトです。 この通りに書けば、通常のロールオーバーはできるのですが、 私の目的はあと+α必要になります。 [内容] 1. オンマウス時にロールオーバー 2. クリック後も、ロールオーバー状態 3. 他のイメージにオンマウスしても、さっきクリックしたイメージがロールオーバー状態 4.他のイメージをクリックして、はじめてロールオーバー画像が切り替わる。 以上です。 ちなみに現状(上記サイト)は.onmouseover、.onmouseout、.onclickの3つすべてロールオーバー後のイメージを指定すれば[内容]の1と2まではクリアなのですが、3以降がNGです。 そもそもクリッカブルのロールオーバーでは不可能なのでしょうか。 どなたがご教授よろしくお願いいたします。

  • クリッカブルマップでリモートロールオーバー

    過去の質問を見ましたが、ソフトを使ったやり方でしたので、改めて質問させていただきます。 1つの画像の中にクリッカブルマップを3つ貼り、リモートロールオーバーで別の場所にある画像を変更させたいと考えています。 別場所に表示される画像からもリンクができるとうれしいです。 できればjavascriptは別ファイルにしたいのですが、htmlファイルに書き込む形でも構いませんので、方法を教えていただければと思います。 どうぞよろしくお願いいたします。

  • クリッカブルマップからリモートロールオーバー

    使用しているソフトは、GoLive6.0、OSはWINDOWSです。 一枚の大き目の画像にクリッカブルマップを設定しまし た。そのホットスポットに別ファイルへのリンクを貼り ました。このホットスポットにカーソルが乗った時点で 離れたところにある画像の表示をリモートロールオーバ ーで変化させたいのです。また、その離れたところにあ る画像自体もその画像にカーソルが乗るとホットスポッ トにカーソルが乗った時と同様に画像を切り替えて、ク リックすれば別ファイルへ飛ぶリンク設定をしたいと思 っています。このようなことはGoLive6.0では可能でし ょうか。 もし可能であれば、方法をお教えいただければ幸いです。 また方法を解説しているサイトなどがあればお教えくだ さい。どうぞよろしくお願いします。

  • 入れ替えた画像をクリッカブルマップにしたい

    スクリプトで変更した画像をクリッカブルマップにしたいのですがよくわかりません。 入れ替える為のスクリプトとクリッカブルマップについては単体では、ほぼ理解できていますが、それを結びつける知識がありません。 果たして、スクリプトで実現できるものなのでしょうか。

  • クリッカブルマップとロールオーバーを同時に使う外部CSSの書き方

    似た質問はあったのですが、解決できなかったので質問させていただきました。 ホームページでクリッカブルマップにしている画像(A.gifとします)があるのですが、 リンクにマウスを乗せたとき、それぞれのリンク別々の画像を表示させたいのです。(ホームページはテキストエディットで作っています)    A.gifの中にリンク1、リンク2、リンク3があるとします。    ●リンク1にマウスが乗ったとき→A.gifがB.gifに変わる    ●リンク2にマウスが乗ったとき→A.gifがC.gifに変わる    ●リンク2にマウスが乗ったとき→A.gifがD.gifに変わる というふうにしたいのですが・・・。 自分で本やネットで探してみたところ、javasprictを使ったやり方はなんとかわかりました。 けれどjavasprictは見る人の環境によって表示されなかったりするし、ソースをシンプルにしたいので、外部CSSでのやり方を探しています。。。 ただのロールオーバーだけなら外部CSSで作ることはできましたが、クリッカブルマップと併用しようとするとわからなくなってしまいました。 独学で作ってきたので説明文など、至らない点があるかもしれないのですが、できるだけ詳しく教えていただければありがたいです。 もし不明な点があれば補足致します。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • クリッカブルマップがきかない!?

    html初心者です。 地図の画像上に複数のにクリッカブルマップを作成して、同ページ内のアンカーリンクへリンクを設定しています。 ※クリッカブルマップはDreamweaverで作成しています。 IEではちゃんとリンク先に行くのですが、ネスケだと、リンク先に移動しません。。どこが悪いのでしょうか??ソースは下記にある通りです。 なにか決定的にタグが抜けているんでしょうか?? 皆様、初心者な私にどうか教えてください。 よろしくお願いします。。。 ---------------------------------------------- <BODY> <div align="left"> <img src="image/map.gif" width="500" height="300" border="0" usemap="#Map"> <MAP name="Map"> <AREA shape="rect" coords="342,38,447,65" href="#01"> <AREA shape="rect" coords="333,108,439,144" href="#02"> </MAP> </div> <div> <A name="#01">一丁目</A> <A name="#02">二丁目</A> </div> </BODY>

    • ベストアンサー
    • HTML
  • クリッカブルマップとインラインフレームを組み合わせたい

    こんにちは。自分でも検索してしらべたのですが、どうしてもわからないので、質問させていただきます。 現在、ページを製作中なのですが、タイトルのとおり、クリッカブルマップ画像の上にインラインフレームを組み合わせる方法がわからず、困っています。 透過したインラインフレームを、女の子の画像に重ねて表示してあります。この女の子の画像にメニューが書いてあるので、それをクリッカブルマップにして、インラインフレームにリンクを表示したいと思っています。 画像の上にインラインフレームを重ねて表示するのには成功しましたが、クリッカブルマップのタグを書き加えると、画面が真っ白になってしまいます。 クリッカブルとインラインを組み合わせたデザインのサイトは結構あるので参考にしようとしてみましたが今いちわからなくて・・・ 回答よろしくお願いします。

  • クリッカブルマップ上でカーソルを追うタグ

    HPでカーソルを追っかけるアイコン(マウスストーカー?)を付けたいのですが、 普通に付けることは出来たのですが クリッカブルマップを使用していて、その上にカーソルをもっていくと アイコンが消えてしまいます。 クリッカブルマップで使用している画像からカーソルを外すと 再びカーソルを追いかけてきます。 マップ上にメニューなどあるので画像の上でも追いかけられるように したいのですが、どうしても出来ません。 それともクリッカブルマップ上では追いかけることは不可能なのでしょうか。 どなたか詳しい方、教えていただけると助かります。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • クリッカブルマップとアイフレームを並べる

    初めまして。こんにちは。 クリッカブルマップとアイフレームを 並べる方法を教えてください。 ↓こんな風にです _______   ________ C-map     | | アイフレーム |           |       | のメニュー画像|  |_______|  ̄ ̄ ̄ ̄ ̄ どうしても平行に並ばないのですが・・。

  • クリッカブルマップを使わず同じ効果を得たい…。

    出来るかも分からないのですが、宜しくお願いします。 題名の通りなのですが、クリッカブルマップのように1枚の画像上に複数箇所のリンクを設定したいのですが、クリッカブルマップ自体は使用したくありません。 そこで、質問なのですがHTMLやCSSを工夫することで、またはJavascriptを使うことで、こういった指定が実現可能でしょうか? 実際には、良くある地図みたいに地域ごとの形でリンクの設定が出来ればと思います。 なお、FlashはNGとさせてください。 どなたか、ご存知の方いらっしゃいましたらアドバイス頂けないでしょうか。 宜しくお願いします。

    • ベストアンサー
    • CSS