Ganti Tombol Submit dengan Gambar

Tutug-on.com. Saat saya berseluncur ke website tetangga, saya melihat sebuah tombol submit yang bagus. Sepertinya tombol ini menggunakan gambar sebagai backgroundnya, saya berpikir seperti itu. Tapi saya salah sangka (Fuihh.. untung saja tidak berdosa). Setelah saya telanjangi kodenya, ternyata seperti ini:

<input type="image" value="Submit" src="url-image" />

Ternyata website tersebut menggunakan atribut type="image". Harus diakui kalau saya baru tau caranya seperti ini, hehehe.. Maka saya pun mulai bereksperimen dengan menambahkan beberapa kode javascript dan styles.

File HTML

<html>
<head>
<title>Styled Text Area by CSS-Tricks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<form action="#" method="post">
<div id="page-wrap">
<textarea name="styled-textarea" id="styled" onfocus="if (this.value == 'Ketik komentar anda disini') {this.value = '';};" onblur="if (this.value == '') {this.value = 'Ketik komentar anda disini';};">Ketik komentar anda disini</textarea>
<br />
<input type="image" value="Submit" src="submit-4.gif" class="kanan" />
</div>
</form>
</body>
</html>

File CSS

#page-wrap {
margin: 20px auto;
width: 616px;
}

textarea#styled {
width: 600px;
height: 60px;
border: 2px inset #cccccc;
padding: 3px;
font-family: Tahoma, sans-serif;
background-image: url(bg.gif);
background-position: bottom right;
background-repeat: no-repeat;
}

.kanan {
float: right;
margin-bottom: 25px;
margin-right: 17px;
}

Gambar

Dibawah ini adalah gambar-gambar yang digunakan dalam latihan kali ini. Silakan anda gunakan.






Ada yang mau menambahkan eksperimen yang saya lakukan? Silakan dicoba.
Previous
Next Post »

3 komentar

Click here for komentar
VAN MOVIC
admin
September 26, 2009 at 9:33 AM ×

he..he..kayaknya g nyambung ya sama artikel diatas...,,,
q mo nanya nih...aq pernah baca coment anda di kolom-tutorial tentang sidebar yg menjadi dibawah postingan..truz q jln2 ke blog anda..
tapi kayaknya dah normal kmbali.punya prmasalahan sama nichh,,emg caranya gmana???maklum masih newbie..

Reply
avatar
Zups
admin
September 27, 2009 at 8:31 PM ×

Tentang sidebar yg jadi ngaco or acak2an, saya coba utak atik di kode HTML blognya juga hasilnya tetap acak2n hehe. kalo sekarang boz van movic lihat blog saya dah normal lagi, itu karena saya dah g pake fitur read more bawaan blogspot lagi. eniwey, sepertinya saya belum bisa bantu memecahkan masalah boz nih. Tanya sama masternya (Kang Rohman) juga g ada respon, mungkin si akang lagi sibuk juga

Reply
avatar
Anonymous
admin
December 22, 2009 at 1:39 PM ×

Terima kasih atas ilmunya

Reply
avatar

Jangan ragu untuk menghubungi saya kapan saja boz memiliki pertanyaan, saran, pengumuman atau hanya ingin mengatakan "Hai!". ConversionConversion EmoticonEmoticon