JavaScriptで画像置換えてクリッカブルマップは可能？

やま 1998/11/18(水) 16:08:16
現在会社のイントラネット用ページで、
「JavaScriptで複数の画像（地図）を置き換えて、それぞれを
クリッカブルマップとして使う」という所でつまっています。
ボタンを押すと３枚の地図を自由に置き換えられる所までは行ったのですが・・・
サーバーはNTで、言語はVBscriptです。
ブラウザはIE4.0です。
どなたか、このような状態でクリッカブルマップが可能かどうか
御存知ありませんか？

みんこ 1998/11/18(水) 19:05:04
クリッカブルマップのリンク範囲指定はみんな同じなんですか？
マップ毎にリンク範囲やリンク先が違うのなら無理かと。

やま 1998/11/18(水) 21:23:30
はい、リンク範囲やリンク先は全部違うので・・・
DHTMLが使えるかな？と捜してもみましたが、
どうもDHTMLを使うホームページのスクリプトはみな
極端な程複雑なので・・・
私の方でも引き続きいろいろと調べてみます。
なにか情報があれば宜しくお願いします。

おぱく堂 1998/11/18(水) 23:50:20
マップの違う画像を入れ換えるだけなら、そんなに複雑なDHTMLには
ならないと思いますが、DHTMLだとブラウザ限定になっちゃうし……。
全マップのリンク範囲が同じなら、画像別にリンク先を替えるのは
JavaScriptでできるけど、そのかわり JavaScriptを無効に設定された
場合にクリッカブルマップが機能しなくなっちゃいますね。リンク画像
の違うマップだと、みんこさんの言うとおり無理かも。

おぱく堂 1998/11/18(水) 23:52:18
↑5行目の「リンク画像」は「リンク範囲」の間違い。ごめんなさい。

みんこ 1998/11/19(木) 09:37:43
どうしても一枚のウィンドウで画像を開いたまんまで、
それをボタンで切り替えて、
リンク範囲とリンク先の違うクリッカブルマップを
作りたいということでしたら。

素直にフレーム切って、片方のフレームからもう片方に
マップを呼び出してはいかがでしょうか。
見かけはそんなに変わらないと思いますが。
もしくは、どうしても
一つのファイルしか使いたくないなら
マップ３枚とも表示して、ページ内でリンクとばして
よびだす（..ように見せかける）とか。

mo [E-Mail] 1998/11/19(木) 14:41:23
<INPUT TYPE=image NAME="..."> ってのを使って、
CGI で処理するっていう方法もあります。

おぱく堂 1998/11/19(木) 23:39:16
イントラネット用という事は、社内全員が IE4なんですか？
だとしたら、DHTML で画像切替するのが一番楽だと思いますが、その辺
の状況はどうなんでしょう？

しなのむし 1998/11/20(金) 06:53:38
ボタンをクリックして画像を変えた時に任意の変数に
そのボタンを示す値が入るようにしておいて
mapの各area部分のhrefから呼んだ関数が
「変数の値によって行き先を選ぶ」といったように
条件分岐させてやることは出来ますよね。
こうすれば少なくとも画像ごとに同じ位置を押しても違う場所に
飛ぶように出来るわけですけど

- 各画像が同サイズの必要があるので小さい画像には余白をつけなくてはならない
- 画像によっては本来クリックすべきでないところもクリック出来てしまう
- 恐らく細かいます目のようなマップにしなくてはならない

等の制約はやはりありますよね。

おぱく堂 1998/11/20(金) 23:10:42
<html><head>
<script language="JavaScript1.2"></script>
</head><body>

<map name="clickablemap1">
<area (地図画像１用のクリッカブル座標指定)>
</map>

<map name="clickablemap2">
<area (地図画像２用のクリッカブル座標指定)>
</map>

<map name="clickablemap3">
<area (地図画像３用のクリッカブル座標指定)>
</map>

<div id="map1" style="position:absolute;left:左座標px;top:上座標px;visibility:visible">
<img src="地図画像１" usemap="#clickablemap1">
</div>

<div id="map2" style="position:absolute;left:左座標px;top:上座標px;visibility:hidden">
<img src="地図画像２" usemap="#clickablemap2">
</div>

<div id="map3" style="position:absolute;left:左座標px;top:上座標px;visibility:hidden">
<img src="地図画像３" usemap="#clickablemap3">
</div>

<div id="button" style="position:absolute;left:ボタン左座標px;top:ボタン上座標px">
<a href="JavaScript:dasu('map1');kesu('map2');kesu('map3')">地図１</a>
<a href="JavaScript:dasu('map2');kesu('map3');kesu('map1')">地図２</a>
<a href="JavaScript:dasu('map3');kesu('map1');kesu('map2')">地図３</a>
</div>

</body></html>
↑IE4専用ならこの DHTML でなんとかなるのでは？
　これにクリックしたボタンの色を変えるスクリプトとかを追加すると
見栄えが良くなるかも。

やま 1998/11/25(水) 15:16:57
[[解決]]
出来ました！おぱく堂さん、本当にありがとうございます。
ソースまで書いていただいて、なんとお礼を言ったらいいか・・・
返事が遅れてすみません。実は<MAP>タグの存在を知らず、
クリッカブルマップと言えばCGIかASPでしかできないものだと
それまで思っていたもので、「えっ？！」と思って
しばらくうろうろしていたのです。
ともあれ大解決です。本当にありがとうございました！

[上に] [前に] [次に]