Исходное изображение onmouseover / out не будет загружаться, но будет работать нормально после первого наложения мыши - PullRequest
Новая
       45

Исходное изображение onmouseover / out не будет загружаться, но будет работать нормально после первого наложения мыши

1 голос
/ 02 мая 2019

На веб-сайте, который я создаю, работает функция onmouseover / out, однако исходное изображение, которое должно быть там, не будет загружаться и вместо этого будет показывать ссылку на пустое изображение, как будто оно пытается ее найти. Когда я делаю указатель мыши, изображения загружаются и с этого момента все в порядке.

Я попытался изменить изображение, которое оно пытается загрузить изначально (которое определенно находится в правильном месте, поскольку это одно из изображений onmouseover / out, которое работает правильно), но оно все равно не загружается. 

<header class="masthead text-center">
      <div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
        <img class='img-responsive center-block' src="/images/people/MinION" width="500"> 
          <a href="https://team-schwessinger.github.io/Team_B_S/" />
      </div>
      <img class='img-reponsive center-block' img src="images/people/MionION.png" width="500" alt="Leaf" onmouseover="this.src='images/people/Leaf.jpg';" width="500" onmouseout="this.src='images/people/MinION.jpg';" width="500" /></a>

Мне кажется, у меня проблема с 

<img class='img-responsive center-block' src="/images/people/MinION" width="500">

, который должен быть там, когда сайт загружается, до того, как произойдет какое-либо нажатие. Сайт признает, что пытается найти картинку, но не может. Я запутался в этом, поскольку он может найти и использовать изображение MinION в реальной функции наведения мыши.

Любая помощь в понимании того, почему это происходит, очень ценится, спасибо!

1 Ответ

0 голосов
/ 02 мая 2019

Измените ваш синтаксис, как показано ниже, я изменил ссылки на изображения, чтобы я работал, но вы можете использовать свои относительные пути. 

<header class="masthead text-center">
        <div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
          <a href="https://team-schwessinger.github.io/Team_B_S/" />
             <img class='img-responsive center-block' 
             src="https://timedotcom.files.wordpress.com/2015/09/googles-new-logo- 
             5078286822539264-2-hp.gif" width="500">
         </div>

         <a href="https://team-schwessinger.github.io/Team_B_S/">
            <img class='img-reponsive center-block' img 
             src="https://timedotcom.files.wordpress.com/2015/09/googles-new-logo- 
             5078286822539264-2-hp.gif" width="500" alt="Leaf" 
             onmouseover="this.src='http://www.google.com/logos/doodles/2016/st- 
             patricks-day-2016-4834639321497600-hp2x.gif';" width="500"            
          onmouseout="this.src='https://timedotcom.files.wordpress.com/2015/09/googles-new-logo-5078286822539264-2-hp.gif';" width="500" />
         </a>

см. JsFiddle

...