1

ページが読み込まれるたびにファイルのリストが取り込まれる選択タグがあります。選択入力でクリックするたびに、選択したファイルに画像を変更したいと思います。これは私が今持っているもので、正しく動作しません。ただし、クリックすると、画像とテキストが表示/非表示になります。どんな助けでも大歓迎です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title> Table Edit The Shakespeare Studio </title>
    <link rel="stylesheet" type="text/css" href="../styles.css" />
</head>
<body>
<script language="javascript" type="text/javascript">
  function edit_image1()
  {
    if (document.getElementById('select1').value == "0") {
      document.preview1.style.visibility = "hidden";
      document.getElementById('random1').style.visibility = "visible";
    } else {
      var selected = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].value;
      document.preview1.style.visibility = "visible";
      document.preview1.src = "../resources/uploads/"+selected;
      document.getElementById('random1').style.visibility = "hidden";
    }
  }
</script>
<div id="everything">
  <form action='tableEdit.php' method='GET'>
    <table border='1' id='cal'>
      <tr id='top'><td> Page Name </td><td> Image to Use </td><td> Preview </td></tr>
      <tr>
        <td> about </td>
        <td>
          <select name='aboutImage' id='select1' onchange='edit_image1()';>
            <option value='0' selected> RANDOM IMAGE</option> 
            <option value='IMG_6027.JPG'>IMG_6027.JPG</option> 
            <option value='IMG_6032.JPG'>IMG_6032.JPG</option> 
            <option value='kissme-1.jpg'>kissme-1.jpg</option> 
          </select>
        </td>
        <td>
          <img name='preview1' src='../resources/uploads/0'></img>
          <h3 id='random1'> Random </h3>
        </td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>
4

3 に答える 3

2

Image似たようなことをしたとき、スクリプトに新しいオブジェクトを作成しました。<IMG>" " 要素を作成innerHTMLし、親のプロパティを設定するだけで、これを実行できるはずです。

編集：次のようなもの：

<html>
<head>
    <title>Image Replacement Example</title>
</head>
<body>
<div id="imageHolder">
    <img src="http://stackoverflow.com/content/img/so/logo.png">
</div>
<br>
<button onClick="javascript:newImage();return false;">Click Me</button>

<script type="text/javascript">
    function newImage()
    {
        var holder = document.getElementById("imageHolder");
        holder.innerHTML = "<img src='http://serverfault.com/content/img/sf/logo.png'>"
    }
</script>

于 2009-07-10T19:28:39.440 に答える
0

あなたのコードには多くのバグがありますが、確実に機能するようになっています。

画像の「src」値を変更することは正しいと考えています。これは正しく表示されますが、サーバーが接続して新しい画像をダウンロードする必要があることに注意してください。

あなたが持っているのと同じ HTML を使用して、次の JavaScript コードを使用します。

function edit_image(){
    var doc = document;
    var selectedIndex = doc.getElementById('select1').selectedIndex;
    var previewVisible = doc.getElementById("preview1").style.visibility;
    var randomVisible= doc.getElementById("random1").style.visibility; 

    if (selectedIndex === 0){
        previewVisible = "hidden";
        randomVisible = "visible";
    } else {
        var previewSrc = doc.getElementById("preview1").src;
        var selectValue = doc.getElementById('select1').options[selectedIndex].value;

        previewSrc = "../resources/uploads/"+ selectValue;
        previewVisible = "visible";
        randomVisible = "hidden";
    }

これは、効率的な Javascript を作成するためのヒントを提供する良い機会でもあると思います。これらのローカル変数をすべて設定した理由は、ローカル変数はグローバル オブジェクトよりも JavaScript の読み取りと対話がはるかに高速であるためです。「ドキュメント」オブジェクトはグローバル スコープの一部であり、ページや関数が大きくなるにつれて、常にアクセスが遅くなる可能性があります。

また、document.getElementById("someid") の各プロパティに変数を設定しています。これは、ブラウザーでの DOM 関数の呼び出しが非常に遅いためです。

また、次のように変数を設定します。

var links = document.getElementsByTagName("A");

ページ上のすべてのリンクを含む配列への参照ではなく、 DOMへの QUERY を参照する変数を作成します。したがって、段階的に次のことを行います。

links.style.visibility = "visible";
links.innerHTML = "some new text";

実際には、ページ上のすべてのアンカーを取得するために 2 つのクエリを作成することになります。

一度に多くの情報を記載して申し訳ありませんが、このコード例は、より良い Javascript を記述し、インターネット用のより良い Web ページを作成するためのヒントを提供する良い方法のように思えました :-)

于 2009-07-10T20:12:40.973 に答える
0

画像パスを配列に保存し、次のように選択したインデックスとそれぞれを同期できます。

<table border="1">
    <tr><td>Page Name</td><td>Image to Use</td><td>Preview</td></tr>
    <tr>
        <td>about</td>
        <td>
            <select id="select1">
                <option selected>RANDOM IMAGE</option> 
                <option>IMG_6027.JPG</option> 
                <option>IMG_6032.JPG</option> 
                <option>kissme-1.jpg</option> 
            </select>
        </td>
        <td>
            <img id="preview1" alt="image" src="0.JPG">
            <h3 id="random1">Random</h3>
        </td>
    </tr>
</table>

<script type="text/javascript">
var images = [];
var select1 = window.document.getElementById("select1");
var preview1 = window.document.getElementById("preview1");
var random1 = window.document.getElementById("random1");
var selectLength = select1.length;
images[0] = "0.JPG";
images[1] = "IMG_6027.JPG";
images[2] = "IMG_6032.JPG";
images[3] = "kissme-1.jpg";
function edit_image1() {
    var index = select1.selectedIndex;
    if (index !== 0) {
        preview1.src = images[index];
        random1.style.visibility = "hidden";
    } else {        
        preview1.src = images[Math.floor(Math.random() * selectLength)];
        random1.style.visibility = "visible";
    }
    return true;
}
select1.onchange = edit_image1;
</script>
于 2009-07-10T23:36:48.630 に答える