onclickで小さい画像を別の場所に大きな画像で表示することは出来たのですが、その時に別の場所に文字を表示したいのです。
(例えば:「山」の小さな画像をクリックすると大きな「山」の画像が表示されて←これはOK、
その下に「富士山」の文字を表示したい←これです。)
下記のようにしています。
<script language="javascript">
<!--
function Image(img){ document.getElementById("image").src=img}
//-->
</script>
</head>
<table>
<tr>
<td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td>
<td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td>
<td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td>
<td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td>
</tr>
<tr>
<td colspan="4"><img src="sample1.jpg" name="image"></td>
</tr>
<tr>
<td>***ここに文字を表示させたいのです***</td>
</tr>
</table>
宜しくお願いします。
No.3ベストアンサー
- 回答日時:
<script language="javascript">
<!--
function Image(e,img){
document.getElementById("image").src=img
document.getElementById("WW").innerHTML=e.getAttribute('alt')
}
//-->
</script>
</head>
<table>
<tr>
<td><img src="sample1_small.jpg" onclick="Image(this,'sample1.jpg')" alt="富士山0"></td>
<td><img src="sample2_small.jpg" onclick="Image(this,'sample2.jpg')" alt="富士山1"></td>
<td><img src="sample3_small.jpg" onclick="Image(this,'sample3.jpg')" alt="富士山2"></td>
<td><img src="sample4_small.jpg" onclick="Image(this,'sample4.jpg')" alt="富士山3"></td>
</tr>
<tr>
<td colspan="4"><img src="sample1.jpg" name="image"></td>
</tr>
<tr>
<td id="WW">***ここに文字を表示させたいのです***</td>
</tr>
</table>
無いものは表示できないので何処かに書いてそれを参照し、表示するだけです。
参考までにスクリプトはalt属性に文字を書いてid属性値にWWを持つ要素の中に表示しようと企んでいます。
No.2
- 回答日時:
<td><img src="sample1_small.jpg" onclick="Image('sample1.jpg')"></td>
<td><img src="sample2_small.jpg" onclick="Image('sample2.jpg')"></td>
<td><img src="sample3_small.jpg" onclick="Image('sample3.jpg')"></td>
<td><img src="sample4_small.jpg" onclick="Image('sample4.jpg')"></td>
この方式がそのまま使えませんか?
スクリプトがfunction Image(img)となっていますから、Image('***.jpg')の***.jpgの部分が毎回スクリプトのimgに代入されるのです。
意味分かるかな?処理対象が複数あっても大丈夫なようにできてます。
No.1
- 回答日時:
<script language="javascript">
<!--
function Image(img){
document.getElementById("image").src=img
document.all("change_txt").innerHTML = '富士山'
}
//-->
</script>
~ 中略 ~
<td><div id="change_txt"></div></td>
こんな感じで如何でしょう。
IE6でしか動作確認していないので古いブラウザとかだと動かないと思いますが、参考例にしてくださいとういうことで。
この回答への補足
早速のご回答有難う御座います。
とりあえず「山」の画像の処理は「ARAI9」さんので無事出来ました。が、
画像がこの他にいくつかあります。
その場合はどの様にしたらよろしいでしょうか?
重ね重ね申し訳御座いません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS 【CSS】:hasで可能? imgを含むtr要素を選択したい 1 2022/11/17 14:36
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
特定<table>内の<td>の色を変える
-
テーブルで複数行をまとめて非...
-
<td>の中のonClick="location" で
-
JavaScriptでテーブルをクリッ...
-
ハイパーリンクを別ウインドウ...
-
動的なtableの値を取得したい
-
プルダウンで選択すると、DBの...
-
JSで、テーブルのある行のみ、...
-
JavaScriptで特定のtdタグにcla...
-
ポップアップメニュー
-
至急!GetElementById でtdの...
-
sed を使って文字列削除
-
【秀丸マクロ】検索行と、その...
-
jquery datatablesを使用 イン...
-
CSVデータをツリー表示させたい
-
「オブジェクトは、このプロパ...
-
テーブルの項目の値取得
-
\\u30ad\\u30fc\\u30dc・・・と...
-
return trueとreturn falseの用...
-
追加ボタンを押した際に ok ボ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ハイパーリンクを別ウインドウ...
-
マウスをブラウザの外に出した...
-
JavaScriptで特定のtdタグにcla...
-
特定<table>内の<td>の色を変える
-
一覧から選択した行の行番号を...
-
tableの任意行にfocusをあてる
-
プルダウンで選択すると、DBの...
-
至急!GetElementById でtdの...
-
【UWSC】HTML内のある部分を抽...
-
javascript クリックすると、あ...
-
jsで質問です。 displayプロパ...
-
javascriptで質問です。 displa...
-
クリックされた罫表セルの行番...
-
テーブルの変数について
-
別ページからOnclickでテーブル...
-
スクロールバーの表示位置を変...
-
JavaScriptでテーブルをクリッ...
-
Selenium.ChromeDriverの使い方...
-
Excelで作ったhtmlファイルのサ...
-
チェックボックスにチェックが...
おすすめ情報