Kita akan membuat text di Image menggunakan jquery, selain jquery kita akan menggunakan plugin jquery sebagai tambahan. Textover adalah sebuah jquery plugin yang dapat menambahkan catatan atau tulisan di sebuah gambar dengan cara klik di atas gambar. Plugin textover juga memiliki fungsi get_data() untuk mengambil semua teks yang telah kamu tulis di atas gambar.

Cara Membuat text di image adalah sebagai berikut ini:

1. Download dulu libary jquery textover disini

2. Masukkan Library Jquery dan Jquery textover ke halaman.

3. Masukkan sebuah gambar ke halaman dan gunakan nama id yang unik.

4. Lalu buat sebuah button untuk mendapatkan data berupa teks yang telah kita input di atas gambar lalu ditampilkan didalam div.

The data goes here
Show Data

5. Lalu masukkan kode javascript berikut untuk menampilkannya

6. sehingga keseluruhan kode website sebagai berikut

  

jQuery Text Over
  
 
 This example demonstrates the default behavior of jQuery Text Over.
 Click on the top of the image and type the text. For add another one click and type again. Esc will remove your last typed text. 
 
Show Data

Demikianlah cara membuat text di image menggunakan jquery dan plugin jquery textover. semoga bermanfaat.