ใบความรู้ที่ 10

เรื่อง  การสร้าง Interactive Image

            อินเทอร์แอ็คตีฟอิมเมจ ( Interactive Image) เป็นเทคนิคที่ทำให้รูปภาพธรรมดา มีชีวิตขึ้นมา เช่น สามารถเปลี่ยนรูปไปเป็นรูปได้เมื่อผู้ชมชี้ตัวมาที่รูปนั้น ซึ่งเรียกว่า โรลโอเวอร์ ( Rollover),หรือ ใช้รูปภาพนั้นเป็นจุดเชื่อมโยงไปยังที่ตีต่างๆ เมื่อผู้ชมคลิกที่รูปภาพนั้น ที่เรียกว่า ฮอดสปอด ( Hotspot ) และ อิมเมจแมป ( Image map ) เป็นต้น นอกจากนี้ยังไม่สามารถนำมาสร้างเป็นแถบปุ่มเพื่อให้ผู้ชมคลิกเลือกไปยังส่วนต่างๆ ที่เรียกว่า นาวิเกชั่นบาร์ ( Navigation Bar ) ได้อีกด้วย

สร้างอิมเมจแมป ( Image map )

            สร้างอิมเมจแมป ( Image map ) เป็นรูปภาพที่ถูกกำหนดให้บางส่วนของภาพนีสิ่งใดสิ่งหนังเกิดขึ้นเมื่อผู้ชมคลิกที่ส่วนนั้น พื้นที่ของส่วนที่ถูกกำหนดนี้ จะเรียกว่า ฮอดสปอด ( Hspot ) ซึ่งโดยทั่วไปแล้ว เรามักจะใช้ฮอดสปอดนี้ในการสร้างจุดเชื่อมโยงไปยังเว็บเพจหรือเว็บไซต์ต่างๆ

---------------------------รูป--------------------------------------------------

การกำหนดฮอดสปอด

1.     ในหน้าต่าง Document เลือกรูปภาพที่จะสร้างฮอดสปอด

2.     ขยายพาเนล Properties ให้เต็มขนาด ( 4 แถว )

3.     ในส่วนของ Map ตั้งซื่อให้กับอิมเมจแมปนี้หากมีหลายอิมเมจเดียวกัน ซื่อต้องไม่ช้ำกัน

4.     เลือกเครื่องมือในการสร้างฮอดสปอด ซึ่งอาจเป็น

----------------------------------รูป----------------------------------------------------------------

การสร้างฮอดสปอดรูปสี่เหลี่ยมและวงกลม

                เลือกเครื่องมือ

                ---------- Rectangle Hotspot tool

            หรือ

                ----------Oval Hotspot tool

            ลากตัวชี้เพื่อทำการวาดฮอดสปอดบนส่วนของพื้นที่ของภาพที่ต้องการ

การสร้างฮอดสปอดรูปสามเหลี่ยม

                เลือกเครื่องมือ ----  Polygon Hotspot tool  คลิกเพื่อสร้างทางเดินของเส้น ให้ได้รูปที่ต้องการ

                คลิกที่เครื่องมือ ----- Pointer hotspot tool เพื่อปิดขอบเขต

5.     กำหนดค่าการเชื่อมโยงให้กับฮอดสปอด

---------------------------------รูป------------------------------------------

6.     คลิกที่ว่างบนหน้าเว็บเพจ เมื่อเสร็จดูผลที่ได้ในเว็บบราวเซอร์

-----------------------รูป----------------------------------------------------

การแก้ไขอิมเมจแมป

                การเลือกฮอดสปอด

เลือกเครื่องมือ—รูป—Pointer hotspot tool แล้วคลิกที่ฮอดสปอดที่ต้องการหากต้องการเลือกหลายๆ ฮอดสปอด ให้กดปุ่ม Shift ค้างไว้คลิกเลือกหากต้องการเลือกทั้งหมด ให้กดปุ่ม Ctrl+A

การเคลื่อนย้ายฮอดสปอด

1.     เลือกเครื่องมือ—รูป-- Pointer hotspot tool แล้วคลิกที่ฮอดสปอดที่ต้องการ

2.     ลากไปยังตำแหน่งที่ต้องการ หรือ กดปุ่มลูกศร เพื่อขยาบไปทีละ 1 พิกเซล

กดปุ่ม Shift+ปุ่มลูกศร เพื่อเลื่อนไปทีละ 10 พิกเซล

การปรับขนาดฮอดสปอด

1.     เลือกเครื่องมือ—รูป-- Pointer hotspot tool แล้วคลิกที่ฮอดสปอดที่ต้องการ

2.     ลากจุดยึดของขอบเขตฮอดสปอดเพื่อปรับขนาดและรูปทรงของฮอดสปอด

การทำรูปภาพแบบโรลโอเวอร์ ( Rrollover image )

                การใส่เทคนิคโรลโอเวอร์ใหกับรูปภาพนั้น จะเป็นการกำหนดให้รูปภาพที่แสดงบนเว็บบราวเซอร์มีการเปลี่ยนแปลงรูปไปเป็นอีกรูปหนึ่งที่กำหนดไว้ได้เมื่อผู้ชมเลื่อนตัวชี้ของเมาส์มาวางบนรูปนั้น ดังนั้นการทำโรลโอเวอร์นี้ จะประกอบด้วยรูปภาพ 2 รูปเพื่อใช้สลับกันซึ่งภาพทั้งสองต้องมีขนาดเท่ากัน ซึ่งถ้าหากไม่เท่ากัน โปรแกรมก็จะทำการปรับให้เท่ากันโดยยึดภาพแรกเป็นหลัก ซึ่งอาจทำให้ภาพที่ถูกปรับขนาดเสียสัดส่วนของภาพไปได้

                รูปภาพแบบโรลโอเวอร์นี้จะถูกกำหนดด้วยอีเวนต์ onMouseOver และแอ็คชั่น Swap image โดยอัตโนมัติ

ใบความรู้ที่ 7

ฟอร์มจำเป็นต้องอาศัย Table มาจัดการ

ฟิลด์กรอกข้อความ (Text Field)                ฟิลด์กรอกข้อความ (Text Field)      เป็นฟิลด์สำหรับสร้างส่วนรับ แสดงข้อมูลทั้งตัวอักษรและตัวเลข ซึ่งมี Properties ที่ต้องระบุคือ

·         TextField Name
กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้เก็บข้อมูลเกี่ยวกับ ชื่อ/นามสกุล อาจจะตั้งชื่อฟิลด์เป็น F-Lname เป็นต้น

·         Char Width
กำหนดความกว้างของฟิลด์ มีหน่วยเป็นตัวอักษร

·         Max Chars
กำหนดจำนวนอักษรสูงสุดที่ยอมให้ป้อนในฟิลด์ มีหน่วยเป็นตัวอักษร

·         Type
ประเภทของฟิลด์ข้อความ ได้แก่ ฟิลด์แบบบรรทัดเดียว (Single Line), ฟิลด์แบบหลายบรรทัด (Multi Line) และฟิลด์แบบรหัสผ่าน (Password) ซึ่งจะแสดงเครื่องหมาย * เมื่อมีการป้อนข้อมูลในฟิลด์นี้

·         Init Val
ระบุข้อความที่ต้องการให้แสดงในฟิลด์นี้ทุกครั้งที่มีการแสดงผลผ่านเบราเซอร์

·         Wrap
ควบคุมการตัดคำเมื่อเลือก Type เป็น Multi Line

ฟิลด์ตัวเลือก Checkbox
                ฟิลด์ตัวเลือก Checkbox   ใช้สำหรับรายการเลือกที่จะเลือก หรือไม่เลือกก็ได้ และไม่จำกัดจำนวนตัวเลือก เช่น วุฒิการศึกษา, สิ่งที่ชอบ, รายการที่ชอบ เป็นต้น ซึ่งมี Properties ที่ต้องระบุคือ

·         Checkbox Name
กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้เก็บข้อมูลเกี่ยวกับเพศ อาจจะตั้งชื่อฟิลด์เป็น Sex เป็นต้น

·         Checkbox Value
กำหนดค่าของฟิลด์ เช่น ถ้าต้องการให้ระบุว่าฟิลด์นี้เก็บค่าของเพศชาย ก็อาจจะกำหนดค่าเป็น Male เป็นต้น

·         Initial State
ตัวเลือกว่าจะให้ฟิลด์ Checkbox นี้ถูกเลือกไว้ก่อนหรือไม่ ถ้าเลือกเป็น Checked จะปรากฏเครื่องหมาย x ในช่องฟิลด์นี้ทุกครั้งที่เรียกผ่านเว็บ

ฟิลด์ตัวเลือก Radio Button
                ฟิลด์ตัวเลือก Radio Button    สำหรับรายการที่ใช้เลือก เช่น เพศชาย/หญิง ซึ่งมี Properties ที่ต้องระบุเหมือนกับ Checkbox เพียงแต่ฟิลด์แบบนี้อนุญาตให้เลือกได้เพียง 1 รายการเท่านั้น ในขณะนี้ Checkbox สามารถคลิกเลือกได้ทุกรายการที่ระบุ

ฟิลด์รายการ (List/Menu Field)\ฟิลด์รายการ (List/Menu Field) สำหรับรายการเลือกแบบเมนู ซึ่งมีตัวเลือกหลายตัวเลือก เช่น วุฒิการศึกษา ตั้งแต่ ปวช., ปวส., ปริญญาตรี เป็นต้น ซึ่งมี Properties ที่ต้องระบุดังนี้

·         List/Menu กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้เก็บข้อมูลเกี่ยวกับวุฒิการศึกษา อาจจะตั้งชื่อฟิลด์เป็น education เป็นต้น

·         Type เลือกประเภทของรายการว่าจะให้แสดงเป็น List หรือเป็นเมนู Drop Down

·         Height ความสูงของเมนู
Selections อนุญาตให้ผู้ใช้เลือกรายการจากเมนูได้มากกว่า 1 รายการหรือไม่ โดยถ้าอนุญาตให้เลือกรายการได้มากกว่า 1 รายการ ผู้ใช้สามารถใช้ปุ่ม หรือ <Ctrl> ควบคุมการเลือกได้

List Values ปุ่มกำหนดค่าของรายการเมนู โดยเมื่อคลิกจะปรากฏหน้าต่างทำงาน ดังนี้


พิมพ์รายการแต่ละรายการโดยกำหนดทั้งใน Item Label และ Value สามารถใช้ปุ่ม      เลื่อนไปยังรายการถัดไป หรือคลิกปุ่มเครื่องหมาย + ในการเพิ่มรายการ หรือคลิกปุ่มเครื่องหมาย - เมื่อต้องการลบรายการที่เลือกออกไป สามารถเปลี่ยนลำดับของรายการได้จากการกดปุ่มสามเหลี่ยมชี้ขึ้น หรือชี้ลง

o        เมื่อกำหนดค่าที่ต้องการ ก็คลิกปุ่ม OK เพื่อยืนยันการบันทึกค่าและใช้งาน

·         Initial Selection ตัวเลือกเพื่อกำหนดว่ารายการใดจะให้แสดงเป็นค่าเริ่มต้นเมื่อมีการเรียกใช้งาน

ฟิลด์ปุ่ม (Button Field)
                ฟิลด์ปุ่ม (Button Field)   รายการเลือกสำหรับสร้างปุ่มส่งข้อมูล (Submit) หรือยกเลิกการป้อนข้อมูลในฟอร์ม (Reset) โดยมี Properties สำคัญดังนี้

- Button Name กำหนดชื่อฟิลด์ใช้ในการอ้างอิงกับโปรแกรม ต้องระบุเสมอ เช่น หากต้องการให้ฟิลด์นี้ทำหน้าที่ส่งข้อมูล ก็อาจจะตั้งชื่อฟิลด์เป็น Submit เป็นต้น

                - Label ข้อความกำกับใช้ในการแสดงผลบนเบราเซอร์ เช่น หากต้องการให้ฟิลด์นี้ทำหน้าที่ส่งข้อมูล ก็อาจจะตั้งชื่อฟิลด์เป็น "ส่งข้อมูล" เป็นต้น

                - Action ตัวเลือกว่าปุ่มนี้จะทำหน้าที่ในการส่งข้อมูล (Submit Form) หรือเคลียร์ค่าในฟอร์ม (Reset Form) หรือไม่ต้องทำหน้าที่ใดๆ

 File Field      เป็นการดึงไฟล์จากเครื่องของคุณ เพื่อที่จะส่งไปยังปลายทาง โดยจะเห็นได้ทั่ว ๆ ไปจากเว็บเซิร์ฟเวอร์ต่าง ๆ ที่ให้คุณดึงไฟล์จากในเครื่องเพื่ออัพโหลด

ตัวอย่าง                                                     Browse

Hidden Field      เป็นตัวส่งข้อมูลที่ผู้ใช้แบบฟอร์มนั้นจะไม่สามารถเห็นค่าที่ใส่ลงไป แต่เราต้องกำหนดค่าให้กับออบเจ็กต์นี้ด้วย

Jump Menu      การใช้งานคล้าย ๆ กับออบเจ็กต์ Insert List/Menu แต่ต่างกันตรงที่เอาไว้เชื่อมไปยัง เว็บเพจ ปลายทาง ทันที่ทีมีการเลือกตัวเลือกอื่น แล้วกดปุ่มมันก็จะพาเราลิงค์ไปยังเว็บเพจที่ได้มีการกำหนดไว้

ใบความรู้ที่ 4

การนำภาพลงเว็บเพจ (Insert Image)

คุณคงได้เคยเห็นหลาย web ที่เขาแทรกภาพลง web ของแต่ละที่ ซึ่งภาพนี้มันจะทำให้ web ของเราดูมีชีวิตชีวามากขึ้น ในตอนแรกที่ผมได้แทรกภาพลงบน web สรุปแล้วว่าภาพมันไม่ปรากฎ มาบน web ดังนั้นหากว่าคุณต้องเป็นมือใหม ่คุณต้องทำความเข้าใจเกี่ยวกับเรื่องของการแทรกภาพลงบน web ให้ดีนะครับ ไม่ต้องไปตกใจว่ามันจะทำยากอะไรครับ มันไม่อยากหากครับ มันก็มีสิ่งที่คุณนั้นต้องจำอยุ่ประมาณ 1 - 2 อย่างเท่านั้นเองครับ เรามาเริ่มทำเลยครับ

หลังจากที่คุณนั้นได้สร้างภาพมาเรียบร้อยแล้ว

วิธีทำ

- เลือก  บน Object Panel (หรือ Insert > Image หรือ กด Ctrl+Alt+i)
- จะปรากฎ Dialog Box ขึ้นมาแล้วให้เรานั้นเลือกรูปที่ต้องการ

- หลังจากที่เลือกรูปที่ต้องการได้แล้วก็ click select แล้วก็จะมีรูปลงใน dreamweaver แล้วของ browser (กด F12 ) ดูสิครับว่ามีรูปที่คุณเลือกไว้ปรากฎไหม หากไม่ปรากฎรูปก็ลองอ่านตรงข้างล่างนี้ดูครับ

สาเหตุที่ภาพไม่ปรากฏ 1
- คุณได้ save file แล้วหรือยัง บางครั้งเมื่อไม่ได้ save ก็มีภาพปรากแต่บางครั้งอีกละครับก็ไม่มีภาพปรากฎ แต่ที่ภาพไม่ปรากฑส่วนมากนั้นก็คือ เราไป copy ภาพมาจาดที่อื่น แต่หากว่าคุณทำตามขั้นตอนที่ผมบอกนั้นก็จะมีภาพปรากฎ ครับ แนะนำเฉยๆ ครับตรงนี้
- หลังจากที่คุณได้ save flie แล้ว ปรากฎว่าเมื่อคุณมาเปิดดูภาพทาง Browser ไม่ได้ปรากฎภาพ อาจจะไปได้ว่า คุณนั้นได้ save file และ ภาพ ไว้ใน folder เดียวกัน หากต้องการให้ภาพนั้นปรากฎคุณต้องให้ ภาพ และ file ที่คุณ save นั้นไว้ใน folder ที่ย่อยลงมาอีก โดยการสร้าง new folder แล้วก็นำภาพไปเก็บไว้ใน new folder ที่คุณได้สร้างขึ้นไว้ แต่ว่า file ที่คุณสร้างขึ้นมานั้นต้องอยู่ใน folder หลัก พูดไปผมก็เริ่มงงงั้นมาดูรูปประกอบดีกว่าครับ

- สมมุติว่า file (1) นั้นคือ fileที่คุณได้ save เอาไว้ แต่ภาพของคุณนั้นได้เก็บไว้ที่ folder tx ครับ แล้วคุณลองแก้ไข file เดิมของคุณได้ใช้ dreamewaver ทำการแทรกภาพใหม่ตามขั้นตอนในนี้ใหม่ดูครับ รับรองว่าปรากฎภาพแน่นอนครับ หากมีตชมิอะไรก็ mail มาหาผมตาม mail ข้างล่างนี้ครับ
- อ้อลืมไปคุณสามารถดู code ของภาพคุณ นั้นได้จาก code ตัวนี้ครับ

ส่วนบนของฟอร์ม

ส่วนล่างของฟอร์ม

สาเหตุที่เรียกภาพขึ้นมาไม่ได้

 
สาเหตุที่ 1
สำหรับบทความนี้นั้นคนที่เริ่มสร้างเว็บใหม่ ๆ คงจะเคยเจอกับปัญหาที่ว่าทำไมทั้ง ๆ ที่เราใช้ Dreamweaver แทรกภาพในโปรแกรมนั้นก็ Show ภาพอยู่ แล้วเมื่อทำการกด F12 ดูเว็บเพจรูปภาพก็ปรากฎอยู่ แต่ว่าเมื่อนำไปขึ้นไว้บน Internet (Server) ของผู้ให้บริการ แล้วทำไมมันไม่ขึ้น
หากว่าเกิดจากสาเหตุนี้ก็เพราะว่า เราทำการเรียก URL ผิด ครับ การแก้ไขก็โดยการดู URL ของรูปภาพ ซึ่งสามารถทำได้ ดังนี้
1. คลิกขวาที่รูปภาพ แล้วเรียกคำสั่ง Properties ก็จะขึ้นมาแบบนี้ครับ

2. ตรงที่ผมนั้นทำ Highlight คือ ที่อยู่ของ URL ของรูปภาพเราให้เรานั้นทำการ copy URL ไปวางแทนที่อยู่ของรูปเดิม แล้วทำการ upload webpage นั้นใหม่อีกครั้ง ว่าได้หรือไม่ (แต่ว่าการทำแบบนี้เมื่อมาแสดงบนที่เครื่องของเรา ขณะที่เครื่องของเราไม่ได้จำลอง server รูปภาพจะไม่ขึ้น และเมื่อทำการ upload ขึ้น Internet แล้วขึ้นแสดงว่าตรงนี้ก็ไม่มีปัญหาแล้วนะครับ)

สาเหตุที่ 2
เกิดจากการที่เรานั้นมาเรียก file รูปภาพที่อยู่บนเครื่องของเรา (ดังรูปจะเป็นการเรียกรูปภาพ โดยเป็นที่อยู่ของครื่องเรา) เมื่อไปแสดงที่ Internet มันก็ย่อมไม่สามารถแสดงรูปภาพได้ครับ

ดังรูปเรานั้นเรียกที่อยู่ของรูปภาพที่ file:///D:/webmaster/dreamwaver/mx/view_database_files/live_data.png สมมุติว่า website ของคุณคือ http://www.pyayam.com แล้วมาเรียก ที่อยู่ของเว็บไซต์เป็น file:///D:/webmaster/dreamwaver/mx/view_database_files/live_data.png ตัวนี้ก็ย่อมไม่สามารถให้ภาพปรากฏมาได้
ผมขอยกตัวอย่างของ url ที่สามารถจะทำให้เรียกรูปภาพใแล้วปรากฏบน internet ได้ครับ คือ http://www.pyayam.com/live_data.png (ชื่อและนามสกุลของรูปภาพ) แบบนี้ค่อยมีโอกาสที่ภาพขึ้นได้ครับ
หากว่าเมื่อเราเรียกรูปภาพครั้งไหนก็เจอแต่ file:///D:/webmaster/dreamwaver/mx/view_database_files/live_data.png นี้ให้เรานั้นทำการ define site ก่อนนะครับ
สาเหตุที่ 3
เกิดจากการที่เรานั้นใส่นามสกุลของ รูปภาพผิด หากว่ารูปภาพนั้นนามสกุล .gif (ตัวเล็ก) แต่ว่าเรานั้นไปใส่เป็น .GIF (ตัวใหญ่) แบบนี้ก็ป็นสาเหตที่ทำให้ภาพไม่สามารถปรากฎได้เหมือนกันนะครับ
สาเหตุที่ 4
สาเหตุนี้ที่ผมนะอธิบายอาจจะเป็นเพราะว่า Server ของผู้ให้บริการป้องกันไว้ เช่น ของ Geocities.com หากว่าเว็บของเรานั้นคือ www.geocities.com/tanapolchk หากว่าเรานั้นต้องการที่จะแลกลิงค์ดกับคนอื่น แล้วไปนำภาพที่มาจาก www.geocities.com/pyayam แบบนี้ภาพก็ไม่สามารถแสดงได้นะครับ

การปรับเปลี่ยนคุณสมบัติของรูปภาพ

1. ใส่รูปภาพลงในเว็บเพจ
2. คลิกที่รูปเพื่อปรับเปลี่ยนคุณสมบัติเปิดหน้าต่าง Properties ขึ้นมา

            

ต้องการ จะใส่หรือไม่ใส่ก็ได้
เลข 2 , 3 W-H - ช่องกำหนดขนาดของรูปภาพ ใส่เลขขนาด ลงไปในช่อง W และ H ซึ่งมีหน่วยเป็น px ถ้าหากภาพมีขนาดพอดีก็ไม่ต้องแก้ไขอะไร เพราะจะทำให้ภาพแตก ดูไม่สวยงาม
เลข 4 Src  จะ เป็นที่อยู่ของรูปภาพ หากต้องการอ้างอิงจากเว็บไซต์อื่นก็ต้องเปลี่ยนที่อยู่ของภาพเป็น http://www.thai.net/dreamweaver4/images/logo001.gif
เลข 5 Link - จะกำหนดให้รูปภาพเป็นจุดลิงค์
เลข 6 Target - เลือกรูปแบบการแสดงผลของลิงค์
เลข 7 Align - สำหรับจัดตำแหน่งรูปภาพให้สัมพันธ์กับข้อความที่อยู่ใกล้กัน ซึ่งถ้าเราเลือกเป็น

ถ้าผมเลือกหมายเลข 1,2,5,8 (Broswer Default,Baseline,Bottom,Absolute Bottom) จะได้รูปแบบดังรูป 3.5.1

รูปที่ 3.5.1

ถ้าผมเลือกหมายเลข 3,6 (Top,TextTop) จะได้รูปแบบดังรูป 3.5.2

รูปที่ 3.5.2

    ถ้าผมเลือกหมายเลข 7 (Absolute Middle) จะได้รูปแบบดังรูป 3.5.4

    ถ้าผมเลือกหมายเลข 4 (Middle) จะได้รูปแบบดังรูป 3.5.3

                            

                                                        รูปที่ 3.5.3

รูปที่ 3.5.4

    ข้อความระวัง : รูปที่ 3.5.3 กับ 3.5.4 ตำแหน่งจะคล้าย ๆ กัน แต่รูปที่ 3.5.3 นั้นข้อความจะยังไม่อยู่กึ่งกลางของรูปภาพสักเท่าไหร่ แต่รูปที่ 3.5.4 ข้อความจะอยู่กึ่งกลางรูปภาพพอดี ดังนั้นต้องสังเกตให้ดี


ถ้าผมเลือกหมายเลข 9 (Left) จะได้รูปแบบดังรูป 3.5.5

ถ้าผมเลือกหมายเลข 10 (Right) จะได้รูปแบบดังรูป 3.5.6

รูปที่ 3.5.6

เลข 8 Alt - จะเป็นการใส่คำอธิบายให้กับรูปภาพ   <-- ลองเอาเมาส์มาวางบรูปซิครับ
เลข 9 Border - เป็นการใส่ขอบให้กับรูปภาพ ถ้าใส่เลข 0 ภาพจะไม่มีขอบ ถ้าใส่ตั้งแต่เลข 1 ขึ้นไป ขอบจะหนาเรื่อย ๆ ครับ
ตัวอย่าง

                           

 เมื่อใส่ค่า border=0    เมื่อใส่ค่า border=5

เลข 10 เป็นการจัดตำแหน่งของรูปภาพ

การทำ Rollover Image

หากว่าเว็บของเรามีแต่ข้อความก็ทำให้ไม่เป็นที่น่าสนใจเท่าไหร่ เมื่อนำภาพมาใส่ลงในเว็บก็ทำให้ เกิดความสวยงามขึ้นอีกในระดับหนึ่ง แต่ว่าเวลาที่เรานั้นต้องการที่จะทำ link จากภาพ แล้วเมื่อเอา mouse ไปวางไว้บนภาพแล้วจะทำให้ภาพเปลี่ยนไปเป็นภาพใหม่นั้น ก็ต้องทำให้เว็บของเรามีจุดเด่นเพิ่มขึ้น ซึ่งขั้นตอนการทำนั้นมี ดังต่อไปนี้ครับ
วิธีทำ
1. คลิกที่ Insert > Interactive Images > Rollover Image หรือคลิกที่ ซึ่งอยู่บนแท็บ Common ของ Object Panel (Ctrl+F2 = เรียก Object Panel) แล้วก๋จะปรากฏภาพ ดังนี้ครับ