JavaScript - Image Дорожки

У меня есть следующие JavaScript/HTML код:JavaScript - Image Дорожки

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

код переключается между двумя изображениями каждые две секунды. Изображения хранятся в Интернете.

Теперь в моем проекте у меня есть папка Resources, содержащая два изображения, называемые Share1.bmp и Share2.bmp.

Если я изменю приведенный выше код, чтобы использовать эти два изображения, больше ничего не работает. Вот как я это делаю:

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-адрес изображениям, сохраненным в моем проекте, неправильно?

EDIT

При использовании моих изображений, Share1.bmp отображается правильно, однако переключение не происходит. Кажется, что проблема связана с URL-адресами в JavaScript.

источник

2013-04-11 Matthew

>> Что я делаю неправильно? Вы не используете jquery toggle, как я предложил в другом посте :-) – HMR

@HMR При использовании онлайн-изображений программа отлично работает. Когда я использую изображения, хранящиеся на моем компьютере, возникает проблема. – Matthew

Вы можете получить смешные значения, используя img.src. почему бы не попробовать Firefox с firebug или chrome и console.log (img.src) до общения. Я все еще думаю, что использование jquery проще и чище. если вы хотите его каждые 2 секунды, я могу опубликовать здесь код. – HMR

Использование 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(); 
});

Чтобы написать собственную реализацию тумблер (работает только для этого конкретного экземпляра), вы можете добавить этот 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-11 13:37:58 HMR

Спасибо HMR :) Я должен был попробовать ваше решение в первую очередь :) – Matthew

Если вы не против накладных расходов библиотеки JavaScript для функциональности, которая может быть написана на JavaScript, который есть! – andyb

jQuery поставляется со многими шаблонами .net. Он автоматически заполняется в Visual Studio. Я согласен, что он может загрузить библиотеку, которую вы не используете на 90%, но она меньше, чем изображение баннера. Если вы беспокоитесь о том, что слишком много кода, вы можете использовать библиотеку закрытия и компилятор закрытия (расширенный), но у этого есть крутая кривая обучения. – HMR

Проблема, скорее всего, относительный путь к изображениям. Попробуйте изменить путь к (убрать ../):

/Resources/Share2.bmp и /Resources/Share1.bmp

источник

2013-04-11 13:31:30 lucuma

JavaScript - Image Дорожки

ответ

Смежные вопросы