Cara Membuat Rollover Image di HTML

Huiihh, demen banget ya gue posting tutorial. Ahahahahaa, ya ga papa lah. Berbagi ilmu itu wajib hukumnya, ya.. daripada gue galau-galauan terus kan. Hmmmm

Sekarang ini gue mau ngasih tau gimana caranya bikin rollover image di HTML.

Rollover image itu semacam button yang kita kasih sentuhan animasi sedikit. Jadinya nanti kaya gambar gif gitu. Misalkan kaya button share di blog-blog atau button follow di blog-blog, kan kalo kita deketin mouse ke gambar itu ada semacam perpindahan warna. Jadi di postingan ini gue bakal ngasih tau bagaimana cara membuatnya. Sebenernya sih tanpa gue kasih tau juga mungkin kalian udah tau caranya. Ada sih cara gampangnya bikin rollover image pake software semacam Adobe Dreamweaver. Cuma nanti script yang kita dapetin bakal panjang lebar.

Sekarang ini gue bakal ngasih tau gimana caranya buat bikin rollover image dengan script yang minim.

Begini caranya :

• Siapin 2 gambar sama tapi beda warna. Misalkan kaya  gambar ini...

Gambar 1 :

Gambar 2 :

• Terus kita kasih script ini :

Ini ditaro di bagian tag <head> :

<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>

Ini ditaro di bagian tag <body> :

<center><a class="pic" href="LINK TUJUAN JIKA GAMBAR DIKLIK">
<img class="image1" src="URL GAMBAR 1" />
<img class="image2" src="URL GAMBAR 2" /></a></center>

------------------------------------

 Maka nanti yang akan kita dapatkan seperti ini :

Lucu khaannn... Emmmm... hahahahaahaa...

Udah yaaahh tutorial seputar rollover image.

Terimakasih sudah berkunjung...

Cara Play Music di HTML

Haiii, kali ini gue bakal ngasih tau bocoran dari koding HTML tentang gimana caranya bisa play lagu pake HTML. Awalnya sih gue tau kode ini dari tugas HTML gue, yang disuruh buat design web pake Adobe Dreamweaver. Kebetulan gue dapet tema tentang tangga lagu gitu deh.

Gue ngerjain tugas ini sekelompok, sama Bagus, Lioni, dan Vini.

Cuss langsung aja ke topiknya..

Codingnya kaya gini :

<audio controls="controls">
    <source src="URL MUSIC.ogg" />
    <source src="URL MUSIC.mp3" />
        <p>Maaf, browser Anda tidak mendukung untuk menjalankan music ini.
<br>Silahkan Anda gunakan browser lain.</br>
</p>
</audio>

Mari kita liat koding itu. Saat play music kita harus nyiapin lagunya dulu yang akan di putar. File itu berbentuk .MP3 dan .OGG. Biar dapet file .ogg kita bisa convert file .mp3 yang kita punya pake software tambahan, gue sih biasa pake Format Factory buat convert jenis file.

Yang merah itu kita masukin url music kita yang akan kita pake.

Koding ini kita simpen dalam satu file proyek yang kita buat. Kaya gini conttohnya, gunanya biar ga ribet dan rapih.

Nanti kita bakal dapetin hasilnya kaya gini di browser yang kita pake :

Koding ini sayangnya masih belum bisa jalan di IE 9 ke bawah, buat browser yang lain juga belum tau deh gue, soalnya gue belum nyoba browser lain kecuali ke-3 browser di atas. Sejauh ini, yang paling bagus buat play music HTML itu di IE, tampilannya lebih keren kedua itu di chrome, yang ketiga baru deh di mozila.

Kalo nanti kita dapetin tulisan kaya gini : "Maaf, browser Anda tidak mendukung untuk menjalankan music ini. Silahkan Anda gunakan browser lain."  

Jangan panik ya.. Woles aja woless, hehehe. Itu tandanya Browser yang kita pake ga support sama kodingnya. Soalnya koding yg dipake ini koding HTML5.

Okedehh... Sekian tutorial dari gue kali ini, semoga bermanfaat.