0

次の JavaScript/HTML コードがあります。

<head runat="server">
    <title>Home Page</title>
    <script src="Resources/jQuery.js" type="text/javascript"></script>

    <script type="text/javascript">
        function change_image()
        {
            var url = document.getElementById('Change_Image').src;

            if (url == 'http://placehold.it/200x200')
            {
                document.getElementById('Change_Image').src = 'http://placehold.it/100x100';
            }

            else
            {
                document.getElementById('Change_Image').src = 'http://placehold.it/200x200';
            }
        }

        setInterval(change_image, 1000);
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>Welcome to my Website</h1>
            <h2>Below you can find an example of visual cryptography</h2>
            <br />
            <br />
            <div><img id="Change_Image" src="http://placehold.it/200x200" alt="Letter A"/></div>
        </div>
    </form>
</body>
</html>

このコードは、2 秒ごとに 2 つの画像を切り替えます。画像はオンラインで保存されます。

現在、私のプロジェクトには、Share1.bmp と Share2.bmp という 2 つのイメージを含む Resources というフォルダーがあります。

これら 2 つの画像を使用するように上記のコードを変更すると、何も機能しなくなります。これが私がやっている方法です：

if (url == '../Resources/Share1.bmp')
            {
                document.getElementById('Change_Image').src = '../Resources/Share2.bmp';
            }

            else
            {
                document.getElementById('Change_Image').src = '../Resources/Share1.bmp';
            }

...
...
<div><img id="Change_Image" src="../Resources/Share1.bmp" alt="Letter A"/></div>

私は何を間違っていますか？プロジェクトに保存されている画像の URL を間違って渡していますか?

編集

私の画像を使用すると、Share1.bmp は正しく表示されますが、切り替えが行われません。問題は JavaScript の URL にあるようです。

4

2 に答える 2

2

jQuery を使用すると、両方の画像を配置して非表示 (トグル) にすることができます。

http://api.jquery.com/toggle/

あなたのhtml：

<div class="someContainer">
 <img class="Change_Image" src="Resources/Share1.bmp" alt="Letter A" />
 <img class="Change_Image" src="Resources/Share2.bmp" alt="Letter B" 
   style="display:none"/>
</div>

あなたのJavaScript：

$(document).ready(function(){
  var toggleImages=function(){
    $(".someContainer").find(".Change_Image").toggle();
    setTimeout(toggleImages,2000);
  }
  toggleImages();
});

トグルの独自の実装を作成するには (この特定のインスタンスでのみ機能します)、画像を含む div の直後にこの JS を追加できます。

<div class="someContainer" id="myImageContainer">
 <img src="Resources/Share1.bmp" alt="Letter A" />
 <img src="Resources/Share2.bmp" alt="Letter B" 
   style="display:none"/>
</div>
<script type="text/javascript">
 (function(){
   var images= document.getElementById("someContainer")
     .getElementsByTagName("img")
   ,toggleImages=function(){
     for(var i = 0;i < images.length;i++){
       images[i].style.display=(image.style.display==="none")?
         "":"none";
     }
     setTimeout(toggleImages,2000);
   };
   toggleImages();
 })();
</script>
于 2013-04-11T13:37:58.097 に答える
0

問題は、おそらく画像への相対パスです。パスを次のように変更してみてください (../ を削除してください):

/Resources/Share2.bmp および /Resources/Share1.bmp

于 2013-04-11T13:31:30.460 に答える