MEMASANG LINK PADA GAMBAR BERJALAN

Pada artikel sebelumnya penjelasan mengenai marquee yang berisi teks/tulisan berjalan dengan berbagai macam gerakan/perilaku. Kali ini yang ingin saya tambahkan adalah penggunaan efek marquee dengan gambar berjalan/bergerak yang terdapat link

Pada dasarnya kode marquee yang digunakan sama, namun yang sedikit membedakan adalah memasukan kode gambar diantara kode marquee. Tentu saja kode marquee yang dipakai banyak variasinya tergantung mana kode yang akan digunakan, dengan begitu gambar yang berjalan/bergerak dari bawah ke atas atau dari kiri kekanan, menggunakan warna latar belakang dan sebagainya dapat di atur sedemikian rupa, Anda bisa mengkombinasikan atau memadukannya.

Sebelumnya saya ingin sedikit mengulang prinsip dasar dari penggunaan marquee disini :

<marquee>

Teks/tulisan, link, gambar dan sebagainya yang ingin dimasukan.


</marquee>


Perlu diketahui pada saat ingin membuat link pada gambar adalah, kita harus memiliki 2 link yaitu :

1. Kode HTML untuk Link yang menjadi tujuan
   
   Contoh Link dasar :
   
   <a href="url alamat web yang ingin dimasukan sebagai link">Tulisan link Anda/gambar></a>
   
   atau contoh link sudah jadi yang menuju ke dalam blog Saya sebagai berikut
   
   <a href="http://roza29.blogspot.com/2009/07/teks-anda-diletakan-disini.html"> Membuat Efek Marquee</a>
   
   
   Pada saat di klik pada gambar, maka yang ditampilkan pada blog adalah posting mengenai Membuat Efek Marquee, artinya kalau link pada gambar juga sudah ada
   
   Setelah sudah menentukan link mana yang menjadi tujuan,maka langkah ke dua harus memiliki link pada gambar berupa kode html agar gambar dapat ditampilkan
   
   
2. Kode HTML untuk menampilkan gambar tersebut

Contoh link dasar untuk gambar

<img src="alamat url gambar diambil dari tempat lain" alt="nama gambar"/>

Sebagai contoh ingin menampilkan gambar yang sudah saya miliki berupa photo gambar alam, maka langkah yang dilakukan

1. Anda siapkan photo/gambar
2. Upload gambar ke Photobucket.com atau klik disini
3. Anda akan mendapatkan kode HTML seperti ini

<a href="http://s636.photobucket.com/albums/uu86/rozaniyes/?action=view&current=images.jpg" target="_blank"><img border="0" alt="Photobucket" src="http://i636.photobucket.com/albums/uu86/rozaniyes/images.jpg"/></a>

Kode dasar link untuk gambar

<a href="url atau alamat situs yang akan dijadikan link"><img src="url dimana gambar diambil" alt="nama gambar"/></a>

Kemudian Anda mengganti beberapa kode dan merubah lebar dan tinggi yang disesuaikan seperti contoh berikut ini dengan kode marquee hasil gambar bergerak dari bawah ke atas, kemudian Anda tambahkan alamat web yang akan dijadikan tujuan link Anda.













Contoh gambar tersebut diatas yang sudah memiliki link dengan kode html berikut ini

<marquee direction="up" scrollamount="2" border="0" align="center" width="100%" height="110">
<a href="http://roza29.blogspot.com/2009/07/teks-anda-diletakan-disini.html" target="new"><img style="width: 123px; height: 98px;" src="http://i636.photobucket.com/albums/uu86/rozaniyes/images.jpg" alt="Photobucket" border="3" />
</a>

</marquee>

Contoh lainnya gambar yang memiliki link














Contoh gambar lainnya yang sudah memiliki link dengan kode html berikut ini

<marquee direction="up" width="100%" scrollamount="2" height="210" align="center">
<a href="http://www.formulabisnis.com/?id=rozayes" target="new"><img border="0" style="width: 140px; height: 219px;" alt="Photobucket" src="http://i636.photobucket.com/albums/uu86/rozaniyes/photomodel.jpg" alt="Photobucket" border="3" /></a>

<a href="http://www.formulabisnis.com/?id=rozayes" target="new"><img border="3" style="width: 140px; height: 219px;" src="http://i636.photobucket.com/albums/uu86/rozaniyes/covermodel.jpg" alt="Photobucket" border="3" /></a>


<a href="http://www.formulabisnis.com/?id=rozayes" target="new"><img border="3" style="width: 140px; height: 219px;" src="http://i636.photobucket.com/albums/uu86/rozaniyes/parishilton.jpg" alt="Photobucket" border="3" /></a>

<a href="http://www.formulabisnis.com/?id=rozayes" target="_new"><img border="3" style="width: 140px; height: 219px;" alt="Photobucket" src="http://i636.photobucket.com/albums/uu86/rozaniyes/shasa.jpg" alt="Photobucket" border="3" /></a>


</marquee>


Semoga penjelasan ini bermanfaat.

Posted in: Blogspot Tutorial, Memasang Link Pada Gambar Berjalan