Assalamualaikum Hai sekalian semua, pada kesempatan kali ane mau share Cara Membuat Gambar Membesar dengan Arahan Cursor menggunakan Javascript. Berikut adalah penampakannya :
Sebelum Cursor diarahkan
Setelah Cursor diarahkan
Mungkin cursornya ga keliatan yak :D yaudah langsung aja sedot kodingnya :)
<html>
<head><title> Gambar Besar Kecil</title>
<script language="javascript">
window.onload = init;
function init()
{
var img;
img = document.getElementById("tes");
img.onmouseover = function()
{
img.setAttribute("src", "bulan.jpg");
this.style.height='400px';
this.style.width='500px';
}
img.onmouseout = function()
{
img.setAttribute("src", "bulan.jpg");
this.style.height='200px';
this.style.width='300px';
}
}
</script>
</head>
<body>
<div>
<img id='tes'src="bulan.jpg"width="300px"height="200px">
</div>
</body></html>
<head><title> Gambar Besar Kecil</title>
<script language="javascript">
window.onload = init;
function init()
{
var img;
img = document.getElementById("tes");
img.onmouseover = function()
{
img.setAttribute("src", "bulan.jpg");
this.style.height='400px';
this.style.width='500px';
}
img.onmouseout = function()
{
img.setAttribute("src", "bulan.jpg");
this.style.height='200px';
this.style.width='300px';
}
}
</script>
</head>
<body>
<div>
<img id='tes'src="bulan.jpg"width="300px"height="200px">
</div>
</body></html>
Keterangan :
- img = document.getElementById("tes");
Kata yang di dalam kurung getElementById("tes") itu merujuk pada id gambar yang ada
di bagian body.
- img.setAttribute("src", "bulan.jpg");
Nama file bulan.jpg itu disesuaikan dengan gambar yang akan ditampilkan.
Oke selesai. Begitulah caranya supaya gambar membesar dengan arahan cursor. Nih ada video tutorialnya juga
Semoga bermanfaat. Kurang lebihnya mohon maaf. Wassalamualaikum
Semoga bermanfaat. Kurang lebihnya mohon maaf. Wassalamualaikum
0 komentar:
Post a Comment