Jumat, 17 Juli 2009

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.



Photobucket









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


Photobucket






Photobucket




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.

3 komentar:

Anonim mengatakan...

There is a huge variety to choose from if you think links of london outside the box with Non Diamond Wedding Rings. First option to consider is whether you want to links of london bracelet purchase white gold or yellow gold, most women have a preference and you do not want to links of london charms pick the wrong one.The decision about white or yellow gold behind you now you can links of london charms move forward to the determinations about the setting and the jewels to be placed on the hand of your future bride. Does she want to have her birthstone? Find out whichlinks of london watches month she was born in to figure out what stone is hers as each month is a different color.

rental laptop mengatakan...

bagus juga gan tutorialnya...boleh dicoba gan... ada gak ya yg lebih sederhana Gan, tks

Irfan Ventilatore mengatakan...

Ikut Gabung Gan... Salam kenal dari saya... :))

Poskan Komentar

KLIK AJA DEH

EIMIMO

CASH111

PAYZA

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Coupons