電子書籍の厳選無料作品が豊富！

写真の下に説明文

解決済

  • 質問者：greensnow
  • 質問日時：
  • 回答数：3件

こんにちは。
今アルバムのページを作っています。
右側に縮小した写真を縦に並べ、その写真をクリックすると画面中央に拡大されて映るというものです。
拡大された時、写真の簡単な説明文を写真の下に表示させたいんですが、やり方がわかりません。検索してみたんですが、それらしき物が見つからずこちらに参りました。

だいぶ略してますが、下記のようなソースを使って作りますよね？これで、中央に表示させるまでは出来ました。後は各写真の説明文の表示だけなんです。

<script type="text/javascript">
<!--
var img01 = "../photoothers/stamp.jpg";
function startimg(I){
　document.image.src=I;
　}
//-->
</script>

＝中略＝

<table>
<tr>
<td align=center>
<table border =1>
</td>
</tr>
<tr>
<td align=center>
<img src="../gif/●.jpg" name="image">
</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>
</td>
</tr>
</table>
</td>
</tr>
</table>

宜しくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： gura_
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

お返事遅くなり申し訳ありませんでした。
コピー＆パースとして試してみたところ、思っていた通りのものが出来ました！
何度もありがとうございました。

通報する
お礼日時：2005/04/08 19:02

No.2

  • 回答者： gura_
  • 回答日時：

こんな感じでしょうか



<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>

補足日時：2005/04/03 23:34
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： rika3714
  • 回答日時：

ソースをコピーしてhtml形式で確認してみました。



<img src="../gif/●.jpg" width="130" height="100"></a>
<BR>説明文</td>
</tr>
</table>

<a></td>の間に<BR>を説明文と入力すると
一応写真の下に説明文出ることは出るんですが・・・
    • good
    • 0
    • 件
通報する
この回答へのお礼

どうもありがとうございます。
私もこのやり方はやってみたんですが、これですと縮小写真の下に説明が表示されますよね？拡大された写真の下に表示したいんです。
そのやり方はご存じないでしょうか？

通報する
お礼日時：2005/04/03 05:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報