07 March 2008

membuat gambar bergerak dalam web

Bosan dengan tampilan gambar yang hanya monoton, coba dech gunakan script di bawah ini mungkin ini bisa mengurangi rasa jenuh para sobat blogger karena tampilan gambar yang akan didapat akan lebih atraktif coba dech kalo gak percaya.

oh iya jadi lupa nampilin scriptnya keasyikan bacot sich, sobat blogger copy paste aja script di bawah ini:

<SCRIPT LANGUAGE="JavaScript">


document.write(screen.width + " x " + screen.height)

<!-- ONE STEP TO INSTALL BOUNCING IMAGE:


1. Copy the coding into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the BODY of your HTML document -->


</script>




<BODY>


<div id="img" style="position:absolute;">

<img src="TN_psd0810.JPG" onMouseDown="pauseResume();" width="171" height="158">

</div>


<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin

var step = 1;

var delay = 30;

var height = 0;

var Hoffset = 0;

var Woffset = 0;

var yon = 0;

var xon = 0;

var pause = true;

var interval;

var name = navigator.appName;




if(name == "Microsoft Internet Explorer") name = true;

else name = false;

var xPos = 20;

if(name) var yPos = document.body.clientHeight;




else var yPos = window.innerHeight;

function changePos() {

if(name) {

width = document.body.clientWidth;

height = document.body.clientHeight;

Hoffset = img.offsetHeight;

Woffset = img.offsetWidth;

img.style.left = xPos + document.body.scrollLeft;

img.style.top = yPos + document.body.scrollTop;

}




else {

height = window.innerHeight;

width = window.innerWidth;

Hoffset = document.img.clip.height;

Woffset = document.img.clip.width;

document.img.pageY = yPos + window.pageYOffset;

document.img.pageX = xPos + window.pageXOffset;

}




if (yon) {

yPos = yPos + step;

}

else {

yPos = yPos - step;

}

if (yPos < 0) {

yon = 1;

yPos = 0;

}

if (yPos >= (height - Hoffset)) {

yon = 0;

yPos = (height - Hoffset);

}

if (xon) {

xPos = xPos + step;

}

else {

xPos = xPos - step;

}

if (xPos < 0) {

xon = 1;

xPos = 0;

}

if (xPos >= (width - Woffset)) {

xon = 0;

xPos = (width - Woffset);

}

}




function start() {

if(name) img.visibility = "visible";

else document.img.visibility = "visible";

interval = setInterval('changePos()',delay);

}




function pauseResume() {

if(pause) {

clearInterval(interval);

pause = false;

}




else {

interval = setInterval('changePos()',delay);

pause = true;}

}

start();

// End -->

</script>


nah nanti paste kan script diatas ini dibawah tag <BODY> sesudah <head> yach, truz teks yang berwarna merah anda ganti dengan file source gambar para sobat blogger. ok dech met mencoba yach. :>
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...
4 Komentar untuk "membuat gambar bergerak dalam web"

Maksudnya tulisan merah gimana Gan?

contohnya kk

mantap gan.
akan saya terapkan.

kunjungi blog saya juga ya di http://limarepastinipus.blogspot.com

 
Back To Top