Monday 26 September 2011

Manipulasi Gambar javascript

| Monday 26 September 2011 | 0 comments


Untuk memuat suatu image, pada Javascript terdapat objek Image. Untuk membuat objek tersebut pendeklarasiannya adalah sebagai berikut :
img1 = new Image ()
img1.src = "pic1.gif"
artinya membuat objek image dengan isinya adalah image pic1.gif
berikut akan diberikan contoh mengenai objek image :

Contoh Program JavaScript
<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript"> 
var num=1
img1 = new Image ()
img1.src = "pic1.gif"
img2 = new Image ()
img2.src = "pic2.gif"
img3 = new Image ()
img3.src = "pic3.gif" 
img4 = new Image ()
img4.src = "pic4.gif"
img5 = new Image ()
img5.src = "pic5.gif"
img6 = new Image ()
img6.src = "pic6.gif" 
function slideshow(x)
{
num=num+x
if (num==7)
{num=1}
if (num==0)
{num=6}
document.mypic.src=eval("img"+num+".src")
}
</SCRIPT> 
<CENTER>
<IMG SRC="pic1.gif" NAME="mypic" BORDER=0 height="200" width="150"><p>
<A HREF="JavaScript:slideshow(-1)">Previous</A>
<A HREF="JavaScript:slideshow(1)">Next</A>
</CENTER> 
</BODY>
</HTML>




Contoh Program JavaScript
<html>
<head>
<script language="javascript">
<!--
var image1=new Image()
image1.src="1.gif"
var image2=new Image()
image2.src="2.gif"
var image3=new Image()
image3.src="3.gif"
//-->
</script>
</head>
<body>
<center>
<h2>Penggunaan Objek Image Untuk Membuat SlideShow</H2><hr size=5 color="black">
<img src="1.gif" name="slide" width="100" height="100">
<script>
<!--
//variable yang akan menaikan hitungan gambar
var step=1
 
function slideit(){
//jika browser tidak mendukung metode dokumen.image maka keluar.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//memanggil function "slideit()" setiap 1 detik
setTimeout("slideit()",1000)
}
slideit()
//-->
</script>
<hr size=5 color="black">
</body>
</html>
 
 

0 comments:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

turorial terbaru

Copyright 2011. w3-id.blogspot.com. | Template by o-om.com - zoomtemplate.com