Group Blog
 
<<
สิงหาคม 2554
 123456
78910111213
14151617181920
21222324252627
28293031 
 
18 สิงหาคม 2554
 
All Blogs
 
การตกแต่งบล็อกสำหรับมือใหม่ #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 น.  

 
ขอบคุณมากๆค่ะ
ไม่ทราบว่าจะเป็นการรบกวนมากไปไหม๊คะ
ถ้าอยากจะขอคำแนะนำและช่วยสอนวิธีการทำFlash Player
Flash Playerตามลิ้งค์นี้ค่ะ

ขอขอบคุณอีกครั้งสำหรับข้อมูลความรู้ดีๆที่นำมาฝากค่ะ


โดย: oranuch_sri วันที่: 18 สิงหาคม 2554 เวลา:17:37:02 น.  

 
Flash Player

ขอโทษค่ะขอเปลี่ยนเป็นลิ้งค์อันนี้นะคะ


โดย: oranuch_sri วันที่: 18 สิงหาคม 2554 เวลา:17:44:58 น.  

 
สวัสดีครับคุณ oranuch_sri

เรื่องที่ขอให้ช่วยสอนวิธีทำ Flash Player ตามตัวอย่าง
จะขอเวลาศึกษาดูก่อนนะครับ


โดย: ทองกาญจนา วันที่: 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 น.  

 
สวัสดีครับ คุณ oranuch_sri

ต้องการแสดงคลิปยูทูปทันทีและวนซ้ำลักษณะนี้ใช่หรือไม่ครับ



โดย: ทองกาญจนา วันที่: 31 สิงหาคม 2554 เวลา:9:59:31 น.  

 
ถ้าใช่ ใช้โค๊ดแบบนี้ครับ

<object width="425" height="344"><param name="movie" value="//www.youtube.com/v/dYvSSiZ7XPc?hl=th&fs=1 &autoplay=1&loop=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/dYvSSiZ7XPc?hl=th&fs=1&autoplay=1&loop=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

โดยเพิ่มโค๊ดส่วนที่เป็นสีแดงเข้าไปที่โค๊ดเดิม 2 แห่งครับ


โดย: ทองกาญจนา วันที่: 31 สิงหาคม 2554 เวลา:10:15:01 น.  

 
ขอบคุณมากๆๆค่ะ เอาโค้ดไปใช้แล้วค่ะ


โดย: oranuch_sri วันที่: 11 กันยายน 2554 เวลา:13:04:14 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

ทองกาญจนา
Location :
เชียงใหม่ Thailand

[ดู Profile ทั้งหมด]

ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 41 คน [?]




Friends' blogs
[Add ทองกาญจนา's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.