Langsung ke konten utama

Belajar Jquery : memperbesar gambar ketika disentuh mouse

Belajar mouse event pada jQuery

selamat datang di arsipbertuah blog,pada belajar jquery kali ini ane menuliskan tentang 
bagaimana membuat gambar berubah ukurannya menjadi besar ketika di lalui oleh pointer mouse.
untuk mengubah ukuran gambar tersebut bisa menggunakan Javascript.tapi bisa lebih mudah kita gunakan javascript library yaitu JQuery. JavaScript sangat powerfull untuk memanipulasi element HTML, tapi penggunaannya juga tidak mudah dan sedikit ribet. oleh karena itu dengan jQuerylah yang dapat mempermudah memanipulasi HTML.

Pengertian Jquery

jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuerydirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. dengan jquery kita tinggal memanggil fungsi yang ada tentunya sesuai dengan dengan kasus kita untuk membuat gambar menjadi zoom .tujuannya menggunakan jquery adalah untuk mempercantik tampilan dan membuat web kita lebih interaktif.lansung saja kita terjun ke praktek. beriku ini adalah koding html untuk menampilkan gambar dan jquery sebagai aksi mempebesar gambar ketika disentuh mouse:

Contoh implementasi mouse event pada jquery

<html>
<head>
 <title>belajar jquery mempebesar gambar kita dilalui mouse</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="jquery-1.11.3.js"></script>
</head>
<body>
<script>
$(function(){

  $('img').mouseenter(function(){
  $('img').css('width','100%');
 });
 $('img').mouseleave(function(){
  $('img').css('width','50');
});});
</script>
<div>
<img src="1.jpg" width="50px">
</div>
</body>
</html>

Contoh hasil mouse event jQuery

nah,hasilnya begini gan.jika agan buka lewat desktop silahkan letak penunjuk mouse agan di atas gambar dibawah ini .

seperti ini lah hasil dari fungsi mouse event jquery. dan masih banyak lagi yang bisa di kembangkan dari fungsi - fungsi yang ada pada jquery. buat agan yang tertarik menggunakan jquery alangkah baiknya agan instalasi  jquery dengan mendownload jquery di website resminya, agar mudah mempelajari secara ofline.sekian penjelasan sederhana dari saya semoga dapat menambah wawasan tentang jquery.
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Metode (SAW) Simple Additive Weighting dan contoh coding PHP

Pengertian SAW Simple Additive Weighting meupakan metode penjumlahan terbobot konsep dasar metode SAW adalah mencari penjumlahan terbobot dari rating kinerja pada setiap alternative pada semua kriteria (Kusumadewi, 2006) Menurut Fajar Nugraha (2011), metode SAW membutuhkan proses normalisasi matrik keputusan (X) ke suatu skala yang dapat diperbandingkan dengan semua rating alternatif yang ada. Metode SAW mengenal adanya 2(dua) atribut yaitu kriteria (benefit) dan kriteria biaya (cost) perbedaan mendasar dari kedua kriteria ini adalah dalam pemilihan kriteria ketika mengambil keputusan. Adapun langkah penyelesaian dalam menggunakannya adalah 1. Menentukan alternative, yaitu Ai 2. Menentukan kriteria yang akan dijadikan acuan dalam pengambilan keputusan, yaitu Cj 3. Memberikan nilai rating kecocokan setiap alternative pada setiap kriteria. 4. Menentukan bobot preferensi atau tingkat kepentingan (W) setiap kriteria W=[ W1 W2 W3 W4] 5. Membuat table rating kecocokan dari setiap
3 komentar
Baca selengkapnya

Php root Url untuk include dari dalam dan luar folder

Pada Posting ini akan membahas pemanggilan file-file php atau juga html document. yang melalui fungsi yang telah disediakan oleh php dan membahas bagaimana menggali berdasarkan letak file atau root(akar) didalam folder,sub folder dan sub sub folder. Fungsi PHP untuk memanggil file php lainya Bahasa pemograman PHP  memiliki kemampuan utuk menyertakan file php yang lainnya.adapun fungsi untuk menyertakan file php lainya yaitu. include(); require(); include_once(); requere_once(); agan bisa gunakan salah satu dari fungsi tersebut sesuai dengan kebutuhan agan. Bagaimana memanggil file php berdasaran lokasi akar foldernya ? 1.memanggil di dalam satu folder yang sama memanggil dalam satu folder ini maksunya adalah file php yang akan memanggil dan file php yang akan di panggil berada dalam satu folder. nah, untuk menyertakan file php didalam folder yang sama pathnya seperti  contoh dibawah ini: include(‘koneksi.php’); pada conto diatas file php koneksi berada dalam satu folder dengan file yan
Posting Komentar
Baca selengkapnya

Belajar php : membuat nomor ID otomatis untuk insert data

Penjelasan tentang membuat nomor id otomatis Hallo gan pada postingan saya kali ini .saya akan berbagi cara untuk membuat id otomatis pada pemograman PHP dan mySQL . id otomatis maksudnya adalah kita akan menciptakan sebuah nomor unik dengan proses penambahan kode tersebut tanpa kita inputkan alias akan dibuat dan diproses oleh php.hampir semua aplikasi menggunakan id otomatis untuk penambahan data baik itu program berbasis desktop maupun berbasis web.jadi jangan diragukan lagi ,agan sudah berada dalam kesempatan yang baik untuk belajar menjadi programmer yang handal. dalam pemograman PHP banyak sekali cara yang dapat dilakukan untuk generate nomor unik yang dapat digunakan sebagai primary key pada database. pada kasus tutorial kali ini saya praktekan menyimpan sebuah data ke database menggunakan PHP yang sesuai dengan posting ini membuat id otomatis.untuk itu saya asumsikan ,agan sudah bisa membuat tabel database dan mengkoneksikannya.pada kasus ini saya mengunakan database seperti in
Posting Komentar
Baca selengkapnya