Блог

Я здесь чего-то не хватает:

 <!-- image is 1920 × 1080 pixels (W x H) -->
<a href="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png/"><img alt="postgres-x_on-pset_align_wrapped.png/" onmouseover="iyu3Pheu(this)" onmouseout="Xio8Hogh(this)" border="0" src="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png" width="300" style="padding-left:1px;"></a>
<script>
  function iyu3Pheu(x) {
    if(x.style.width < 500){
      x.style.width = "50%";
    }
    else {
      x.style.width = "100%";
    }
  }
  function Xio8Hogh(x) {
    x.style.width = "300px";
  }
</script>
  

Проблема в том, что мне нужно дважды навести курсор мыши на изображение, чтобы получить правильно измененное onmouseover изображение (первое onmouseover , предположительно, для получения размеров изображения). Чего мне не хватает?

Вот JS-файл:https://jsbin.com/tesesi/edit?html ,вывод

Проблема в том, что x.style.width при первом наведении курсора мыши на изображение ничего не возвращается, поскольку вы не определяете ширину в теге style (это работает во второй раз, потому что при наведении курсора мыши вы определяете ширину в CSS с помощью Xio8Hogh функции). Все, что вам нужно сделать, это переместить ширину в CSS вместо использования width атрибута.

Пара советов: во-первых, назовите свои функции таким образом, чтобы они объясняли, что будет делать функция, а не просто тарабарщину. Это облегчит вам отладку, и если вы работаете в команде, членам вашей команды будет легче понять, что делает ваш код. Кроме того, попробуйте определить свой CSS в таблице стилей, а не встроенным в HTML. Это сделает ваш код более чистым.

 <!-- image is 1920 × 1080 pixels (W x H) -->
<a href="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png/"><img alt="postgres-x_on-pset_align_wrapped.png/" onmouseover="iyu3Pheu(this)" onmouseout="Xio8Hogh(this)" border="0" src="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png" style="width:300px;padding-left:1px;"></a>
<script>
  function iyu3Pheu(x) {
    if(x.style.width < 500){
      x.style.width = "50%";
    }
    else {
      x.style.width = "100%";
    }
  }
  function Xio8Hogh(x) {
    x.style.width = "300px";
  }
</script>  

Учитывая это, я также хотел бы упомянуть, что эта функциональность может быть выполнена полностью в CSS без какой-либо необходимости в JavaScript, например:

 img {
  width:300px;
}

a:hover img {
  width:100%
}  

 <a href="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png/"><img alt="My Image" border="0" src="https://persagen.com/files/misc/postgres-x_on-pset_align_wrapped.png"></a>