- ベストアンサー
写真の下に説明文を表示する方法
- アルバムのページで写真の下に説明文を表示する方法について教えてください。
- 検索してもそのような方法が見つからず、困っています。
- 写真をクリックすると中央に拡大表示され、その下に説明文を表示したいです。
- みんなの回答 (3)
- 専門家の回答
質問者が選んだベストアンサー
#2です。 では、こんな感じでしょうか↓ <html> <head> <script type="text/javascript"> <!-- var img01 = "../gif/japan.jpg"; var txt01 = "日本"; var img02 = "../gif/france.jpg"; var txt02 = "フランス"; var img03 = "../gif/germany.jpg"; var txt03 = "ドイツ"; function startimg(I,J){ document.image.src=I; document.all.txt.innerText = J ; } //--> </script> </head> <body> =中略= <table> <tr> <td align=center> <table border=1> <tr> <td align=center> <img src="../gif/japan.jpg" name="image"><br> <div id="txt">日本</div> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01,txt01)"> <img src="../gif/japan.jpg" width="130" height="100"></a> <br><br> <a href="javascript:startimg(img02,txt02)"> <img src="../gif/france.jpg" width="130" height="100"></a> <br><br> <a href="javascript:startimg(img03,txt03)"> <img src="../gif/germany.jpg" width="130" height="100"></a> </td> </tr> </table> </td> </tr> </table> </body> </html>
その他の回答 (2)
- gura_
- ベストアンサー率44% (749/1683)
こんな感じでしょうか <html> <head> <script type="text/javascript"> <!-- var img01 = "../photoothers/stamp.jpg"; var txt01 = "クリック後 説明文"; function startimg(I){ document.image.src=I; document.all.txt.innerText = txt01; } //--> </script> </head> <body> =中略= <table> <tr> <td align=center> <table border=1> <tr> <td align=center> <img src="../gif/●.jpg" name="image"><br> <div id="txt">クリック前</div> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01)"> <img src="../gif/●.jpg" width="130" height="100"></a> <BR>上図をクリック </td> </tr> </table> </td> </tr> </table> </body> </html>
補足
どうもありがとうございます。これです、私が求めていた物は!これを応用して写真が複数の時をやってみたんですが、うまくいきません。説明文が全て「ドイツ」になってしまうんです。どこがおかしいのでしょうか?引き続きご教示いただければ幸いです。 <html> <head> <script type="text/javascript"> <!-- var img01 = "../gif/japan.jpg"; var txt01 = "日本"; var img02 = "../gif/france.jpg"; var txt02 = "フランス"; var img03 = "../gif/germany.jpg"; var txt03 = "ドイツ"; function startimg(I){ document.image.src=I; document.all.txt.innerText = txt01; document.image.src=I; document.all.txt.innerText = txt02; document.image.src=I; document.all.txt.innerText = txt03; } //--> </script> </head> <body> =中略= <table> <tr> <td align=center> <table border=1> <tr> <td align=center> <img src="../gif/japan.jpg" name="image"><br> <div id="txt">日本</div> </td> </tr> </table> </td> <td> <table align=right"> <tr> <td align=center> <a href="javascript:startimg(img01)"> <img src="../gif/japan.jpg" width="130" height="100"></a> <br><br> <a href="javascript:startimg(img02)"> <img src="../gif/france.jpg" width="130" height="100"></a> <br><br> <a href="javascript:startimg(img03)"> <img src="../gif/germany.jpg" width="130" height="100"></a> </td> </tr> </table> </td> </tr> </table> </body> </html>
- rika3714
- ベストアンサー率39% (47/119)
ソースをコピーしてhtml形式で確認してみました。 <img src="../gif/●.jpg" width="130" height="100"></a> <BR>説明文</td> </tr> </table> <a></td>の間に<BR>を説明文と入力すると 一応写真の下に説明文出ることは出るんですが・・・
お礼
どうもありがとうございます。 私もこのやり方はやってみたんですが、これですと縮小写真の下に説明が表示されますよね?拡大された写真の下に表示したいんです。 そのやり方はご存じないでしょうか?
お礼
お返事遅くなり申し訳ありませんでした。 コピー&パースとして試してみたところ、思っていた通りのものが出来ました! 何度もありがとうございました。