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

質問

使用しているソフトは、GoLive6.0、OSはWINDOWSです。

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

もし可能であれば、方法をお教えいただければ幸いです。

また方法を解説しているサイトなどがあればお教えくだ
さい。どうぞよろしくお願いします。

回答No.1

Joh_Taka · ベストアンサー

GoLiveの場合 GoLive CS（Ver.7.0）から、リモートロールオーバーの設定がより簡単に出来るように仕様変更されましたが、6.0でしたらマップの設定とロールオーバーの設定に加えてアクションの設定を複合的に組み合わせて作成するか、マップの設定とロールオーバーの設定をした後に直接JavaScriptの記述を追加する方法などがあります。

マップ + ロールオーバー + アクション ですと、GoLive 6.0 の機能を組み合わせるだけですから、ページの制作や修正はそれらの操作を再度行えば良いので簡単ですし、メンテナンスもしやすいでしょう。
但し、生成されるソースは非常に複雑で何行にもわたる長大なものとなりますので、ソースコードを手作業で修正するには苦労するかもしれません。
また、画像の中にマップで定義付けたエリア以外（リンクのホットスポット以外の部分）にもマウスポインタの形がhandになってしまうので、紛らわしさという点で、閲覧者に誤解を与えてしまう不親切なナビゲーションのページになってしまうかも知れません。
それを回避するためには、CSSでマップのエリア内外にそれぞれcursor属性でdefaultやhand等に値を適用した追加記述が必要になるなど、ちょっと面倒な部分があります。

マップ + ロールオーバー + ソースに手作業でJavaScriptを追加記述した方が、簡潔なコーディングになりますし、前述のようなマウスポインタの問題も起こらないので、私個人の意見としては、こちらの方法がお勧めです。

ソースを手打ちで行えば、当然不可能なことなどありませんが（当たり前ですね（^-^））、GoLive 6.0 の操作のみで行うことに拘って、以下の方法ではどうでしょうか？

・・・と、その前に確認です。
ご質問内容を次のように解釈致しましたが、間違っていますか？
----------------------------------------------------------------------------
一枚の大き目の「画像A」にクリッカブルマップを設定しました。
そのホットスポットに別ファイル「a.html」へのリンクを貼りました。
このホットスポットにカーソルが乗った時点で、離れたところにある「画像B」の表示をリモートロールオーバーで「画像C」に変化させます。
また、その離れたところにある「画像B」自体もその画像にカーソルが乗ると、「画像A」のホットスポットにカーソルが乗った時と同様に「画像B」を「画像C」に切り替えて、クリックすれば別ファイル「b.html」へ飛ぶリンク設定します。
----------------------------------------------------------------------------

操作方法です。

ドキュメントウインドウに、まず通常通り「画像A」と「画像B」を配置します。

オブジェクトパレットの「基本」セットから「画像」を Drag & Drop して、インスペクタパレットの「基本」タブを開いて「ソース」で「画像A」「画像B」それぞれに画像ファイルを指定します。

先に「画像B」のロールオーバーとリンクを設定します。

ドキュメントウインドウで「画像B」を選択して、インスペクタパレットの「ロールオーバー」タブを開いて、「Over」と「プリロード」の各チェックボックス両方にチェックを入れ、ロールオーバーで表示される画像ファイル「画像C」をアドレス欄に入れます。

パレット最上部の欄「名前」を分かりやすい名称に（他の画像の名前と正しく区別されるように）半角英数で書き替えます。
ここでは、例として「_gazou_b」としておきます。

インスペクタパレットの「その他」タブを開いて、下段にある「名前」欄にロールオーバータブで付けた名前と同じ「_gazou_b」を記入しておきます。

インスペクタパレットの「リンク」タブを開いて、リンク欄に自動で記述された「#」を消して、リンク先のページ「b.html」を指定します。

次に「画像A」の各設定を行います。

ドキュメントウインドウで「画像A」を選択して、インスペクタパレットの「その他」タブを開いて、「マップを使用」のチェックボックスにチェックを入れ、メニューバーの直ぐ下に表示されるオプションメニューバーから「長方形を作成」「円形を作成」「多角形を作成」のツールで「画像A」のエリア内に任意にマップのホットスポットを作成します。

インスペクタパレットの「URL」のチェックボックスにチェックを入れてURL記入欄にリンク先のページ「a.html」を指定します。

ドキュメントウインドウの「画像A」のマップのホットスポットが選択状態であることを確認して、メニューの「ウィンドウ」→「アクション」でアクションパレットを表示させます。

「イベント」のリストから「マウスを合わせる」を選択して、「アクション」の下にある「新規アイテム」アイコンをクリックします。

「アクション」ボタン →「3 画像」→「03 画像 URL の設定」を選択して、表示された「名前」欄に「_gazou_b」を記入し、「リンク」欄にロールオーバーで表示される「画像C」を指定します。

同じくアクションパレットの「イベント」リストから「領域外に出る」を選択して、「アクション」の「新規アイテム」をクリック。
「アクション」ボタン →「3 画像」→「03 画像 URL の設定」を選択して、表示された「名前」欄に「_gazou_b」を記入し、「リンク」欄にマウスポインタがマップのエリア外に出たときに表示される「画像B」（デフォルトで表示される元の画像）を指定します。

以上の方法以外ですと、ソースの「画像A」に <map> で定義したエリアを記述している <area> タグ内に、「画像B」のロールオーバーを記述しているJavaScriptの onmouseove や onmouseout イベントの部分をそのまま Copy & Paste してしまう手があります。

途中までは上記方法と作業手順は同じです。

ドキュメントウインドウに、まず通常通り「画像A」と「画像B」を配置します。

オブジェクトパレットの「基本」セットから「画像」を Drag & Drop して、インスペクタパレットの「基本」タブを開いて「ソース」で「画像A」「画像B」それぞれに画像ファイルを指定します。

先に「画像B」のロールオーバーとリンクを設定します。

ドキュメントウインドウで「画像B」を選択して、インスペクタパレットの「ロールオーバー」タブを開いて、「Over」と「プリロード」の各チェックボックス両方にチェックを入れ、ロールオーバーで表示される画像ファイル「画像C」をアドレス欄に入れます。

パレット最上部の欄「名前」を分かりやすい名称に（他の画像の名前と正しく区別されるように）半角英数で書き替えます。
ここでは、例として「_gazou_b」としておきます。

インスペクタパレットの「その他」タブを開いて、下段にある「名前」欄にロールオーバータブで付けた名前と同じ「_gazou_b」を記入しておきます。

インスペクタパレットの「リンク」タブを開いて、リンク欄に自動で記述された「#」を消して、リンク先のページ「b.html」を指定します。

次に「画像A」のクリッカブルマップを設定します。

ドキュメントウインドウで「画像A」を選択して、インスペクタパレットの「その他」タブを開いて、「マップを使用」のチェックボックスにチェックを入れ、メニューバーの直ぐ下に表示されるオプションメニューバーから「長方形を作成」「円形を作成」「多角形を作成」のツールで「画像A」のエリア内に任意にマップのホットスポットを作成します。

インスペクタパレットの「URL」のチェックボックスにチェックを入れてURL記入欄にリンク先のページ「a.html」を指定します。

---------- < ここから先が前記の方法と異なります > ----------

メニューの「表示」→「ソース分割ビュー」を選択して、ドキュメントウインドウの下部にソースを表示させます。

「画像B」を選択して、ソースで強調表示されている部分の直前にある <a> タグに記述されているJavaScriptの記述 onmouseover="～" と onmouseout="～" をコピーします。
｛例えば、onmouseover="changeImages( /*CMP*/'_gazou_b',/*URL*/'c.gif');return true" onmouseout="changeImages( /*CMP*/'_gazou_b',/*URL*/'b.gif');return true" の部分です｝

それを「画像A」のマップエリア内を選択して、ソースで強調表示された <area> タグ内にある他の属性と値の記述の最後の部分（任意の部分）にペーストします。
{例えば、<area shape="rect" coords="xx,xx,xx,xx" href="b.html" alt="画像" onmouseover="changeImages( /*CMP*/'_gazou_b',/*URL*/'c.gif');return true" onmouseout="changeImages( /*CMP*/'_gazou_b',/*URL*/'b.gif');return true"> のような感じです}

お礼

ご丁寧にどうもありがとうございました。
教えていただいた方法で早速試して見ましたところ、
思っていた通りのものを作ることができました！すごいです！
手取り足取りの詳細な解説のおかげです！
とても助かりました！本当にありがとうございました！