ここから本文です

onmouseoverで拡大表示させた画像の下に、テキスト文を付けたいです。

アバター

ID非公開さん

2018/12/2913:35:33

onmouseoverで拡大表示させた画像の下に、テキスト文を付けたいです。

HTMLファイル内で、javascriptを使用して、画像にカーソルを合わせると拡大画像を表示させるように記述しています。拡大画像の下に、テキストを入れたいのですが、知識不足で上手くいきません。
何を追加すれば良いでしょうか?知識のある方、ご助言お願いいたします。
下記のHTMLコードは、元がごちゃごちゃしているので一部を省略しています(myChgPicのtdは4つですが、内3つ省きました。画像のURLは#にしています。)。
そもそもjavascriptで大丈夫でしょうか?(jQueryなど…)
勉強不足で行き詰まってしまい…よろしくおねがいいたします。

<script type="text/javascript">
<!--
// マウスが乗ったので 指定の画像を表示させる
function myChgPic( myPicURL ){
document.myBigImage.src = myPicURL; // 画像を表示
document.getElementById ("idBigImage")
}
// -->

</SCRIPT>

<table>
<tr>
<td>
<div id="idBigImage">
<img src="#" name="myBigImage" width="500" height="500" border="0">
</div>
</td>
<td class="myChgPic" width="90">
<a href="javascript:void(0)" onmouseover="myChgPic( '#' )" onmouseout="myClearPic()">
<img src="#" width="90" height="66" hspace=="20"></a>
</td>
</tr>
</table>

td&amp;gt,idBigImage&amp;quot,myPicURL,table&amp;gt,onmouseover,tr&amp;gt,td class

閲覧数:
38
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

lar********さん

2018/12/2915:00:41

回答します。

>そもそもjavascriptで大丈夫でしょうか?(jQueryなど…)
→javascriptでも問題ありません。

質問者さんのソースとは大きく違いますが、ご要望どおりのサンプルソースを作成してみましたので、参考にしてみてください。
※説明文は、imgタグのaltに設定してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<style type="text/css">
table tbody tr td {
border: 1px solid #9d9d9d;
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.select_img img {
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
//デフォルト表示設定
document.getElementById("view_img").src = "image/Flower1.jpg";
document.getElementById("view_text").innerText = "花1";

//イベント定義
for (var i = 0; i < document.getElementsByClassName("select_img").length; i++) {
//select_imgクラスにマウスカーソルが重なったときのイベント処理
document.getElementsByClassName("select_img")[i].onmouseover = function (elm) {
//大きい画像用のimgタグにマウスカーソルを合わせた画像を設定
document.getElementById("view_img").src = this.children[0].src;
//説明文にマウスカーソルを合わせたaltを設定
document.getElementById("view_text").innerText = this.children[0].alt;
}
}
}
</script>
<title></title>
</head>
<body>
<table>
<tbody>
<tr>
<td rowspan="4" style="width: 400px;">
<img id="view_img" src="#" alt="選択画像" style="width: 400px; height: 400px;" />
</td>
<td class="select_img">
<img src="image/Flower1.jpg" alt="花1" />
</td>
</tr>
<tr>
<td class="select_img">
<img src="image/Flower2.jpg" alt="花2" />
</td>
</tr>
<tr>
<td class="select_img">
<img src="image/Flower3.jpg" alt="花3" />
</td>
</tr>
<tr>
<td class="select_img">
<img src="image/Flower4.jpg" alt="花4" />
</td>
</tr>
<tr>
<td id="view_text" style="height: 50px; text-align: center; border: 0;"></td>
<td style="height: 50px; border: 0;"></td>
</tr>
</tbody>
</table>
</body>
</html>

  • アバター

    質問者

    ID非公開さん

    2018/12/3000:15:19

    ご回答ありがとうございます!
    さっそく、コーディングさせていただきました。いい感じなのですが…、画像によって説明文が長く改行したかったり、リンクをつけたかったりが出て来まして…。alt属性でなければ厳しいでしょうか?
    もう一つ、imgに直接select_imgのclassをつけて、tdを一つにまとめるのは可能ですか?(一つのtd内に4つの画像が入るイメージです)
    要望ばかりで申し訳ありません、厳しければ諦めます。
    回答いただけると幸いです。よろしくお願いします。

  • その他の返信(2件)を表示

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

アバター

質問した人からのコメント

2018/12/31 16:10:37

すごいです、ほぼ理想を実現することができました…!
innnerHTML、勉強になります!私、プログラミングをもっと勉強しないといけないですね…
これですっきり年を越すことができそうです。
私一人では絶対できませんでした(教えていただいたことも知識を超えていた)。
本当にありがとうございました…!!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる