dasar html (12) – Membuat Text Berjalan

Jika sebelumnya saya pernah membuat tutorial tentang cara mengatur tampilan elemen HTML,
kini ane akan memberikan tutorial tetang cara lainnya yang dapat digunakan untuk membuat text lebih kelihatan menarik, yaitu dengan membuat “text berjalan / credit” (marquee text).
Ada beberapa macam model marquee text:

Marque text biasa
tulisan bergerak dari kiri menuju kanan.

<marquee>Ini tulisak bergerak dari kiri ke kanan</marque>

Kamu bisa mengkombinasikan beberapa tag html ke fungsi marquee ini, misal <a> , <img> , <b> , <i> ,<u>

misalnya:

<marquee>
<b><i>
<a href="http://hace.web.id">Link Ke Blog Saya</a>
</i></b>
</marquee>

Jika masih merasa kurang puas dengan arah text ato warnanya monggo ini ada caranya:

Untuk merubah arah text, tambahkan atributberikut ini =>

direction=”value”
Ganti text “value” dengan ‘left, right, up, down, atau alternate’.
‘left’ mengarahkan text ke kiri,
‘right’ ke kanan,
‘up’ ke atas’,
‘down’ ke bawah,
‘alternate’ bolak balik kayak orang bingung
Atau jika ingin efek geraknya hanya satu kali setelah itu berhenti, tambahkan atribut ini
behavior=”slide”
<marquee bgcolor="#ffff00" width="270" direction="right" behavior="alternate">
<b>INI tulisannya bolak balik kayak <a href="http://hace.web.id">orang bingung</a></b>
</marquee>

Hasilnya:


INI tulisannya bolak balik kayak orang bingung

Sulit Sekali ketika akan mengeklik link yang berjalan seperti itu, lalu bagaimana caranya biar ketika ada mouse datang linknya berhenti?
gampang banget, tambahkan aja atribut OnMouseOver=”this.stop()” OnMouseOut=”this.start()”

contoh pemakaian

<marquee bgcolor="#ffff00" width="270" direction="right" behavior="alternate" OnMouseOver="this.stop()" OnMouseOut="this.start()">
<b>INI tulisannya bolak balik kayak <a href="http://hace.web.id">orang bingung</a></b>
</marquee>

Hasilnya:

INI tulisannya bolak balik kayak orang bingung

Leave a Reply

Your email address will not be published. Required fields are marked *