Veröffentlicht am: 04.04.2024 | Letztes Update am: 04.04.24 | Lesezeit: 1 Minute/n
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>
↩ Zurück zur Blogübersicht