|
การใช้ JavaScript ร่วมกับ FrontPage (7)
แสดงรูปวนสลับกัน
(Slide Show)
เอฟเฟ็คท์นี้ใช้แสดงได้ทั้งรูปทั่วๆ
ไป
หรือใช้แสดงแบนเนอร์โฆษณา
แทน Banner Ad Manager ของ FrontPage
โดยมีข้อดีกว่าคือ
แต่ละรูปสามารถมีลิงค์ของตนเอง
ตัวอย่าง
โค้ดชุดที่ 1
โค้ดชุดที่ 2
วิธีใช้
-
ก๊อปปี้โค้ดชุดที่
1 ไปใส่ใน Notepad
-
แก้ไขตัวแปรที่ระบุไฟล์รูปภาพให้เป็นรูปของคุณเอง
เช่น จากเดิม
var image1=new Image()
image1.src="firstimage.gif"
var image2=new Image()
image2.src="second.gif"
var image3=new Image()
image3.src="third.gif"
แก้ไขเป็น
var image1=new Image()
image1.src="images/flash.jpg"
var image2=new Image()
image2.src="images/free_ecom.jpg"
var image3=new Image()
image3.src="images/hotweb_2001.jpg"
-
หากมีรูปมากกว่า
3 ก็เพิ่มตัวแปรที่ 4, 5, ...
เข้าไป เช่น
var image4=new
Image()
image4.src="images/mainboard.jpg"
-
ก๊อปปี้โค้ดจาก
Notepad ไปแทรกในส่วน head
ของเว็บเพจที่ต้องการแสดงเอ็ฟเฟ็คท์
-
ก๊อปปี้โค้ดชุดที่
2 ไปใส่ใน Notepad
-
แก้ไขโค้ดตรงแท็ก
<img>
โดยเปลี่ยนชื่อไฟล์
firstimage.gif
ให้เป็นชื่อไฟล์รูปไฟล์แรกของคุณ
เช่น จากโค้ดเดิม
<img src="firstimage.gif"
name="slide" border=0
style="filter:blendTrans(duration=3)"></a>
แก้ไขเป็น
<img src="images/flash.jpg"
name="slide" border=0
style="filter:blendTrans(duration=3)"></a>
-
แก้ไขจำนวนรูป (ตัวแปร
number_of_images)
ตามจำนวนที่ใช้จริง
เช่น
var number_of_images=4
-
ตัวแปร var
speed=3
ใช้กำหนดระยะเวลาการเปลี่ยนภาพ
คุณสามารถแก้ไขได้ตามต้องการ
-
แก้ไขลิงค์ของรูปภาพแต่ละรูปตามต้องการ
เช่น จาก
if (whichimage==1)
window.location="link1.htm"
else if (whichimage==2)
window.location="link2.htm"
else if (whichimage==3)
window.location="link3.htm"
แก้ไขเป็น
if (whichimage==1)
window.location="http://www.provision.co.th/
book_detail/flash.htm"
else if (whichimage==2)
window.location="http://www.provision.co.th/
book_detail/free_ecom.htm"
else if (whichimage==3)
window.location="http://www.provision.co.th/
book_detail/hotweb_2001.htm"
else if (whichimage==4)
window.location="http://www.provision.co.th/
book_detail/mainboard.htm"
-
ก๊อปปี้โค้ดจาก
Notepad ไปแทรกในเว็บเพจ
ตรงตำแหน่งที่จะแสดงเอฟเฟ็คท์
โดยทำในแท็บ Normal
โดยใช้คำสั่ง Insert  Advanced HTML
-
คลิกแท็บ HTML
แล้วมองหาแท็ก <body>
ซึ่งอยู่ตอนบนๆของเว็บเพจ
-
แก้ไขแท็ก <body>
โดยเติม onload="slideit()" เช่น
จากโค้ดเดิม
<body
topmargin="0" leftmargin="0"
stylesrc="../abc.htm">
ก็แก้ไขเป็น
<body
topmargin="0" leftmargin="0"
stylesrc="../abc.htm" onload="slideit()">
 |
|
ตัวอย่างนี้มีแบ่งโค้ดออกเป็น
2 ชุด
โดยชุดแรกทำหน้าที่
preload รูป
ซึ่งจะถูกใส่ไว้ในส่วน
head ของเว็บเพจ
ส่วนชุดที่ 2
เป็นโค้ดสำหรับแสดงเอฟเฟ็คท์
ซึ่งจะถูกใส่ไว้ตรงจุดที่ต้องการให้เอฟเฟ็คท์ปรากฏ
นอกจากนี้ยังมีการใส่โค้ดเพิ่มเข้าไปในแท็ก
<body> ของเว็บเพจ
ทั้งนี้เพื่อให้เอฟเฟ็คท์เริ่มต้นทำงานทันทีที่เว็บเพจถูกเปิด |
|
