- ベストアンサー
HTMLで画像の切り替えと説明文の表示を行う方法
- HTMLとJavaScriptを使用して画像の切り替えと説明文の表示を行う方法について教えてください。
- 数百枚の画像を切り替えながら、各画像に対応する説明文を表示する方法を知りたいです。
- Paintで画像に直接描くことは現実的ではないので、テキストファイルを用意し、それを表示する方法を教えてください。
- proton1111
- お礼率75% (3/4)
- その他（Webサービス・アプリ）
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
>1.jpg、2.jpegの説明は切り替えられましたが、3.jpegの説明へは切り替えられませんでした。 実ソースを簡略化して貼り付けてもらえれば。 わかる範囲で回答しますよ。
その他の回答 (2)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
<style> div#picarea { position:relative; width:572px; /* 画像の幅を入れておく width */ height:560px; /* 画像の高さを入れておく height */ } div#picarea div { position:absolute; } </style> コンテンツA <div id="picarea"> <div class="pic"><img src=pic.jpg></div> <div class="info"> ここは画像の上に重なってます<br> ここは画像の上に重なってます<br> </div> </div> コンテンツB 暇つぶし程度に書いてるので。。なんですが＾＾ で、この時の、 div#picarea div.picを画像切り替え 厳密には、div#picarea div.pic img内のソース属性 div#picarea div.infoをinnnerで 画像の切り替え時に書き換えれば、それでOKかなと。 名前にダブりがないなら、、 "#picarea .info"とか、タグを省略してもセレクタとしては 拾えますがね。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
画像のmypicのポジションをposition:relativeにでもして その上に、もう一つHTMLのDIVを作り そこに表示するのはどうでしょ？ おまけ var num = 0; function go_forward(){ if (num == 2) { ←これだと３が入ってしまった時 num = 0; } else { num ++; ←永遠にカウントアップしてしまう。 } なので、 if (num<2) num++; else num=0; と範囲に入ってる時カウント、それ以外でリセットの方が シンプルですが。 略式なら num=num<2? num+1:0; ただ、「２」という数字が気になるので、なんとか なくしたい！とすれば。。 足す側 num=(num+1)%pics_src.count; 引く側 num=(num-1+pics_src.count)%pics_src.count; 割ったあまりをいれてるだけです。 ０/３は、0あまり「0」ですので「０」 １/３は、0あまり「１」ですので「１」 ２/３は、0あまり「２」ですので「２」 ３/３は、１あまり「0」ですので「０」 と、0～２がループしてくれて便利ですよ。 マイナス側に、１つ「割り切れる値を入れる」のは、 元の数字が０だったとき、まずいからで。。 話は戻りますが、 ２つのHTML（絵の上にDIV要素）の場合、 絵のサイズに依存してしまうので、スクロールバーを付けるなどで そこだけで、テキストをスクロールできるようにすれば、 結構いい感じ？にはなるのではないでしょうか。。 ついでに、マウスフォーカスでその絵の「上」に カーソルが来た時だけ、その上に重なるテキストを display:none;制御してあげれば、見たいときだけ見れる！ などにつながり、綺麗かなと。。 って感じでどうでしょ。。
お礼
ありがとうございます。 numの説明も丁寧で分かりやすかったです。 ただ初心者で申し訳ありませんが、こんなイメージにしか理解できていません。 <div align="center"> <p>説明文</p> <img id="mypic" src="./jpg/1.jpeg" height="600px"> </div> 1.jpeg,2.jpeg,3.jpegごとに説明文を変えるところが理解できていません。恐れ入りますが、そこのところをもう少しご教授願えませんでしょうか
お礼
何回もありがとうございます。 超初心者で、仰ることのすべてが理解できているわけではありません。 でも、innnerHTMLでフォローしようとしました。 1.jpg、2.jpegの説明は切り替えられましたが、3.jpegの説明へは切り替えられませんでした。 お手数をおかけしました。 もっと考えてみます。 ありがとうございました。