Pada artikel kali ini saya buat terinspirasi dengan ketika saya mencari tombol mana untuk mendownload sebuah file di website, kebetulan ada sebuah tombol dimana ketika saya klik tombol itu, yang ada bukan langsung mendownload tetapi kita di arahkan kepada tombol download yang di sediakan, kira-kira seperti itu, tetapi disini saya akan membuat dimana ketika saya arahkan mouse itu kedalam sebuah gambar maka background pada sebuah paragraf maka akan berubah warnanya sesuai dengan yang kita inginkan, oke bagaimana cara memberikan background warna saat mengklik gambar dengan Jquery, simak terus ya teman-teman.
Jadi ketika kita ingin cara memberikan background warna saat mengklik gambar dengan Jquery, kita bisa menggunakan jquery ya, nanti disini saya akan menambahkan efek sedikit kitika mouse meninggalkan sebuah gambar tersebut, jadi ketika mouse di atas gambar maka akan timbul efek warna pada sebuah paragraf di bawahnya, tetapi ketika mouse itu meninggalkan sebuah gambarnya maka warna pada background paragraf akan berubah ke warna lain kurang lebihnya seperti itu ya teman-teman, pembuatnya cukup simple ko teman-teman, kita hanya membuat function dimana ketika mouse di atas, maka kita berikan css kepada sebuah paragrafnya. Oke langsung saya kita lihat struktur html dan javascriptnya ya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<html> <head> <title>Cara Memberikan Background Warna Saat Mengklik gambar dengan Jquery</title> <style type="text/css"> body{ background: url(background.jpg); } h2{ text-align: center; } .container{ width: 500px; margin: auto; background: rgba(160, 143, 164,0.5); padding: 10px; } p{ padding: 15px; border-radius: 10px; } img{ width: 100%; } </style> </head> <body> <div class="container"> <h2>Cara Memberikan Background Warna Saat Mengklik gambar dengan Jquery</h2> <img src="dumet-school.jpg" alt=""> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("img").bind("mousedown",function(){ $("p").css({ "background": "red", "padding-bottom": "20px" }) }) $("img").bind("mouseout",function(){ $("p").css({ "background": "pink", "padding-bottom": "20px" }) }) }); </script> </body> </html> |
Oke bisa di lihat teman-teman langsung juga bisa langsung fokus kepada sebuah jquerynya ya, bagaimana cukup simple bukan, oke sekarang kita langsung saja lihat hasilnya:
Mungkin dengan gambar di atas tidak akan terlihat efeknya ya, jadi teman-teman harus mencobanya sendiri, maka akan terlihat, oke saya rasa cukup sampai disini dulu belajar kita tentang cara memberikan background warna saat mengklik gambar dengan Jquery, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terima kasih.