Simulieren Sie eine Windows-ähnliche Schaltfläche mit JavaScript

Erstellen benutzerdefinierter grafischer Schaltflächen mit HTML und JavaScript ist überraschend unkompliziert! Dieses Tutorial zeigt, wie man eine Taste mit drei unterschiedlichen Zuständen (nach oben, unten, unten) unter Verwendung von Bildtausch erstellt.

Wir verwenden drei Bilder: ButtonSubmit.gif (Standard), ButtonSubmit-over.gif (Maus) und ButtonSubmit-down.gif (Mausklick).

Hier ist der Code:

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" onmouseover="ReplaceImage('ImgSubmit', 'ButtonSubmit-over.gif')" onmousedown="ReplaceImage('ImgSubmit', 'ButtonSubmit-down.gif')" onmouseout="ReplaceImage('ImgSubmit', 'ButtonSubmit.gif')">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174136519147164.gif" class="lazy" alt="Simulate a Windows-like Button Using JavaScript ">
</a>

Die Funktion ReplaceImage() JavaScript nimmt den Namen des Bildes und den neuen Dateipfad als Argumente auf, wodurch die Bildquelle dynamisch aktualisiert wird. Die Ereignishandler (🎜>, <a></a> Tag, onmouseover) des Tags auslösen den Bildtausch basierend auf der Benutzerinteraktion. Das Bild selbst ist innerhalb des onmousedown -Tags verschachtelt. Beachten Sie die Hinzufügung eines onmouseout -Regributs für die Zugänglichkeit. <a></a> alt

Erläuterung:

• : Diese Funktion aktualisiert das durch ReplaceImage(sImgName, sImgFile) identifizierte Bildelement mit dem neuen Bildpfad src. sImgName sImgFile

• : Dies erstellt einen Hyperlink; Das <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"></a> verhindert die Navigation auf einer neuen Seite. href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"

• , , onmouseover: onmousedown Diese Ereignisattribute rufen Sie onmouseout auf, um das Bild basierend auf dem Status der Maus zu ändern (schweben, klicken, verlassen). ReplaceImage()

• : Dies zeigt das Bild an, wobei <img ... alt="Simulieren Sie eine Windows-ähnliche Schaltfläche mit JavaScript" > JavaScript es verweisen kann. name="ImgSubmit"

Dieser Ansatz erzeugt eine visuell ansprechende Taste mit dynamischen Bildänderungen und ahmt das Erscheinungsbild von Schaltflächen in vielen Anwendungen nach. Denken Sie daran,

,

und "ButtonSubmit.gif" durch die tatsächlichen Pfade zu Ihren Bilddateien zu ersetzen. Verwenden Sie für die besten Ergebnisse Bilder mit konsistenter Größe, um Layoutverschiebungen zu verhindern. "ButtonSubmit-over.gif"

Das obige ist der detaillierte Inhalt vonSimulieren Sie eine Windows-ähnliche Schaltfläche mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!