Cara membuat Image berjalan dalam box area

Salam Blogger..!!

Topik kita kali ini adalah Cara membuat image berjalan dalam box area , Nggak usah bingung sobat-sobat sekalian... :D.

Sudah dilihat?, nah itulah kira-kira contoh image berjalan dalam box area. Biasanya cara ini digunakan para sobat blogger untuk menampilkan banner sahabat di halaman link exchange.

baiklah kita mulai pelajaran untuk hari ini.. :). Untuk membuat Image berjalan dalam BOX Area kita membutuhkan script html sebagai berikut:

1. Script untuk box area:

<div style="background-color: #ffffff; border: 2px solid #000000; height: 500px; overflow: auto; padding: 3px; text-align: justify; width: 400px;">kode marquee</div>

Keterangan :
» #ffffff : kode warna untuk background area.
» #000000 : Kode warna untuk border/garis tepi box area
» 500px : Tinggi box area
» 400px : Lebar box area

2. Script untuk menempatkan image supaya bisa bergerak dan stop bila ditunjuk oleh mouse:

<marquee align="center" direction="up" height="180" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
<a href="http://teman-blogger.blogspot.com/" title="Teman-blogger"><img alt="Teman-blogger.blogspot.com|Free Software|Free Games" border="0" src="http://photoserver.ws/images/spaR4f745678ef104.gif" /></a></marquee>

» Silahkan ganti teks berwarna merah dengan link tujuan sobat

3. Langkah selanjutnya adalah menggabungkan kedua script diatas sehingga menjadi seperti dibawah ini:

<div style="background-color: #ffffff; border: 2px solid #000000; height: 200px; overflow: auto; padding: 3px; text-align: justify; width: 500px;"> <marquee align="center" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><a href="http://teman-blogger.blogspot.com/" title="Murusawa-Tech"><img alt="Murusawa-Tech|Free Software|Free Games" border="0" src="http://photoserver.ws/images/spaR4f745678ef104.gif" /></a></marquee></div>