Sudah lama tidak nulis di sini, kebetulan beberapa hari lalu seseorang meminta saya untuk merubah tampilan thumbnail virtuemartnya agar gambar produk jika mouse hover bisa tampil rada gede. Triknya saya coba kupas disini semoga bisa bermanfaat dan dapat dikembangkan lebih baik.

Bagaimana caranya? Jawabannya : Gunakan CSS.

Kita hanya perlu sedikit modifikasi file ps_product.php yang berada di administrator\components\com_virtuemart\classes. Coba lihat line 1302:

return "<img src=\"$url\" $html_height_width $args $border />";

kita tambahkan nama class, misal aagun, sehingga menjadi :

return "<img src=\"$url\" $html_height_width $args $border class=\"aagun\" />";

Class inilah yang nantinya menjadi acuan untuk kita melakukan hover.

Kemudian di file css kita masukan :

a:hover img.aagun { width:25%; height:50%; position:absolute; border:5px double #ccccff; background-color:#FFFFFF; display:block;}

Untuk sementara dengan cara diatas permintaan client anda bisa terpenuhi. Tetapi masih ada kelemahan dari cara ini diantaranya image yang dihover dipaksakan dinaikan sesuai dengan nilai css kita jadinya jelas gambar akan pecah, kemudian semua gambar yang ada nama class di atas, akan mengikuti aturan ini.

Tetapi bagi Anda yang menginginkan seperti ini, kenapa tidak dicoba, dan yang lebih pasti dikembangkan lagi untuk lebih sempurna, mungkin ada cara lain yang lebih baik dari ini ?