Cara Membuat Text Di Image Menggunakan jquery

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.

Membuat Text Di Image
Membuat Text Di Image

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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../jquery.textover.min.js"></script>

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

<img src="demo.jpg" id="demo" alt="Demo Image" />

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

<div id="data">The data goes here</div>
<button id="show">Show Data</button>

5. Lalu masukkan kode javascript berikut untuk menampilkannya

<script type="text/javascript">
jQuery(function($){

var textover_api;

$('#demo').TextOver({}, function() {
textover_api = this;
});

$('#show').click(function () {
html = '';
$.each(textover_api.getData(), function() {
html += 'Text &raquo; ' + this.text + ' Left &raquo; ' + this.left + ' Top &raquo; ' + this.top + '<br />';
});
$('#data').html(html).show();
});

});

</script>

6. sehingga keseluruhan kode website sebagai berikut

<!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery Text Over Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<script src="media/jquery.min.js"></script>
<script src="../jquery.textover.min.js"></script>
<script type="text/javascript">
  jQuery(function($){
    var textover_api;
    // How easy is this??
    $('#target').TextOver({}, function() {
      textover_api = this;
    });
    $('#show').click(function () {
      html = '';
      $.each(textover_api.getData(), function() {
        html += 'Text &raquo; ' + this.text + ' Left &raquo; ' + this.left + ' Top &raquo; ' + this.top + '<br />';
      });
      $('#data').html(html).show();
    });
  });
</script>
<link rel="stylesheet" href="media/main.css" type="text/css" />
<link rel="stylesheet" href="media/demos.css" type="text/css" />

</head>
<body>

<div class="container">
<div class="row">
<div class="span11">
<div class="demo-box">

<div class="page-header">

<h1>jQuery Text Over</h1>
</div>

  <img src="media/vagamon.jpg" id="target" alt="[Text Over Example]" />

  <div class="description">
  <p>
    <b>This example demonstrates the default behavior of jQuery Text Over.</b><br />
    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.
  </p>
  </div>

<div id="data" class="well"></div>
<button id="show">Show Data</button>

<div class="clearfix"></div>

</div>
</div>
</div>
</div>

</body>
</html>

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.