Monday, September 21, 2009

Ganti Tombol Submit dengan Gambar

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.

Tags:

3 Responses to “Ganti Tombol Submit dengan Gambar”

VAN MOVIC said...
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..


Zups said...
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


Anonymous said...
December 22, 2009 at 1:39 PM

Terima kasih atas ilmunya


Post a Comment

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

© 2013 CoPas Galeria. All rights reserved.
Designed by SpicyTricks