Untuk Contoh hasil akhir aku buat halaman khusus Random Image Background dan bisa juga di download tutorialnya dan contoh jadinya kalo pengen nyobain dirumah.
Tutorial:
Untuk membuat random image baik untuk header atau untuk keperluan lainnya, dulu aku pernah pake Javascript. Ternyata masih ada yang efektif dan efisien, selain itu juga lebih mudah, yaitu menggunakan CSS dengan bantuan script Random Image Rotator dari Automatic Labs. (Refress (F5) atau Reload halaman contoh beberapa kali untuk melihat pergantian image pada bagian header/atas)
Download file Random Image Rotator dan simpan dengan nama rotator.php.
Masukkan semua image ke folder yang sama dengan file rotator.php, untuk contoh ini saya buat folder dengan nama headerimages untuk image-image yang akan digunakan untuk bagian header .
Buat kode CSS untuk memanggil image-image tadi, contoh yang saya buat untuk bagian header/atas halaman contoh tersebut adalah:
#header {
margin: 0px;
width: 100%;
background-color: #660000;
background-image: url(headerimages/rotator.php);
background-repeat: no-repeat;
background-position: center center;
height: 120px;
padding-top: 26px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
}
Yang paling penting adalah pada bagian yang saya tebalkan, jadi file rotator.php tadi kita jadikan sebagai background dalam CSS kita.
Setelah membuat CSS, buat kode xhtml seperti dibawah ini dimana kamu pengen random image-nya muncul:
