Bloggang.com : weblog for you and your gang
Group Blog
ท่องเที่ยวทั่วไทย
ผจญภัยในต่างแดน
บันทึกการเดินทางไปต่างประเทศ
แบ่งปันประสบการณ์
อุทยานหลวงราชพฤกษ์
ไม้ดอกไม้ประดับ
ความรู้รอบคอมพ์
การตกแต่งบล็อกเบื้องต้น
วิธีป้องกันน้ำท่วมบ้าน
<<
สิงหาคม 2554
>>
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
18 สิงหาคม 2554
การตกแต่งบล็อกสำหรับมือใหม่ #14 ภาพเดียว link ไปได้หลายที่
All Blogs
มาเก็บสำรองข้อมูล(Back up) ที่อยู่ในบล็อกกันเถอะ
การตกแต่งบล็อกสำหรับมือใหม่ # 15 การแทรกแถบค้นหาข้อมูล (Google Custom Search) ไว้ในบล็อก
การตกแต่งบล็อกสำหรับมือใหม่ #14 ภาพเดียว link ไปได้หลายที่
การตกแต่งบล็อกสำหรับมือใหม่ #13 การแทรกไฟล์เอกสาร pdf ในบล็อก
การตกแต่งบล็อกสำหรับมือใหม่ #12 การอัปโหลดคลิปขึ้นยูทูบ
การตกแต่งบล็อกสำหรับมือใหม่ #11 การแสดงกระทู้ที่หน้าบล็อก
การตกแต่งบล็อกสำหรับมือใหม่ #10 การสร้าง link จากภาพ
การตกแต่งบล็อกสำหรับมือใหม่ #9 การใส่คลิปจากยูทูบ
ดาวน์โหลดคลิปวิดีโอจากยูทูบอย่างง่าย ๆ
การตกแต่งบล็อกสำหรับมือใหม่ #8 ใส่นาฬิกาลงในบล็อกได้ทันที
การใส่ชื่อลงบนภาพ (ทั้งอัลบั้ม) อย่างง่าย ๆ
การสร้างภาพเปิดรีวิวด้วยวิธีการง่าย ๆ
การตกแต่งบล็อกสำหรับมือใหม่ #7 วิธีการอัพโหลดไฟล์
การตกแต่งบล็อกสำหรับมือใหม่ #6 สมัครเว็บไซต์รับฝากไฟล์ฟรี
การตกแต่งบล็อกสำหรับมือใหม่ #5 การย่อ-ขยายภาพ
การตกแต่งบล็อกสำหรับมือใหม่ #4 สร้างภาพเคลื่อนไหวอย่างง่าย
เทคนิคการพิมพ์ตัวอย่างสคริปต์และไม่ให้ทำงาน
การตกแต่งบล็อกสำหรับมือใหม่ #3 ใส่เพลงแบ็คกราวนด์
การตกแต่งบล็อกสำหรับมือใหม่ #2 คำสั่งพื้นฐาน
การตกแต่งบล็อกสำหรับมือใหม่ #1 ความเข้าใจเบื้องต้น
การตกแต่งบล็อกสำหรับมือใหม่ #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
10 comments
Last Update : 18 สิงหาคม 2554 14:22:49 น.
Counter : 2595 Pageviews.
Share
Tweet
ขอบคุณสำหรับข้อมูลค่ะ
โดย:
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
ฟ้าใสวันใหม่
Maeboon
tuk-tuk@korat
AdrenalineRush
ฝากเธอ
สายหมอกและก้อนเมฆ
NENE77
อุ้มสี
schnuggy
ข้ามขอบฟ้า
Close To Heaven
เนินน้ำ
Sweet_pills
เรียวรุ้ง
mambymam
ตุ๊กจ้ะ
newyorknurse
ไวน์กับสายน้ำ
Webmaster - BlogGang
[Add ทองกาญจนา's blog to your web]
Links
www.ampols.com
BlogGang.com
Pantip.com
|
PantipMarket.com
|
Pantown.com
| © 2004
BlogGang.com
allrights reserved.