24/10/11

Tutorial cara buat image slide dengan on click link


Tutorial cara buat image slide dengan click link pada blog By Blogger BLog Tutorial






Atas ni la live demo..sama macam homepage aku...pada masa entri ni di buat...

mula2 pergi ke desbot---desaign---ada gadget---html/javascript....
copy code di bawah

<script type='text/javascript'>
//<![CDATA[

/*
Link dan Image slideshow By JavaScript Kit (http://www.javascriptkit.com/script/script2/jsslide.shtml)
Update by POlskahackrew (http://polskahackrew.blogspot.com/)
*/

var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//]]>
</script>

<a href="javascript:gotoshow()"><img src="" name="slide"  width="280px" height="280px"/></a>
<script type='text/javascript'>
//<![CDATA[

//URL gambar
slideshowimages(
"GANTIKAN DENGAN URL GAMBAR ANDA",
"GANTIKAN DENGAN URL GAMBAR ANDA",
"GANTIKAN DENGAN URL GAMBAR ANDA"
)

//Target link
slideshowlinks(
"GANTIKAN DENGAN LINK UNTUK GAMBAR NO #1",
"GANTIKAN DENGAN LINK UNTUK GAMBAR NO #2",
"GANTIKAN DENGAN LINK UNTUK GAMBAR NO #3"
)

//Kelajuan slide
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//]]>
</script>


untuk width dan height tu anda set la ikut kesesuaian yang anda rasa sesuai...
pada angka 2000 yang kaler biru tu adalah kelajuan slide tu...makin kecil angka makin laju la gambar tu bertukar...

jika anda tidak mahu letakkan link pada gambar,hilangkan tulisan GANTIKAN DENGAN LINK GAMBAR NO#1 CTH :

slideshowlinks(
"",
"",
""
)

pada javascript di atas,ia hanya untuk 3 gambar sahaja..kalau mau tambah boleh tiada masalah.. cuma tambah " ", pada baris kedua slideshowimages CTH :

slideshowimages(
"GANTIKAN DENGAN URL GAMBAR ANDA",
"Nasik tambah satu",
"Teh tarik 5",
"Air mineral 3 kotak",
"GANTIKAN DENGAN URL GAMBAR ANDA",
"GANTIKAN DENGAN URL GAMBAR ANDA"
)

untuk menambah link pun sama seperti menambah gambar tu...

Bila sudah siap edit....save
senangkan....sekian

2 ulasan:

Gary Asip berkata...

thanks bro!! ini la yang aku cari.. :)

Polskahackrew berkata...

@Gary Asip
your welcome bro.. ('',)

entri ja

Related Posts Plugin for WordPress, Blogger...