件名の通り、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>制御を施したいのです・・・御指導宜しく御願いします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

具体的なイメージが湧かないので、とりあえず同じ位置に別画像を置いて、クリックするとクリッカブルマップと画像を入れ替えるサンプルを書きます。


----
<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>
    • good
    • 0
この回答へのお礼

説明があまり上手くできなかったので混乱させてしまったようで・・・すみませんでしたm(__)m
なるほど、この様な手法を用いるのですなφ(..)メモメモ
有難う御座います。さっそくこのやり方でやってみます

お礼日時:2002/02/08 11:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

Q 内に書くことはできません」

元アルバイト先に頼まれてサイトを作り運営しているのですが、わからないことがあるので教えて下さい。

サイトはXHTML1.0 Transitional で作っており、ここに、http://fmono.sub.jp/ の「w3Analyzer」を組み込みアクセス解析をしています。サイト自体もこのアクセス解析も正常に動作しています。
ただ、このサイトをhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlで構文チェックすると、アクセス解析のタグにエラー「<img>を~行目の<script>~</script>内に書くことはできません。」が表示されてしまいます。
エラーが表示されるタグは下記のようなものです。

<script type="text/javascript">
document.write('<img src="http://~/w3a/writelog.php?ref='+document.referrer+'" width="1" height="1" />');
</script> >

アクセスログは普通に取得できているので問題ないのですが、もし上記エラーを回避する方法があればご教授下さい。よろしくお願いします。

元アルバイト先に頼まれてサイトを作り運営しているのですが、わからないことがあるので教えて下さい。

サイトはXHTML1.0 Transitional で作っており、ここに、http://fmono.sub.jp/ の「w3Analyzer」を組み込みアクセス解析をしています。サイト自体もこのアクセス解析も正常に動作しています。
ただ、このサイトをhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlで構文チェックすると、アクセス解析のタグにエラー「<img>を~行目の<script>~</script>内に書くことはできません。」が表示されてし...続きを読む

Aベストアンサー

XHTML には「ホンモノの XHTML」と「ニセモノの XHTML」があります。「ホンモノの XHTML」とは application/xml または application/xhtml+xml として識別されるもの、「ニセモノの XHTML」は text/html で識別されるものです。

※実際にはどちらも本物です。ここでは「HTML 互換として処理される XHTML」を「ニセモノ」、「XML として解析される XHTML」を「ホンモノ」と、カタカナ&カッコ付きで書いています。

「ホンモノの XHTML」として見れば、質問文のソースは妥当性違反です。なぜなら、img 要素のタグがエスケープされていないため、これがスクリプトの一部ではなく文書構成要素だと判断されるからです。XHTML 1.0 のスキーマは、script 要素内に img 要素が出現することを許していません。もちろん、スクリプトとしても正しく動作しません。

従って、XML のルールに従ってエスケープする必要があります。特に「<」と「&」は必ずエスケープしなければなりません。

document.write('&lt;img .... />');

ですが面倒なことに、「ニセモノの XHTML」ではこれが動作しなくなります。「ニセモノの XHTML」は、HTML との互換性のために script 要素内の「<」「&」をうまく扱ってくれるのですが、それが仇となり、上記では「&lt;」が「<」に戻りません。

ならば、コメント区間にするのはどうでしょう。XML でもコメント内なら「<」「&」が現れても大丈夫です(ただし「--」だけは駄目です)。

<script type="text/javascript"><!--
document.write('<img .... />');
//--></script>

「ニセモノの XHTML」ならこれでも構いません。しかし、「ホンモノの XHTML」では、コメントは本当に破棄されてしまい、上記では動作すらしなくなります。

そこで、XML/HTML のルールを使わず、JavaScript のルールでエスケープすることを考えます。

document.write('\u003Cimg .... />');

これなら大丈夫でしょう。XML/HTML に限らず、言語が混在する際は必ず適切なエスケープを施す必要があります。エスケープを避けたければ外部スクリプトにして下さい。


なお、ここには別の問題があります。そもそも「ホンモノの XHTML」では、document.write を使用できません。これは HTML 互換の機能だからです(HTML5 に明記されています)。

XHTML を採用するのであれば、それが「ホンモノ」でも「ニセモノ」でも大丈夫なよう、document.write に頼らないコードを作成して下さい。あるいは try...catch で括るなどして、「ニセモノ」として処理されたときのみコードが動作するよう工夫して下さい。あるいはいっそ、XHTML を止めるのも 1 つの選択でしょう。

XHTML には「ホンモノの XHTML」と「ニセモノの XHTML」があります。「ホンモノの XHTML」とは application/xml または application/xhtml+xml として識別されるもの、「ニセモノの XHTML」は text/html で識別されるものです。

※実際にはどちらも本物です。ここでは「HTML 互換として処理される XHTML」を「ニセモノ」、「XML として解析される XHTML」を「ホンモノ」と、カタカナ&カッコ付きで書いています。

「ホンモノの XHTML」として見れば、質問文のソースは妥当性違反です。なぜなら、img 要素のタ...続きを読む

Qで、Q1に後で値を設定して表示するには

お世話になります。
<input type="text" name="Q1">で、Q1に後で値を設定して表示するにはどうしたら良いものでしょうか。
name="Q1"
と、しているので、
onMousedown="function()"
で、nameでしてしたエリアに値を書き込めば、できると思うのですが、
このfunction()をどのように書いたらよいものか、いろいろ調べてもわかりません。
何とかご教示願えないでしょうか。
よろしくお願いします。

Aベストアンサー

javascriptを利用することで出来ます。
こんな感じで動くでしょう。
ちなみにテキストボックスなどをjavascriptで操作する場合は
idをつけておくと便利です。

これ以上をやりたいというのであれば
参考URLなど見て勉強してみてください
<html>
<head>

</head>
<body>

<input type="text" id="Q1" name="Q1" onmousedown="hoge()">
</body>
<script type='text/javascript'>
function hoge()
{
Q1.value = ""; //""のなかに設定する値
}
</script>

参考URL:http://www.parkcity.ne.jp/~chaichan/src/javasc21.htm

Qでボタンを押したときの処理

ボタンをクリックしたらalertによって下記のような文字列、trueかfalseを返すようにしたいのです。

fulction hantei(){

if(str.length > 6){
document.write("true")
}
else{
document.write("false")
}
}

あと、functionにはdocument.writeが使えないようなのですが、そうならばどのようにして表示させるのでしょう?

よろしくお願いします。

Aベストアンサー

"alertによって"の表現が、どうにでもとれます。
「警告ダイアログを表示させたい」という意味であれば、#1の方の説明の通りです。
画面上のどこか文字列を変更したいならば、document.all(ID) と innerHTMLを利用できます。ただしNetscapeでは、4.x系も、7.x系も効きません。Opera、Firefoxを有効なようですね。

以下にサンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>てすと</title>
<script type="text/javascript">
<!--
function func(message)
{
 var targetItem = document.all("alertTarget");
 targetItem.innerHTML = message;
}
// -->
</script>
</head>
<body>
<form target=".">
<span id="alertTarget"></span><br>
<input type="button" value="alert A" onclick="func('aaaa')">
<input type="button" value="alert B" onclick="func('bbbb')">
</form>
</body>
</html>

"alertによって"の表現が、どうにでもとれます。
「警告ダイアログを表示させたい」という意味であれば、#1の方の説明の通りです。
画面上のどこか文字列を変更したいならば、document.all(ID) と innerHTMLを利用できます。ただしNetscapeでは、4.x系も、7.x系も効きません。Opera、Firefoxを有効なようですね。

以下にサンプル

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<me...続きを読む

Qタグをでくくりたい

Javascript初心者を脱出したい者です。

<img>タグをgetElementsByTagNameで取得し、
<span class="align_left"><img .... /></span> みたいに囲いたいと考えています。

条件として、<img>タグの親ノードは<p>タグです。
全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert nextContent</title>
<script type="text/javascript">
<!--
  window.onload = function() {
    var out_span = document.createElement('span');
    out_span.setAttribute('class', 'align_left');

    var list = document.getElementsByTagName('img');
    var img = list[0];
    /* この後、
      どうやって、out_span を挿入すればよいのか?
     */
  }
//-->
</script>
</head>
<body>
<h1> IMGタグに親ノードを追加したい </h1>
<p>
文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。
<img src="../images/logo.gif" alt="Logo" />
</p>
</body>
</html>

★ インデントは全角スペースで行っております。

ご教示お願いします。

Javascript初心者を脱出したい者です。

<img>タグをgetElementsByTagNameで取得し、
<span class="align_left"><img .... /></span> みたいに囲いたいと考えています。

条件として、<img>タグの親ノードは<p>タグです。
全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert nextContent</title>
<script type="text/javascript">
<!--
  window.onload = function() {
    v...続きを読む

Aベストアンサー

// この後...
out_span.appendChild(img.parentNode.replaceChild(out_span, img));

nodeObject.parentNode
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-parentNode
nodeObject.replaceChild( newChild, oldChild )
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-replaceChild
nodeObject.appendChild( newChild )
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-ref/Core/Node.html#Node-appendChild

Q

数十の<a>タグがあるHTMLファイルの中で、
<div id="blank">で囲まれた<a>タグ群のみをすべてtarget="_blank"にしたいと考えています。
該当する<a>タグすべてにtarget="_blank"を書くと、HTMLファイルの容量が大きくなるので、CSSのIDとJavaScriptを組み合わせて、実現できないものでしょうか。

Aベストアンサー

<base target="_blank">
<div id="blank">
 <!-- -->
</div>
<base target="_self">


人気Q&Aランキング

おすすめ情報