人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascript で質問です。
javascript ON なら画像Aを表示する。
javascript OFF なら画像Bを表示する。
といった制御は行えますか?
わかる方ご指南ください。

●質問者: rizo
●カテゴリ:コンピュータ
✍キーワード:JavaScript ON 指南 画像
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● llusall
●40ポイント

以下にサンプルを記述します。

JavaScritpが有効な場合は、スクリプトが実行されて、画像A(gazou_A.jpg)が表示されます。

JavaScritpが無効な場合は、NOSCRIPTタグが解釈され、画像B(gazou_B.jpg)が表示されます。



<html>

<body >

<img id="idImgA" src="gazou_A.jpg" style="display:none;">


<NOSCRIPT>

※ JavaScriptが無効です<BR>

<img id="idImgB" src="gazou_B.jpg" >

</NOSCRIPT>

</body>

</html>

<script language='JavaScript'> 

<!-- 

document.all.idImgA.style.display = "block";

//--> 

</script> 

◎質問者からの返答

NOSCRIPTというのを始めて知りました。

なるほど、ありがとうございます。

早速試してみます。


2 ● Paul
●20ポイント

単純に、

<img name="changeimg" src="javascriptオフのときの画像" onload=loadimg() />

とかにして、

function loadimg {

document.changeimg.src="javascriptオンのときの画像"

}

で良いと思います。

http://www.openspc2.org/reibun/javascript/image/003/index.html

◎質問者からの返答

回答ありがとうございます。

このやり方も試してみます。


3 ● aki73ix
●50ポイント ベストアンサー

NOSCRIPTタグを使用します

まず、JavaScriptで document.write でIMGタグで出力し、

NOSCRIPTタグ内で IMGタグをそのまま記述します

JavaScript 非実行時にはNOSCRIPT内のタグが表示されるわけです

この例ではON時にimgA.gif、OFF時にはimgB.gifが表示されます

http://nifberry.727.net/test/hatena196.htm

<HTML>
<BODY>
<script language="JavaScript1.1">
<!--
  document.write('<IMG SRC="imgA.gif">');
// -->
</script>
<NOSCRIPT>
<IMG SRC="imgB.gif">
</NOSCRIPT>
</BODY></HTML>

参考

http://www.htmq.com/html/noscript.shtml

◎質問者からの返答

ここでもNOSCRIPTでてきましたね。

参考URLありがとうございます。


4 ● villain
●30ポイント

最初に画像BをHTMLとして記述してJavaScriptで画像Aに書き換え

ればいいのではないでしょうか。

ただし、ページの読み込みが完了するまではJavaScriptは動作

しないので一瞬だけ画像Bは表示されますが...。

(これは仕様です)


こんな感じ(簡易的)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<title>画像切り替え</title>
<script language="JavaScript">
<!--
function ChangeImg(img) {
 document.all.id.innerHTML="<img src='" + img + "'>";
 return;
}
//-->
</script>
</head>
<body onload="ChangeImg('画像AのURL');">
<span id="id"><img src="画像BのURL"></span>
</body>
</html>


innerHTMLで画像の変更

◎質問者からの返答

このようなやり方もあるのですね。

回答ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ