PC Guru – Share Our Knowledge Computer

Tutorial HTML : Membuat Rollover Images

April 13th, 2009 |

Author: OQ

Apa sih yang dimaksud dengan “Rollover Images” ? Rollover Images adalah dimana gambar akan berubah kebentuk lain jika mouse diarahkan keatas gambar tersebut. Sehingga akan membuat tampilan gambar menjadi makin menarik.

Untuk membuat Rollover Image kita perlu menyiapkan 2 gambar yang berbeda dengan ukuran yang sama. Sebagai contoh saya telah menyiapkan gambar yang akan digunakan untuk belajar.

Silahkan Klik kanan pada gambar, kemudian pilih Save Image As jika menggunakan Firefox. Atau anda juga boleh menyiapkan sendiri file gambar. Nantinya gambar pertama akan kita gunakan untuk gambar sebelum dirollover. Sedangkan gambar kedua adalah gambar yang menjadi rollovernya.

Langkah 1.

Untuk melakukannya adalah, salin atau copy kode JavaScript dibawah ini kedalam halaman web. Kemudian tempatkan sebelum tag <HEAD>, atau sebelum posisi gambar diletakkan.

^?View Code JAVASCRIPT

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this 
// notice with the code.
 
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
    pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
 
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
    {
    rollOverArr[pageImageName].outImg = new Image;
    rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
    }
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
 
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>

Langkah 2.

Kemudian salin atau copy lagi kode dibawah ini untuk meletakkan gambar pada halaman website anda.

^?View Code JAVASCRIPT

<a onmouseover="rollover('home')" onmouseout="rollout('home')" href="http://pcguru.okihelfiska.net"><img alt="PC Guru" src="http://www.okihelfiska.net/data/roll-out.png" border="0" name="home" /></a>
<SCRIPT TYPE="text/javascript">
<!--
setrollover("http://www.okihelfiska.net/data/roll-over.png");
//-->
</SCRIPT>