0

まず、私はJavascriptにまったく慣れていませんが、HTML/CSSの経験があります。私はウェブサイト用のhtml/javascript画像ギャラリーを作成しようとしています。（おそらくPHPで行う方がはるかに簡単ですが、セキュリティ上の理由から、WebコーディネーターはサーバーでPHPを無効にしました）。

とにかく私が持っているのは、アルバムリスト、アルバムブラウザ、フォトビューアをそれぞれ異なるdivと2つのiframeで表示するページです。誰かがアルバムリストからアルバムをクリックすると、アルバムブラウザセクションでページが開くように設定しました（iframe：「browser-frame」は特定のアルバムのすべての画像のサムネイルを表示します）。アルバムブラウザで誰かが画像をクリックすると、その画像がフォトビューアセクションに表示されるように設定しようとしています（iframe：「ビューアフレーム」は写真自体を表示します）。

ビューアーフレーム内の写真をビューアーフレームに設定されたサイズより大きくしたくなかったので、設定されたサイズのクラス（スタイルシート）は次のとおりです。

...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />              
</div>
</body>...

次に、画像のsrcを変数に更新するスクリプトを作成しました：image_to_be_viewedそしてそれをimage-changer.jsと呼びました

// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}

そして、ビューアフレームページにスクリプトを追加して、次のようにします。

...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>              
</div>
</body>...

ここで、ブラウザフレームに読み込まれたページで、画像の1つをクリックするたびに、グローバル変数'image_to_be_viewed'の値が、クリックされた画像のソースに次のように変更されるように、ギャラリーを機能させたいと思いました。

<body>
<div class="photobrowse">
        <img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
        <img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
        <img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>

動作しません...

私が取り組んでいるギャラリーはhttp://ptc.tamu.edu/test/gallery_directory/test_gallery.html にあり、選択した画像をビューアフレームにロードするまでのすべてが機能します（私はonlickイベントを実行していますブラウザフレームページにデフォルトで読み込まれる画像1、2、3 ）（デフォルトの画像4と5は、画像をiframeに読み込むだけですが、サイズを調整する方法がないため、大きすぎて切り取られてしまいます。それ）

私は一日中取り組んできました、そして私はここで何か間違ったことをしていると確信していますが、それが正確に何であるかを理解することはできません。ブラウザーフレームページからグローバル変数image_to_be_viewedを変更することと関係があると感じていますが、頭のない魚のように飛び回るのではなく、専門家に確認したかったのです。私はこれを理解しようとし続けますが、専門家の支援があればプロセスがスピードアップするのではないかと思いました。

4

2 に答える 2

0

onclickトリガーはjavascript関数呼び出しである必要があります。

例えばonclick="changeImg('images/album1/1.jpg')"

そして、関数自体は次のようになります

function changeImg (image_to_be_viewed) {
  document.getElementById("viewed_image").src = image_to_be_viewed;
}

ところで、実際の作業を行う前に、JavaScriptをもう少し学ぶ必要があります。この本をお勧めします

于 2012-05-23T23:58:43.703 に答える
0

動作させてくれてありがとう！changeImg関数が間違ったドキュメント/間違ったフレームをターゲットにしていることがわかり、jsスクリプトを次のように変更して修正しました。

function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}
于 2012-05-25T18:55:15.587 に答える