|
| 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | |
|
|
|
|
|
|
|
การตกแต่งบล็อกสำหรับมือใหม่ #14 ภาพเดียว link ไปได้หลายที่
ในบทเรียน #10 ผมได้แนะนำวิธีการสร้าง link จากภาพไว้แล้ว เป็นลักษณะ 1 ภาพจะ link ไป 1 ที่ และในตอนท้ายได้แสดงตัวอย่างให้เห็นว่าภาพเดียวสามารถ link ไปได้หลาย ๆ ที่ วันนี้จะแนะนำวิธีทำครับ
การที่จะทำให้ภาพ 1 ภาพสามารถ link ไปได้หลายที่ มีหลักการง่าย ๆ คือ ให้แบ่งพื้นที่บนภาพออกเป็นส่วน ๆ แล้วเขียนโค๊ดให้พื้นที่แต่ละส่วนนั้น link ไปยังปลายทางที่ต่างกัน วิธีการนี้เรียกว่าการสร้าง Image Map ซึ่งจะสะดวกขึ้นมากถ้าใช้เครื่องมือหรือซอฟต์แวร์ช่วย
ซอฟต์แวร์ที่ช่วยสร้าง Image Map มีหลายตัว ส่วนมากเป็นซอฟต์แวร์ช่วยสร้างเว็บไซต์ เช่น Dream Weaver, Namo Web Editor เป็นต้น แต่สำหรับบทเรียนนี้ผมขอแนะนำซอฟต์แวร์ที่มีลักษณะเป็นฟรีแวร์ คือดาวน์โหลดมาใช้งานได้ฟรี ชื่อ Handy ImageMapper 1.01 ซึ่งสามารถดาวน์โหลดได้ที่
//www.downloadtarget.com/Image-Mapping-Tools/Handy-ImageMapper-1-01.Tar.Gz/Download-58410
เมื่อดาวน์โหลดเสร็จจะได้โปรแกรมชื่อ Handy_ImageMapper_46119.exe ขนาดไฟล์ 340 KB ทำการลงโปรแกรมนี้ในเครื่องให้เรียบร้อย โดยดับเบิลคลิกที่ไฟล์โปรแกรมนี้ และคลิก Next ไปเรื่อย ๆ จนถึง Finish เป็นอันเสร็จพิธี
เตรียมการก่อน
1. เตรียมภาพที่จะนำมาทำ link ภาพนี้ควรจะมีขนาดความกว้างไม่เกิน 450 pixel (เพราะถ้าภาพมีความกว้างมากกว่านี้ ระบบของบล็อกจะย่อให้เหลือเพียง 450 pixel เท่านั้น แล้วระบบจะสร้าง link ไปยังภาพต้นฉบับ ทำให้เกิดความสับสนกับกิจกรรมที่จะทำในครั้งนี้) ตัวอย่างภาพที่จะนำมาใช้ เช่นภาพข้างล่างนี้
2.เตรียม URL หรือชื่อไฟล์ที่จะให้ Link ไป หลาย ๆ ที่ เช่น ในภาพนี้จะแบ่งพื้นที่เป็น 3 ส่วน แต่ละส่วน(ตามหมายเลขกำกับ)จะให้ link ไปที่ URL ดังนี้
ส่วนที่ 1 //www.pantip.com/cafe/blueplanet/topic/E10520029/E10520029.html
ส่วนที่ 2 //topicstock.pantip.com/blueplanet/topicstock/2011/04/E10464597/E10464597.html
ส่วนที่ 3 //topicstock.pantip.com/blueplanet/topicstock/2011/04/E10468738/E10468738.html
ใช้โปรแกรม Handy_ImageMapper ช่วยสร้างโค๊ด
1.ดับเบิลคลิกเปิดโปรแกรมนี้ขึ้นมา จะพบหน้าตาของโปรแกรมลักษณะนี้
2.คลิกบริเวณที่วงกลมสีแดงเพื่อเข้าไปเปิดไฟล์ภาพที่ต้องการ เข้ามาในพื้นที่ตรงกลางของหน้าต่างโปรแกรม ได้ผลลักษณะนี้
3. ที่บริเวณวงรีสีแดงในภาพข้างบน จะมีปุ่มให้เลือกรูปแบบของการสร้างแผนผัง 3 แบบ คือ สี่เหลี่ยม วงกลม และหลายเหลี่ยม
4. เนื่องจากภาพของเราจะถูกแบ่งเป็นส่วน ๆ ในลักษณะรูปสี่เหลี่ยม จึงคลิกเลือกแบบเป็นรูปสี่เหลี่ยม หลังจากนั้นนำเมาส์ไปสร้างขอบเขตให้ครอบคลุมพื้นที่แต่ละส่วน โดยคลิกที่มุมบนซ้ายของบริเวณที่ต้องการ แล้วลากเมาส์มายังมุมล่างขวา เมื่อปล่อยเมาส์ จะมีหน้าต่างให้พิมพ์ข้อมูลในช่อง Tooltip (หมายเลข 1) และ HREF (หมายเลข 2) ซึ่งก็คือ URL ที่ต้องการจะให้ link ลงไป ลักษณะนี้
5.ทำขอบเขตของพื้นที่และพิมพ์ข้อมูลของแต่ละส่วนให้ครบ เมื่อครบแล้วให้คลิกที่ปุ่ม Place On Clipboard (หมายเลข 3) โปรแกรม Handy_ImageMapper จะสร้างโค๊ดทั้งหมดไว้ในหน่วยความจำ
6. เปิดโปรแกรม Notepad ที่อยู่ในเครื่องของเราขึ้นมา แล้วคลิกที่คำสั่ง Edit แล้วเลือก Paste โค๊ดทั้งหมดก็จะปรากฏให้เห็นลักษณะนี้ เราจะก็อปปี้โค๊ดในกรอบสีแดงไปใช้งานในบล็อก
นำโค๊ดไปใช้ในบล็อก
ขณะนี้เรามีข้อมูลทั้งหมดพร้อมที่จะนำไปใช้ในบล็อกได้แล้ว ทำตามขั้นตอนดังนี้
1.ขณะกำลังเขียนบล็อก ใช้คำสั่งแทรกภาพที่เตรียมไว้ ลงไปในบล็อกตามปกติ จะได้โค๊ดลักษณะนี้
<img src="//www.bloggang.com/data/a/ampols/picture/1304738233.jpg" width="450" height="361" border="0">
2.พิมพ์คำสั่ง USEMAP=#map1 แทรกลงไปในโค๊ดข้างบน ให้อยู่ท้ายบรรทัดก่อนเครื่องหมาย > โค๊ดข้างบนจะมีลักษณะนี้
<img src="//www.bloggang.com/data/a/ampols/picture/1304738233.jpg" width="450" height="361" border="0" USEMAP=#map1>
3.ก็อปปี้โค๊ดในกรอบสีแดงจากโปรแกรม Notepad ข้างต้นมาแปะ (paste) ต่อลงไปที่บรรทัดล่าง โค๊ดที่สมบูรณ์จะมีลักษณะนี้
งานเสร็จแล้ว ลองทดลองคลิกที่ภาพแต่ละส่วนจะเชื่อมโยงไปยัง URL ที่ต่างกันได้ตามต้องการแล้วครับ
Create Date : 18 สิงหาคม 2554 |
Last Update : 18 สิงหาคม 2554 14:22:49 น. |
|
10 comments
|
Counter : 2585 Pageviews. |
|
|
|
โดย: kobnon วันที่: 18 สิงหาคม 2554 เวลา:14:48:48 น. |
|
|
|
โดย: oranuch_sri วันที่: 18 สิงหาคม 2554 เวลา:17:37:02 น. |
|
|
|
โดย: oranuch_sri วันที่: 18 สิงหาคม 2554 เวลา:17:44:58 น. |
|
|
|
โดย: ทองกาญจนา วันที่: 19 สิงหาคม 2554 เวลา:8:42:33 น. |
|
|
|
โดย: oranuch_sri วันที่: 19 สิงหาคม 2554 เวลา:13:26:56 น. |
|
|
|
โดย: oranuch_sri วันที่: 30 สิงหาคม 2554 เวลา:6:44:23 น. |
|
|
|
โดย: oranuch_sri วันที่: 30 สิงหาคม 2554 เวลา:6:50:06 น. |
|
|
|
โดย: ทองกาญจนา วันที่: 31 สิงหาคม 2554 เวลา:9:59:31 น. |
|
|
|
โดย: ทองกาญจนา วันที่: 31 สิงหาคม 2554 เวลา:10:15:01 น. |
|
|
|
โดย: oranuch_sri วันที่: 11 กันยายน 2554 เวลา:13:04:14 น. |
|
|
|
|
|
|
|