18%
25%
50%
75%

Kripkorn Studios | Komuniti Drupal phpBB Malaysia

Logo Kripkorn Studios

Paparan rawak gambar bersama pautan

Penulis: parasolx (Sep 12, 2011)
kemas kini Kemas kini: Sep 12, 2011
Artikel bebas-Paparan rawak gambar bersama pautan

Sinopsis

Tutorial ini memaparkan kod skrip yang mudah untuk Javascript bagi menghasilkan kesan kitaran elemen gambar bersama pautan. Proses kitaran akan berfungsi setiap kali laman dimuat turun atau dibuka semula (refresh).

Penggunaan elemen gambar bukan sahaja dapat menambah keceriaan satu-satu laman web malah sekiranya elemen gambar tersebut menggunakan kesan khas dengan bantuan Javascript akan dapat meningkatkan kredibiliti laman itu sendiri. Dalam tutorial kali ini, satu skrip yang mudah dan ringkas untuk melakukan kitaran gambar bersama pautan akan ditunjukkan.

Kod Javascript yang mudah ini juga digunakan di laman Kripkorn Studios.

Aturcara kod:

<script type="text/javascript">

//store the quotations in arrays
var images = [],
index = 0;

images[0] = "<a href = 'http://example.com'><img src='http://example.com/drupal7.gif' alt='Drupal 7'></a>";

images[1] = "<a href = 'http://example.com'><img src='http://example.com/drupal6.gif' alt='Drupal 6'></a>";

images[2] = "<a href = 'http://example.com'><img src='http://example.com/phpbb3.gif' alt='phpBB 3'></a>";

images[3] = "<a href = 'http://example.com'><img src='htt://example.com/web.gif' alt='Aturcara web'></a>";

index = Math.floor(Math.random() * images.length);

document.write(images[index]);

</script>

Kod Javascript ini perlu dimasukkan di antara tag <body> </body>.

Untuk penambahan elemen gambar, salin baris kod: images[n] ... dengan memastikan bahawa bilangan nombor n adalah berlainan dan bertambah secara jujukan.

Aspek: rawak, gambar, pautan
mad