Langsung ke konten utama

Suzanne Arnold image slideshow

Dengan script ini kita bisa menampilkan gambar lewat 3 cara, bisa lewat drop down menu, back/forward button atau otomatis
gak pake lama langsung aja gw kasih scriptnya

yang pertama copy script ini dulu terus paste di antara tag <head></head>

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin


var Onerotate_delay = 2000; // delay in milliseconds (5000 = 5 secs)
Onecurrent = 0;
var OneLinks = new Array(3);
OneLinks[0] = "http://www.galau.site88.com";
OneLinks[1] = "http://www.galau.site88.com";
OneLinks[2] = "http://www.galau.site88.com";
function Onenext() {
if (document.Oneslideform.Oneslide[Onecurrent+1]) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent+1].value;
document.Oneslideform.Oneslide.selectedIndex = ++Onecurrent;
   }
else Onefirst();
}
function Oneprevious() {
if (Onecurrent-1 >= 0) {
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent-1].value;
document.Oneslideform.Oneslide.selectedIndex = --Onecurrent;
   }
else Onelast();
}
function Onefirst() {
Onecurrent = 0;
document.images.Oneshow.src = document.Oneslideform.Oneslide[0].value;
document.Oneslideform.Oneslide.selectedIndex = 0;
}
function Onelast() {
Onecurrent = document.Oneslideform.Oneslide.length-1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
}
function Oneap(text) {
document.Oneslideform.Oneslidebutton.value = (text == "Stop") ? "Start" : "Stop";
Onerotate();
}
function Onechange() {
Onecurrent = document.Oneslideform.Oneslide.selectedIndex;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
}
function Onerotate() {
if (document.Oneslideform.Oneslidebutton.value == "Stop") {
Onecurrent = (Onecurrent == document.Oneslideform.Oneslide.length-1) ? 0 : Onecurrent+1;
document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;
document.Oneslideform.Oneslide.selectedIndex = Onecurrent;
window.setTimeout("Onerotate()", Onerotate_delay);
}
}
function Onetransport(){
window.location=OneLinks[Onecurrent]
}
//  End -->
</SCRIPT>


kalo udah, sekarang tinggal kita bikin script lagi buat nampilin gambar - gambarnya di tag <BODY></BODY>
nih scrptnya


<TABLE border="0" cellspacing="0" cellpadding="0">
  <TR>
    <TD>
      <form name="Oneslideform" >
        <DIV align="center">
          <TABLE width="150" border="1" cellspacing="0" cellpadding="4" bordercolor="#330099">
            <TR>
              <TD bgcolor="#330099">
                <DIV align="center"><B><FONT color="#FFFFFF">Image Slideshow</FONT></B></DIV>
              </TD>
            </TR>
            <TR>
              <TD bgcolor="#FFFFFF">
                <DIV align="center"><A href="javascript:Onetransport()"><IMG src="slideimage1.gif" width="90" height="90" name="Oneshow" border="0"></A></DIV>
              </TD>
            </TR>
            <TR>
              <TD bgcolor="#330099">
                <DIV align="center">
                  <SELECT name="Oneslide" onChange="Onechange();">
                    <OPTION value="slideimage1.gif"  selected>Image 1</OPTION>
                    <OPTION value="slideimage2.gif">Image 2</OPTION>
                    <OPTION value="slideimage3.gif">Image 3</OPTION>
                  </SELECT>
      </DIV>
              </TD>
            </TR>
            <TR>
              <TD bgcolor="#330099">
                <DIV align="center">
                  <INPUT type=button onClick="Oneprevious();" value="<<" title="Previous">
                  <INPUT type=button name="Oneslidebutton" onClick="Oneap(this.value);" value="Start" title="AutoPlay">
                  <INPUT type=button onClick="Onenext();" value=">>" title="Next">
          </DIV>
              </TD>
            </TR>
          </TABLE>
        </DIV>
      </form>
    </TD>
  </TR>
</TABLE>

pada option value image bisa diganti dengan directory image masing - masing sekarang simpan dan coba di browser kalian, kurang lebih hasilnya akan terlihat seperti ini :

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Halaman Guestbook dengan Captcha

Sesuai judul kali ini gw coba kasih sesuatu yang mungkin udah banyak orang yang tau cara bikinnya gimana, terus terang, ini merupakan kesimpulan dari berbagai macam tutorial yang gw kumpulin dan gw baca serta gw pelajarin *lebay lo om :D sebelumnya gw harapin udah pada bisa bikin database di localhost dulu ya, terserah mau pake apa tapi lebih enak buat yang baru belajar mending pake XAMPP deh *karna gw cuma bisa pake itu. Oke pertama - tama kita buat dulu databasenya dengan nama 'tutorial' tanpa kutip, terus buat tablenya dengan patokan ini  CREATE TABLE IF NOT EXISTS `guestbook` (   `id` int(5) NOT NULL auto_increment,   `name` varchar(25) NOT NULL,   `email` varchar(50) NOT NULL,   `comment` longtext NOT NULL,   `datetime` varchar(65) NOT NULL,   PRIMARY KEY  (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; id gw bikin primary key supaya jadi pembeda antara komen guestbook satu dengan yang lainnya dan auto_increment supaya ...
2 komentar
Baca selengkapnya

bikin halaman upload foto dengan thumbnails dan resize

Tutorial kali ini gw akan ngebahas gimana caranya lo upload image berukuran besar dan image asli tetap tersimpan di folder berikut image yang sudah di resize ukurannya sehingga menjadi image thumbnail. Sebelum melangkah lebih jauh mending buka ini dulu deh Membuat halaman Upload dan Download gunanya untuk mereview kembali cara upload lewat php dan menyimpan file itu ke dalam folder yang kita buat di htdocs. Jika sudah dan merasa gak perlu oke kita lanjutin yah.ini merupakan tutorial untuk mengupload foto dalam web php kita, dan foto asli yang kita upload akan langsung kita buat thumbnailsnya yaitu menyimpan foto ukuran asli dan menyimpan foto ukuran yang sudah terkompres. yang pertama kita siapin adalah databasenya dulu kasih nama databasenya 'image', siapin table dengan format CREATE TABLE IF NOT EXISTS `resize` (   `id_img` int(11) NOT NULL AUTO_INCREMENT,   `filename` varchar(100) NOT NULL,   `size` varchar(100) NOT NULL,   `type` varchar(100) NOT NULL...
3 komentar
Baca selengkapnya

Bikin halaman register login dan logout

Oke kali ini gw akan bahas gimana cara bikin halaman login dan logout, berarti sekalian gw kasih tau cara nyimpen username dan password di dalem database. Disini gw bukan ngajarin tapi gw cuma kasih kesimpulan dari berbagai macam tutorial yang udah gw cari dan gw baca dari internet juga :D. Sebelum kita bikin halaman login dan logout kita akan buat dulu username dan password yang akan kita simpan di database sehingga nanti kita bisa login dan bisa logout. Pertama tama mari kita niat terlebih dahulu dan kita buatlah databasenya. Bikin database dengan nama 'tutorial' tanpa tanda kutip, lalu kita buat lah tablenya dengan nama admin 2 field saja cukup  CREATE TABLE IF NOT EXISTS `admin` (   `username` varchar(20) NOT NULL,   `password` varchar(32) NOT NULL,   PRIMARY KEY  (`username`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1; untuk username sengaja kita bikin primary key karna seharusnya username itu gak boleh ada yang sama kan? kalo password k...
6 komentar
Baca selengkapnya