1

画像の説明をメインの画像の下に配置しようとしていますが、ドリームウィーバーで作成された画像ギャラリーのサムネイルの上に画像の説明を配置しようとすると、クリックすると画像が切り替わります。問題が発生しているページは次のとおりです。

http://marychatham.com/work.html

「磁器。高さ14.5インチ x 幅8インチ」。イメージスワップが発生した場合に変更したい記述です。

これが私のコードです:

<div id="MainImage"><img src="images/MaryChatham_01.png" name="main" id="main"></div>
<div id="Description">
<h4>Porcelain. 14.5" H x 8" W.</h4>
</div>
<div id="Thumbs">
    <div id="Thumb1"><a href="javascript:;" onClick="MM_swapImage('main','','images/MaryChatham_01.png',1)"><img src="images/MaryChatham_Thumbnail_01.png" alt="Por" name="t1" id="t1" border="0"></a></div>
    <div id="Thumb2"><a href="javascript:;" onClick="MM_swapImage('main','','images/MaryChatham_02.png',1)"><img src="images/MaryChatham_Thumbnail_02.png" alt="Ce" name="t2" id="t2" border="0"></a></div>
<div id="Thumb3"><a href="javascript:;" onClick="MM_swapImage('main','','images/MaryChatham_03.png',1)"><img src="images/MaryChatham_Thumbnail_03.png" name="t3" id="t3" border="0"></a></div>
    <div id="Thumb4"><a href="javascript:;" onClick="MM_swapImage('main','','images/MaryChatham_04.png',1)"><img src="images/MaryChatham_Thumbnail_04.png" name="t4" id="t4" border="0"></a></div>
    <div id="Thumb5"><a href="javascript:;" onClick="MM_swapImage('main','','images/MaryChatham_05.png',1)"><img src="images/MaryChatham_Thumbnail_05.png" name="t5" id="t5" border="0"></a></div>
    <div id="Thumb6"><a href="javascript:;" onClick="MM_swapImage('main','','images/MaryChatham_06.png',1)"><img src="images/MaryChatham_Thumbnail_06.png" name="t6" id="t6" border="0"></a></div>
    <div id="Thumb7"><a href="javascript:;" onClick="MM_swapImage('main','','images/MaryChatham_07.png',1)"><img src="images/MaryChatham_Thumbnail_07.png" name="t7" id="t7" border="0"></a></div>
    <div id="Thumb8"><a href="javascript:;" onClick="MM_swapImage('main','','images/MaryChatham_08.png',1)"><img src="images/MaryChatham_Thumbnail_08.png" name="t8" id="t8" border="0"></a></div>
</div>
</div>
</div>
</body>
</html>

ご協力ありがとうございました。私は何日も立ち往生しています。

4

1 に答える 1

1

h4「説明」divのタグにid;を付けます。何かのようなもの:

<div id="Description">
<h4 id="caption">Porcelain. 14.5" H x 8" W.</h4>
</div>

次に、その画像のキャプションにしたいものをそれぞれaに付けます。title例えば:

<div id="Thumb1">
<a href="javascript:;" title="This is my sweet caption." onClick="MM_swapImage('main','','images/MaryChatham_01.png',1)">
<img src="images/MaryChatham_Thumbnail_01.png" alt="Por" name="t1" id="t1" border="0">
</a>
</div>

次に、使用しているものを使用する代わりに、MM_swapImageこれを使用します。

onClick = "document.getElementById('main').src = 'images/MaryChatham_01.png'; document.getElementById('caption').innerHTML = this.title;"

それも必要ありませんhref="javascript:;"。だけhref=""が好ましいです。したがって、各親指は次のようになります。

<div id="Thumb1">
<a href="" title="This is my sweet caption." onClick="document.getElementById('main').src = 'images/MaryChatham_01.png'; document.getElementById('caption').innerHTML = this.title;">
<img src="images/MaryChatham_Thumbnail_01.png" alt="Por" name="t1" id="t1" border="0">
</a>
</div>

超基本的な Javascript を知っていれば、これは実際には非常に簡単なことです。時間をかけて基本を学ぶことを強くお勧めします。達成できることに驚かれることでしょう。

于 2013-09-14T15:02:53.110 に答える