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

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

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

#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

こんな感じでしょうか



<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

ソースをコピーして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&Aランキング