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

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,   PRIMAR
3 komentar
Baca selengkapnya

Cara menghilangkan galau

Okeh kali ini gw mau membahas tentang kegalauan hidup yang mungkin sebagian besar orang pasti alamin. gw sudah merasakan dan melewati masa - masa galau dalam hidup gw, pada masa - masa ini seperti halnya pisau bermata 2, kalo kita terlalu larut dalam kegalauan maka kehidupan kita akan terjerembab dalam kesuraman. Namun kalo kita bisa menggunakan masa - masa ini dengan bijak ini adalah masa yang tepat untuk menempa mental dan pemikiran kita. ada beberapa alasan yang menjadi penyebab utama galau, diantaranya :  lawan jenis (pacar) keluarga karir gak bisa dipungkiri kalau masalah si lawan jenis ini penyebab paling seringnya seseorang (apalagi remaja) menjadi galau gak karuan, lagi marahan atau lagi putus hubungan keduanya bikin otak serasa mumet padahal masalah orang tua yang udah punya anak itu lebih mumet lagi. dan kalaupun kita yang sedang galau karena masalah ini bisa berpikir jernih dan sadar kita akan berpikir bahwa di luar sana dalam bumi yang bulat ini masih banyak orang lain yang
Posting Komentar
Baca selengkapnya

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 dia akan menambah data dengan s
2 komentar
Baca selengkapnya