Menampilkan gambar secara acak adalah teknik yang sangat banyak digunakan. Misalnya saja banner yang ditampilkan secara acak, saat Anda masuk ke suatu website, bannernya selalu berbeda, atau selalu ada tips dengan konten yang berbeda-beda. Dengan menggunakan teknologi ini, tidak hanya lebih banyak konten yang dapat dimasukkan ke dalam ruang tertentu, tetapi juga dapat memberikan ilusi kepada orang-orang tentang pembaruan yang sering dilakukan.
Seberapa bersemangatkah kamu? Faktanya, selama Anda memiliki sedikit pengetahuan dasar tentang html dan javascript, semuanya sangat sederhana. ikuti saya dan mari kita lihat rahasia acaknya.
Mari kita mulai dengan contoh sederhana. Biasanya kita menambahkan gambar ke halaman menggunakan <img src="gambar">. Jika kita ingin menampilkan 3 gambar berbeda secara acak, kita perlu melakukan sedikit modifikasi pada kode ini. Pertama, tambahkan tag <script>:
Berikut ini adalah cuplikan kutipannya:
<bahasa skrip=javascript></skrip>
Kemudian masukkan <img src="picture"> ke dalam tag ini menggunakan document.write(""), dan jadilah
dokumen.tulis("<img src=gambar>")
Sekarang mari kita selesaikan paragraf paling kritis:
Berikut kutipannya:
id=Matematika.bulat(Matematika.acak()*2)+1
Dengan cara ini maka diperoleh angka acak seperti 1, 2, dan 3. Ganti nama gambar yang ingin ditampilkan menjadi 1.gif, 2.gif, 3.gif, ya! Kode terakhirnya adalah:
Berikut cuplikan kutipannya:
<bahasa skrip=javascript>
id=Matematika.bulat(Matematika.acak()*2)+1
dokumen.tulis("<img src="+id+".gif>")
</skrip>
Cobalah, bagus bukan? Jadi bagaimana jika setiap gambar saya berhubungan dengan hyperlink?
Misalkan ada 3 gambar, 1.gif, 2.gif, 3.gif, dan link yang bersangkutan adalah url1, url2, dan url3.
Untuk mendapatkan korespondensi satu-satu antara gambar dan tautan, kita perlu menyiapkan gambar array untuk menempatkan alamat tautan, sebagai berikut:
Berikut ini adalah fragmen referensi:
var gambar=Array baru(3)
gambar.panjang=3
gambar[1]="url1"
gambar[2]="url2"
gambar[3]="url3"
Untuk mendapatkan link yang sesuai dengan gambar, kita juga perlu mendefinisikan array imageurl=image[id]
Prinsipnya begini:
Ketika halaman tersebut dibaca, diambil nomor acak dengan asumsi 2 yaitu id=2, maka kita dapat dengan mudah menampilkan 2.gif pada halaman seperti di atas. Kemudian kita bisa melihat: imageurl=image[2] dan image[2]='url2', selebihnya mudah saja. Kode lengkapnya adalah sebagai berikut:
Berikut ini adalah cuplikan kutipannya:
<bahasa skrip=javascript>
var gambar=Array baru(3)
gambar.panjang=3
gambar[1]="url1"
gambar[2]="url2"
gambar[3]="url3"
id=Matematika.bulat(Matematika.acak()*2)+1
url gambar=gambar[id]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</skrip>
Dicetak ulang dari: Desain Burung Tujuh Warna --- pc-king