0

I have the following JavaScript/HTML code:

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

The code switches between two images every two seconds. The images are stored online.

Now, in my project, I have a folder called Resources, containing two images called Share1.bmp and Share2.bmp.

If I modify the code above to use these two images, nothing works anymore. This is how I am doing it:

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>

What am I doing wrong? Am I passing the url to the images stored in my project incorrectly?

EDIT

When using my images, Share1.bmp is displayed correctly, however the switching does not occur. It seems that the problem is with the URLs in the JavaScript.

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 回答