Trik Membuat Submit Button dengan Image

Oke, mungkin pada awalnya kebanyakan dari web developer pun pernah bertanya-tanya bagaimana membuat suatu image menjadi submit button dari suatu form. Dan fungsi seperti ini memang ternyata telah dipakai pada beberapa Content Management System favorit, joomla misalnya, ketika anda melakukan suatu save item, entah itu article, ataupun product di virtuemart yang memanfaatkan component backendnya, disana terlihat sebuah image yang memiliki sebuah fungsi sebagai submit button. Ada 2 trik yang biasanya sering digunakan, pertama memanfaatkan tag html, dan yang terakhir memanfaatkan fungsi javascript sederhana.

Ya, kita coba terlebih dahulu untuk trik yang pertama …

Buat sebuah file, namakan terserah anda, saya menamakannya imgbtn.html, kemudian isi didalamnya :

Yang memiliki fungsi intinya :
baris
membuat sebuah input dengan type image.

kemudian, file kirim.php, file ini digunakan untuk menangkap apa yang telah dikirim oleh imgbtn.html, tentunya anda harus memiliki sebuah web server yang telah terinstall didalam pc anda untuk mencobanya. Tapi diakhir artikel html ini penulis menyediakan file demo dari artikel ini.

File kirim.php

Anda tidak dapat menggunakan fitur seperti hover button dalam trik yang pertama ini, tag input type=’image’ tidak mengizinkan anda untuk perubahan gambar ketika mouse over, ataupun ketika mouse out. Fitur perubahan image/gambar ketika mouse over atau mouse out didapatkan dengan menggunakan trik yang selanjutnya.

Kemudian trik yang terakhir, ini trik pengembangan dari trik sebelumnya. Jika trik yang pertama itu hanya membolehkan gambar yang statik, maka trik yang kedua ini anda dapat memasang fitur perubahan gambar ketika mouseover ataupun mouseout.

Sediakan sebuah file imgtbn2.html, berisi :

trik yang terakhir ini, menggunakan tag

dan memanfaatkan fungsi javascript yang diembedkan.
Statement intinya :
onclick=”return val_form_this_page()”>
ketika image di klik maka kembalikan nilai yang terisi dalam form di document untuk kemudian di kirim ke action targetnya, yakni kirim.php.
Dengan trik ini

dan file kirim.php yakni file php untuk menangkap variable yang dikirim.

Sekian, anda dapat menggunakan trik ini untuk digunakan dalam melakukan development website anda. Terima kasih.

Possibly Related Posts:

Select Interface Language:

Links

WordPress Planet

free counterArchive

Waspada! 30 Penyakit Akibat Pemanasan Global

BERDASARKAN Data Organisasi Kesehatan dunia (WHO) tercatat ada sebanyak 30 penyakit baru yang muncul sepanjang tahun 1976-2008 akibat perubahan iklim dan pemanasan global.

Munculnya penyakit ini akibat temperatur suhu panas bumi yang terus meningkat. Yang paling jelas kelihatan adalah penyakit demam berdarah, kolera, diare, disusul virus ebola yang sangat mematikan. Menurut WHO, masalah kesehatan akibat pemanasan global ini lebih dirasakan oleh negara-negara berkembang yang sebagian masih miskin karena minimnya dana sehingga tak mampu lagi melaksanakan berbagai program persiapan dan tanggap darurat.

Untuk mengatasi dampak buruk perubahan iklim terhadap kesehatan manusia itu, tidak bisa dilakukan sendiri oleh masing-masing negara. Upaya itu baru akan berhasil jika dilakukan melalui kerja sama global, seperti misalnya meningkatkan pengawasan dan pengendalian penyakit-penyakit infeksi, memastikan penggunaan air tanah yang kian surut, dan mengoordinasikan tindakan kesehatan darurat.

Itu semua penting dilakukan karena perubahan iklim ini jelas-jelas akibat dari kegiatan manusia yang tak peduli terhadap keseimbangan alam, yang kemudian berimplikasi serius terhadap kesehatan publik. Selain menyebabkan gangguan kesehatan, perubahan iklim juga mengakibatkan berbagai bencana alam yang sangat besar.

Jangan ragu, ayo selamatkan bumi sekarang juga! Mulailah dari hal sederhana yang bisa Anda dan keluarga lakukan, misalnya menghemat listrik dan air, mengurangi penggunakan kantong plastik, memilah-milah sampah sesuai jenisnya, dan sebagainya.

Sumber: Okezone

Possibly Related Posts: