Tuesday, October 25, 2016

Penggunaan Onmouseover Untuk Text



Membuat tampilan menu atau tombol yang menarik untuk sebuah website merupakan sebuah keharusan bagi seorang desainer web.

Berikut contoh untuk membuat sebuah tampilan menu yang pada saat mouse digerakkan ke arah tulisan tersebut, tulisannya jadi memiliki warna yang berbeda dengan menggunakan function. Pada contoh dibawah tulisan "Profil" nya hitam pada saat di mouse digerakkan melintasi tulisan akan berubah menjadi merah.
Berikut scriptnya :

<script>
function mouseOver() {
    document.getElementById("tes").style.color = "red";
}

function mouseOut() {
    document.getElementById("tes").style.color = "black";
}
</script>

untuk menggunakannya kita tinggal menuliskan misalnya :

<h1 id="tes" onmouseover="mouseOver()" onmouseout="mouseOut()"> Profil </h1>

Untuk selanjutnya  bisa dicoba atribut yang lain selain color. Kita bisa juga mencoba seperti menu yang dibawah ini dengan menggunakan button. Pada saat  mouse digerakkan, buttonnya akan berubah menjadi biru dan jika dipilih akan membuka linknya.

No comments:

Post a Comment