Beberapa waktu yang lalu saya menemukan sebuah tutorial di blognya Srinivas Tamada tentang cara mengganti image background secara otomatis. Tutorialnya sangat simpel dan tidak membutuhkan coding yang panjang. Hanya dengan beberapa baris kode javascript saja, setiap kali refresh maka background web kita akan terganti secara otomatis.
Pertama, yang perlu disiapkan adalah images yang akan digunakan sebagai background. Kemudian masukkan images tersebut ke dalam folder bgimages. Urutkan nama images tersebut mulai dari angka 1. Contoh: 1.jpg, 2.jpg, 3.jpg, dst.
Buatlah sebuah file html yang isinya sebagai berikut.
Buatlah sebuah file html yang isinya sebagai berikut.
<html>
<head>
<script type="text/javascript">
var totalCount = 6;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";
}
</script>
</head>
<body>
<!-- Isi body -->
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>
<head>
<script type="text/javascript">
var totalCount = 6;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";
}
</script>
</head>
<body>
<!-- Isi body -->
</body>
<script type="text/javascript">
ChangeIt();
</script>
</html>
Coba kalian perhatikan pada baris kode javascript-nya, disitu terdapat fungsi random yang digunakan untuk mengacak angka-angka. Itulah sebabnya nama images harus berupa angka supaya dapat diacak menggunakan fungsi random itu tadi.
<script type="text/javascript">
var totalCount = 6;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";
}
</script>
var totalCount = 6;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.body.background = 'bgimages/'+num+'.jpg';
document.body.style.backgroundRepeat = "repeat";
}
</script>
Tidak ada komentar:
Posting Komentar