Bild austauschen bei Maus Hover Funktion

Einfache Funktion, um ein Bild auszuwechseln, sobald sich die Maus über dem Bild befindet. Also eine Hover-Change-Image Funktion.

HTML Code:

<div class="hnp_container" onmouseover="hnp_showImage2()" onmouseout="hnp_showImage1()">
  <img class="hnp_image" src="WWW.IHRE-WEBSEITE.DE/BILDDATEI-1.JPG" alt="Image 1">
  <img class="hnp_image hnp_image2" src="WWW.IHRE-WEBSEITE.DE/BILDDATEI-2.JPG&" alt="Image 2">
</div>

Javascript Code:

<script>
  function hnp_showImage2() {
    document.querySelector('.hnp_image').style.display = 'none';
    document.querySelector('.hnp_image2').style.display = 'block';
  }

  function hnp_showImage1() {
    document.querySelector('.hnp_image').style.display = 'block';
    document.querySelector('.hnp_image2').style.display = 'none';
  }
</script>

Css:

<style>
  .hnp_container {
    position: relative;
    width: 300px;
    height: 300px;
  }
  .hnp_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .hnp_image2 {
    display: none;
  }
</style>