Mouse perilaku memiliki makna tertentu ketika kita sedang berbicara tentang kegunaan. Membiarkan pengguna mengetahui bahwa bagian tertentu dari situs kami dimaksudkan untuk diklik yang terbaik dicapai melalui mouse di atas efek. Mereka "diklik" bagian pasti mencakup gambar konten. Tapi apa yang bisa Anda lakukan dengan mouse over gambar? Tambahkan perbatasan yang berbeda? Script ini pasti akan membantu Anda untuk melakukan sedikit lebih dari itu ...

Apa itu?

Link gambar adalah script yang memungkinkan Anda untuk menerapkan gaya tambahan untuk link gambar Anda. Ini memiliki dua negara: default dan Gunaka mouse di atas negara, sehingga Anda dapat menggunakannya ieon thumbnail galeri Anda untuk menampilkan ikon zoom sedikit ketika thumbnail berguling atau untuk menempatkan sebuah "klik di sini" pesan di bagian bawah gambar Anda ...

Mengapa script ini berbeda (lebih baik) dari script serupa?

Ini adalah bagian yang sama sekali tidak mengganggu JavaScript. Ini tidak menuntut intervensi di html kecuali untuk penamaan kelas gambar tertentu yang Anda ingin gaya. Jika Anda ingin menggunakan gaya yang sama untuk semua link gambar Anda Anda bahkan tidak harus menetapkan kelas. Script secara otomatis akan menerapkan style untuk semua gambar di dalam tag anchor.

Bagaimana cara kerjanya?

Script berjalan melalui kode sumber dan gambar menempatkan dalam tag anchor - link gambar. Ini menciptakan sebuah elemen span yang diletakkan di atas gambar. Script kemudian memberikan kelas css untuk rentang yang didasarkan pada preferensi Anda.

<a href="/somelink"><img src="image.jpg" alt="My Image" /></ a>
mengubahnya menjadi ini:
<a href="/somelink"> <img src="image.jpg" alt="My Image" /><span></span></a>

dan memberi Anda "cover gambar" untuk bekerja dengan dan gaya itu sesuai keinginan.

Parameter dan variasi

Ada 2 variasi script ini sesuai preferensi Anda. Salah satunya adalah gaya variasi tunggal dan lainnya adalah multistyle.
gaya tunggal adalah lebih mudah untuk membuat dan menyempurnakan bagi mereka yang ingin satu gaya di seluruh situs. Ini memiliki 3 variabel yang Anda dapat mengkonfigurasi di bagian konfigurasi dari file JavaScript: ImageClass - string yang Anda gunakan untuk memberikan nama kelas untuk gambar yang akan mendapatkan "bergaya". Jika Anda ingin Gambar naskah Tautan diterapkan ke semua gambar di dalam jangkar, biarkan ini kosong string. defaultClass - string yang Anda gunakan untuk memberikan nama kelas yang mendefinisikan bagaimana gambar yang mencakup rentang yang ditata secara default overClass - string yang Anda gunakan untuk memberikan nama kelas yang mendefinisikan bagaimana gambar yang mencakup rentang yang ditata ketika berguling.

Versi Multistyle dari Link Gambar terlihat sedikit lebih rumit tetapi memberikan kemungkinan untuk menggunakan beberapa gaya pada gambar yang berbeda. Bagian Config terdiri dari array JavaScript mana setiap item adalah sebuah array dari 3 subitems. Mereka 3 subitems adalah exaclty yang sama seperti dalam versi gaya tunggal: image css kelas (digunakan untuk menemukan gambar), default css kelas untuk gambar yang mencakup rentang dan kelas css digunakan untuk gambar yang mencakup rentang ketika berguling.

Bagaimana menerapkannya ke situs Anda sendiri?

Download zip berisi file sampel, membongkar dan folder tempat di root situs Anda dan menyisipkan baris kode untuk tag kepala Anda:

Internet Lahan src="imagelink/imagelink.js">
Dalam file css Anda, Anda harus menciptakan gaya yang akan Anda gunakan dengan script Gambar Link. Buat sendiri atau menggunakan beberapa gaya dari demo, itu terserah Anda. Pastikan bahwa Anda memasukkan nama yang benar kelas css pada bagian konfigurasi dari file JavaScript.

Untuk pengembang maju, ini bisa menjadi titik awal dengan banyak kemungkinan. Beberapa dari mereka akan dijelaskan dalam artikel lain ketika saya melepaskan Tautan Gambar v2.0 sehingga menantikan.

Note:

Untuk hasil terbaik di semua browser, Anda harus menetapkan position: relative pada mengandung elemen. Jadi, jika Anda memiliki teks dengan gambar ditempatkan di dalam div id = isi, taruh position: relative untuk div itu.

Source : http://cssglobe.com/post/1238/style-your-image-links

BackLink please. Thanks! ^^

URL

Code For Forum

HTML Code

<a href='http://edho-xp.blogspot.com/2012/03/style-your-image-links-with-jquery.html' target='_blank'>Style Your Image Links With jQuery</a>

About EDHO-XP Author

Nama gue Edo Cosma. Nama asli gue Ahmad Dhoifullah . Gue orang nya sedikit pendiam dan pemalu. Apa lagi gue masih menduduki kelas 8 / 2 SMP tepatnya di sekolah SMPN 3 BATANGHARI sekolang yang berada di kotaku. Ini blog hanya percobaan dan iseng aja kok sob. Salam kenal yah sob !

Selengkapnya Tentang Admin EDHO-XP »