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

      Tinggalkan Balasan

      Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *