JavaScript Hover Buttons, Kuno tapi menarik

glass-buttonMenggunakan Javascript untuk merubah gambar ketika user melewatkan pointer mousenya ke gambar yang bersangkutan sudah amat sangat populer malah udah termasuk variasi yang kuno. tapi it’s OK varasi ini masih menarik untuk kita bahas, karena CMS top seperti joomla saja masih memasukan variasi ini ke dalam templatenya.

konsepnya sich mudah untuk buat hover button, tapi kalo lagi bingung ya sama aja jadinya kelihatan susah. kurang lebih begini konsepnya :

1. Periksa browser apakah support dengan fungsi yang akan kita buat nanti

2. Pendefinisian dan pengambilan gambar yang akan digunakan

if (document.images)
{
pic1on= new Image(100,25);
pic1on.src=”gambarmenu2.gif”;

pic1off= new Image(100,25);
pic1off.src=”gambarmenu1.gif”;
}

3. Pemasangan fungsi Mouseover / Mengganti gambar jika mouse berada di area gambar

function lightup(imgName)
{
if (document.images)
{
imgOn=eval(imgName + “on.src”);
document[imgName].src= imgOn;
}
}

4. Pengembalian gambar awal jika mouse meniggalkan/lostfocus dari gambar

function turnoff(imgName)
{
if (document.images)
{
imgOff=eval(imgName + “off.src”);
document[imgName].src= imgOff;
}
}

5. Memasang image pada HTML

<A HREF=”index.html” onMouseover=”lightup(‘pic1’)” onMouseout=”turnoff(‘pic1’)”>
<IMG SRC=”../images/menugambar.gif” name=”pic1″ width=”100″ height=”25″ border=”0″></A>

Bagaimana kalau gambar yang mau dibuat hover lebih dari satu ??

Don’t worry be happy…tinggal kita tambah saja di pendefinisian gambarnya, contohnya seperti ini :

if (document.images)
{
pic1on= new Image(100,25);
pic1on.src=”gambarmenu2.gif”;

pic2on= new Image(100,25);
pic2on.src=”tombolmenu1gif”;

pic1off= new Image(100,25);

pic1off.src=”gambarmenu1.gif”;
pic2off= new Image(100,25);
pic2off.src=”tombolmenu1.gif”;

}

pemanggilannya di HTMLnya juga menyesuaikan dengan scriptnya

<A HREF=”index.html” onMouseover=”lightup(‘pic1’)” onMouseout=”turnoff(‘pic1’)”>
<IMG SRC=”../images/menugambar.gif” name=”pic1″ width=”100″ height=”25″ border=”0″></A>

<A HREF=”index.html” onMouseover=”lightup(‘pic2’)” onMouseout=”turnoff(‘pic2’)”>
<IMG SRC=”../images/menugambar.gif” name=”pic1″ width=”100″ height=”25″ border=”0″></A>

begitu seterusnya sejumlah gambar yang mau dijadikan hover button …..

lengkapnya gini :

<HEAD>

<SCRIPT language="JavaScript">
<!--

  if (document.images)
   {
     pic1on= new Image(100,25);
     pic1on.src="gambarmenu2.gif";  

     pic1off= new Image(100,25);
     pic1off.src="gambarmenu1.gif";
   }

function lightup(imgName)
 {
   if (document.images)
    {
      imgOn=eval(imgName + "on.src");
      document[imgName].src= imgOn;
    }
 }

function turnoff(imgName)
 {
   if (document.images)
    {
      imgOff=eval(imgName + "off.src");
      document[imgName].src= imgOff;
    }
 }

//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="index.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')">
<IMG SRC="../images/shoes1.gif" name="pic1" width="100" height="25" border="0"></A>
</BODY>

OK semoga bermanfaat.....

3 Responses to “JavaScript Hover Buttons, Kuno tapi menarik”

  1. Artikel anda di

    http://programing.infogue.com/javascript_hover_buttons_kuno_tapi_menarik

    promosikan artikel anda di infoGue.com. Telah tersedia widget shareGue dan pilihan widget lainnya serta nikmati fitur info cinema, game online & kamus untuk para netter Indonesia. Salam!

  2. Mau tanya nih…Event di java script bisa dihubungkan dengan dml mysql ga?

    misal enter bisa langsung save ke database….

  3. Mau tanya nih…Event di java script bisa dihubungkan dengan dml mysql ga?

    misal enter bisa langsung save ke database….

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: