Simulasi butang seperti Windows menggunakan JavaScript

Membuat butang grafik tersuai menggunakan HTML dan JavaScript adalah mengejutkan mudah! Tutorial ini menunjukkan cara membina butang dengan tiga keadaan yang berbeza (naik, lebih, ke bawah) menggunakan swap imej.

Kami akan menggunakan tiga imej: ButtonSubmit.gif (lalai), ButtonSubmit-over.gif (tetikus over), dan ButtonSubmit-down.gif (klik tetikus).

Berikut adalah kod:

<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>

Fungsi JavaScript ReplaceImage() mengambil nama imej dan laluan fail baru sebagai argumen, secara dinamik mengemas kini sumber imej. Pengendali acara <a></a> tag (onmouseover, onmousedown, onmouseout) mencetuskan swap imej berdasarkan interaksi pengguna. Imej itu sendiri bersarang dalam tag <a></a>. Perhatikan penambahan atribut alt untuk kebolehcapaian.

Penjelasan:

• ReplaceImage(sImgName, sImgFile): Fungsi ini mengemas kini atribut src atribut elemen imej yang dikenal pasti oleh sImgName dengan laluan imej baru sImgFile.

• <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b"></a>: Ini mewujudkan hiperpautan; href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" menghalang navigasi ke halaman baru.

• onmouseover, onmousedown, onmouseout: atribut peristiwa ini CALLUTES ReplaceImage() untuk menukar imej berdasarkan keadaan tetikus (hover, klik, cuti).

• <img ... alt="Simulasi butang seperti Windows menggunakan JavaScript" >: Ini memaparkan imej, dengan name="ImgSubmit" membenarkan JavaScript merujuknya.

Pendekatan ini mencipta butang visual yang menarik dengan perubahan imej dinamik, meniru rupa dan rasa butang dalam banyak aplikasi. Ingatlah untuk menggantikan "ButtonSubmit.gif", "ButtonSubmit-over.gif", dan "ButtonSubmit-down.gif" dengan laluan sebenar ke fail imej anda. Untuk hasil yang terbaik, gunakan imej saiz yang konsisten untuk mengelakkan perubahan susun atur.

Atas ialah kandungan terperinci Simulasi butang seperti Windows menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!