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

画像の切替え方について教えてください。

<span onClick=”parent.bSound=!parent.bSound;if(parent.bSound)this.innerText=’画像1’;else this.innerText=’画像2’;setTimeout(’parent.speak.editword.focus();’, 100);”><script>if(parent.bSound)document.write(’<img src=”bt_sound.gif”>’);else document.write(’<img src=”bt_sound_off.gif”>’);</script></span>

ページの一部なのですが、現状ではデフォルトで「bt_sound_off.gif」が表示されています。
クリックすると『画像1』もう一度クリックすると『画像2』と表示され、以降画像1と画像2の繰り返しになります。

この『画像1』と『画像2』のところにテキストではなく画像を入れたいです。

なるべく今の形式をくずさない方法を教えてください。
よろしくお願いします!

●質問者: kalkal
●カテゴリ:ウェブ制作
✍キーワード:GIF Write クリック テキスト デフォルト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● jouno
●30ポイント

http://www.tohoho-web.com/js/dom.htm

ドキュメントオブジェクトモデル(DOM)

基本的には、document.writeではなく、innerHTMLを使うだけです。少し形式が違いますが、たとえば、こんな感じです。


<script>

var bSound = True;

function func(obj){


if(bSound) obj.innerHTML=’<img src=”bt_sound.gif” />on’;

else obj.innerHTML=’<img src=”bt_sound_off.gif” />off’;

bSound=!bSound;

}

</script>

<span onClick=”func(this);” id=”test”>test</span>

◎質問者からの返答

ありがとうございます。早速実験してみます。


2 ● dungeon-master
●50ポイント

画像にオブジェクトを識別する名前をつければ操作できるようになります。

this.innerText=’画像1’→ document.bt.src=’bt_sound.gif’

this.innerText=’画像2’→ document.bt.src=’bt_sound_off.gif’

後は、document.write で書いている両方の<img>タグに name=”bt” をいれます。

◎質問者からの返答

ありがとうございました!

解決しました!

関連質問


●質問をもっと探す●



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