Home
visit our sponsor
Dynamic HTML Main Page

Picture Slide Show

 


เป็นการแสดงภาพในแนวสไลด์โชว์ โดยในตัวอย่างจะใช้ทั้งหมด 4 ภาพ คือภาพ first.gif --- pic1.gif ---- pic2.gif ---- pic3.gif
โดยภาพจะเริ่มแสดงที่ภาพ first ก่อน แล้วจะเริ่มจางลงและแสดงภาพ pic1 ตามด้วย pic2 และ pic3 ตามลำดับ ต่อจากนั้นก็จะ
วนกลับไปแสดงที่ภาพ pic1 อีกครั้ง...............และสามารถใส่ Link ไว้ในรูปแต่ละรูปได้ด้วย

นำ Code ไปวางไว้ในส่วนของ <Head >

<script language="JavaScript1.2">
function reapply(){
setTimeout("slideit()",2000)
return true
}
window.onerror=reapply
</script>
<script language="JavaScript1.1">
<!--
var image1=new Image()
image1.src="pic1.gif"
//ภาพที่จะแสดงต่อจากภาพแรก
var image2=new Image()
image2.src="pic2.gif"
//ภาพที่จะแสดงต่อไป
var image3=new Image()
image3.src="pic3.gif"
//ภาพที่จะแสดงต่อไป
//-->
</script>

นำ Code <body onLoad="slideit()"> ไปใส่ในส่วนของ <body>

นำ Code ด้านล่างนี้ไปไว้ในบริเวณที่ต้องการให้แสดงภาพภายใน Tag <body> เช่นกัน

<center><a href="javascript:slidelink()"><img src="first.gif" name="slide" border=0 style="filter:blendTrans(duration=5)"></center></a>
<script>
<!--
var number_of_images=3
//จำนวนภาพที่จะแสดงต้องให้สัมพันธ์กับ Code ในข้อ 1
var speed=3
//ความเร็วในการทำให้ภาพจางหายไป (เป็นวินาที)
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.blendTrans.apply()
document.images.slide.src=eval("image"+step+".src")
if (document.all)
slide.filters.blendTrans.play()
whichimage=step
if (step<number_of_images)
step++
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+3000)
else
setTimeout("slideit()",speed*1000)
}
function slidelink(){
if (whichimage==1)
window.location="http://www.thailand.com"
// URL ที่ต้องการให้รูป Link ไป
else if (whichimage==2)
window.location="http://www.england.com"
else if (whichimage==3)
window.location="http://www.united.com"
}
//-->
</script>

Top of PageBack to Previous Page

 
visit our sponsor
Free web template Learning Photoshop 6.0 Technic

Download Software Graphic webboard

Graphic and webdesign Links Website design service Contact Us