CORETAN HAPE JADUL

Contoh hasil dari gambar sprite tersebut dengan menggunakan tag html:

<img style='background:transparent url( http://files.myopera.com/moekids2/foto/guardian-sprites.png ) 0 0; width:80px; height:76px;' src=' http://static.myopera.com/community/graphics/smiley.gif '/>
hasil gambar:

<img style='background:transparent url( http://files.myopera.com/moekids2/foto/guardian-sprites.png ) -84px -76px; width:80px; height:76px;' src=' http://static.myopera.com/community/graphics/smiley.gif '/> hasil gambar:

<img style='background:transparent url( http://files.myopera.com/moekids2/foto/guardian-sprites.png ) -168px -152px; width:80px; height:76px;' src=' http://static.myopera.com/community/graphics/smiley.gif '/> hasil gambar:


<img style='background:transparent url( http://files.myopera.com/moekids2/foto/guardian-sprites.png ) -252px -228px; width:80px; height:76px;' src=' http://static.myopera.com/community/graphics/smiley.gif '/> hasil gambar:


<img style='background:transparent url( http://files.myopera.com/moekids2/foto/guardian-sprites.png ) -168px -228px; width:80px; height:76px;' src=' http://static.myopera.com/community/graphics/smiley.gif '/> hasil gambar:

Saya menggunakan alamat gambar http://static.myopera.com/community/graphics/smiley.gif karena ini adalah gambar transparan yang ada di kotak besar my opera untuk mempermudah saja, agar saya tidak mengupload gambar baru.
Untuk gambar sprite http://files.myopera.com/moekids2/foto/guardian-sprites.png berukuran 503x304 pixel. Dan telah saya hitung setiap petak gambar kurang lebih berukuran 84x76 pixel. Untuk menentukan posisi gambar/background ada dua value dalam style 'background-position yang langsung di semat bersama style background:url(source) value value
value pertama untuk menentukan posisi gambar dalam garis horizontal ( var 'x' ), titik 0 (nol) berada pada pojok kiri atas gambar. Jadi gambar yang ditampilkan pada browser adalah pada posisi variable -x dan variable -y pada kontent value yang kedua yang memiliki titik 0 (nol) yang juga berada pada pojok kiri atas gambar dengan garis vertikal. "waduh gak kerasa masuk pelajaran matematika SMP ".
Jadi untuk menentukan gambar yang akan di tampilkan kita harus mencari tahu dulu variable x dan y.

Untuk yang menggunakan P( silakan gunakan photoshop atau aplikasi lainnya. Untuk hape silakan saya ada sedikit saran untuk menggunakan propaintmobil yang kemrin saya dapat dari kang ganov. Aplikasi ini berformat jar jadi ringan dan cocok untuk hape java dan symbian apapun. Silakan download aplikasinya di sini. Pada Aplikasi Propaintmobile ini terdapat rincian lokasi kursor, yaitu pada bagian kiri atas monitor hape. Jadi dengan mudah kita mengetahui posisi gambar yang akan kita gunakan.

Karena dalam sistem variable x y gambar berada dalam posisi -x dan -y, maka maka kita tambahkan tanda (-) min pada rincian lokasi kursor berada. Bila lokasi kursor adalah 200:200 berarti variable x y posisi gambar tersebut adalah x= -200px dan y= -200px. Cukup mudah untuk menentukan gambar yang akan kita gunakan dan sekaligus mengetahui ukuran sub gambar tersebut.

---

Pada sistem penerapan gambar sprite tersebut umumnya adalah dengan memberikan style pada media CSS. Yaitu fungsinya untuk meringkas tag html yang digunakan. Contoh kita akan memberikan nilai class dalam CSS yang akan kita masukan. Misalnya kita memberikan class guardian1, guardian2, dst.