OKWAVEのAI「あい」が美容・健康の悩みに最適な回答をご提案!
-PR-
解決
済み

JavaScript(?)で入替えた画像をクリッカブルマップにする方法

  • 困ってます
  • 質問No.213452
  • 閲覧数541
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 56% (39/69)

件名の通り、JSで入替えた画像をクリッカブルマップにしたいのです。一応画像の入替えはコントロールできるようになったのですが、入替え後のイメージを<MAP>制御したいのですが・・・方法がわからない・・・どうか教えて下さい。

ソース(抜粋)
<SCRIPT Language="JavaScript">
<!--
function ImgSwap(imgName, imgSrc){
var appVer=parseInt(navigator.appVersion);
var isNC=(document.layers && (appVer >= 4));
var isIE=(document.all && (appVer >= 4));
if (isNC || isIE){
if (document.images){
var img = document.images[imgName];
if (!img) img = ImgFind(document, imgName);
if (img) img.src = imgSrc;
}
}
}

//--></SCRIPT>


<TR><TD align="center" valign="top" height="165" background="../img/tv-frame.gif">
<IMG src="../img/off.gif" name="TV" border="0">
</TD></TR>
<TR><TD align="center" valign="top">
<FORM><INPUT type="button" value="Top" name="top" onclick="ImgSwap('TV', '../img/top.gif')"><INPUT type="button" value="40's" name="40's" onclick="ImgSwap('TV', '../img/40s.gif')"><INPUT type="button" value="50's" name="50's" onclick="ImgSwap('TV', '../img/40s.gif')"></FORM>
</TD></TR>

この40sないし50sというGIFに<MAP>制御を施したいのです・・・御指導宜しく御願いします。
通報する
  • 回答数1
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.1
レベル14

ベストアンサー率 24% (612/2465)

具体的なイメージが湧かないので、とりあえず同じ位置に別画像を置いて、クリックするとクリッカブルマップと画像を入れ替えるサンプルを書きます。
----
<HTML>
<HEAD>
<MEAT http-equiv="Content-script-type" content="text/javascript">

<SCRIPT type="text/javascript">
var MAPMAX=2; //切替マップの上限
function chgMAP(num)
{
// 全部のクリッカブルマップ画像を非表示にする
for(i=1; i<=MAPMAX; i++) {
document.images["MP"+i].style.visibility = "hidden";
}
// 指定のクリッカブルマップ画像を表示にする
document.images["MP"+num].style.visibility = "visible";
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
<IMG SRC="img1.jpg" name="MP1" usemap="#MPT1" style="position:absolute;top:Opx;left:Opx;visibility:visible">
<IMG SRC="img2.jpg" name="MP2" usemap="#MPT2" style="position:absolute;top:Opx;left:Opx;visibility:hidden">
<MAP name="MPT1">
<area shape="rect" coords="0,0,50,100" href="javascript:chgMAP(2)">
</MAP>
<MAP name="MPT2">
<area shape="rect" coords="50,0,100,100" href="javascript:chgMAP(1)">
</MAP>
</HTML>
お礼コメント
macky0225

お礼率 56% (39/69)

説明があまり上手くできなかったので混乱させてしまったようで・・・すみませんでしたm(__)m
なるほど、この様な手法を用いるのですなφ(..)メモメモ
有難う御座います。さっそくこのやり方でやってみます
投稿日時 - 2002-02-08 11:30:14
-PR-
-PR-
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ