เทคนิคการทำภาพ Swap Image

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

เทคนิคนี้ทได้ไม่อยากค่ะ เพราะเป็นการใช้เทคนิคลูกเล่นที่มีอยู่ในโปรแกรม Dreamweaver … เราจะทำเทคนิคนี้ได้นั้น ก่อนอื่นต้องเตรียมไฟล์รูปภาพไว้ก่อน 2 ภาพค่ะ ในบทความนี้ Webmaster เตรียมภาพไว้ 2 ภาพตามรูปด้านบนค่ะ

จากนั้นเมื่อเราได้รูปภาพมา 2 รูปแล้ว เราก็จะมาเริ่มทำกันเลยค่ะ

ขั้นตอนที่ 1 ก็ให้ทำการสร้างไฟล์ใหม่ใน Dreamweaver เลยค่ะ
ขั้นตอนที่ 2 ให้ทำการดึงรูปเข้ามาในโปรแกรม โดยการที่ตำแหน่ง A ตามภาพค่ะ จากนั้นจะมีไดอะล็อกบ็อก Select Image Source ตามรูปด้านล่าง ให้ทำการเลือกไฟล์ภาพแรกที่เตรียมไว้ จากนั้นกดปุ่ม OK ตามตำแหน่ง C

ขั้นตอนที่ 3 เมื่อได้รูปมาแล้ว ให้ทำการคลิกที่รูป จากนั้นสังเกตที่ Panel Group ทางด้านขวามือของโปรแกรม เลือกแท็บ Behaviors (หากไม่มี Panel Group Behaviors ให้ทำการเรียกใช้งาน โดยการเลือกคำสั่ง Window จากเมนูบาร์ด้านบน แล้วเลือก Behaviors) จากนั้นคลิกที่รูปเครื่องหมายบวก ตามตำแหน่ง A แล้วเลือก Swap Image

ขั้นตอนที่ 4 จะปรากฏไดอะล็อกบ็อก Swap Image ให้ทำการคลิก Browse… ตามตำแหน่งที่ 1 จากนั้นจะปรากฏไดอะล็อกบ็อก Select Image Source ตามรูปด้านล่าง ให้ทำการเลือกไฟล์ภาพอีกภาพที่เตรียมไว้ จากนั้นกดปุ่ม OK ตามตำแหน่ง 2 จะกลับมาที่ ไดอะล็อกบ็อก Swap Image จากนั้นกด OK ที่ตำแหน่งที่ 3

ขั้นตอนที่ 5 ทำการบัญทึกหน้าเว็บเพจ เป็นเอกสาร .html หรือ .htm แค่นี้ก็เสร็จเรียบร้อยแล้วค่ะ

ลองเรียกไฟล์ที่บันทึกไว้ มาดูสิค่ะ ว่าได้ผลลัพธ์อย่างไร…?

สำหรับคนที่ทำตามขึ้นตอนต่าง ๆ ข้างต้นมาหมดแล้วก็คงจะได้ทราบแล้วนะค่ะ ว่าได้ผลลัพธ์อย่างไร สำหรับคนที่ยังไม่ได้ลงมือทำก็ลองทำตามดูค่ะ แล้วจะได้เทคนิคไปทำเว็บของคุณให้สวยขึ้นอีกแบบ

ในเว็บไซต์ www.thainextstep.com ก็ได้ใช้เทคนิคนี้เช่นกันค่ะ … ลองทายดู… ตอบละกันนะค่ะ ก็คือเทคนิคเดียวกันกับที่ทำเมนูด้านบนที่เปลี่ยนสีเมื่อเอาเมาส์ไปชี้นะแหล่ะค่ะ