มีเพื่อนๆ เข้ามาคอมเม้นท์เรื่องทำตัวหนังสือวิ่งๆๆ ในโพสก่อนหน้านี้ แล้วก็ให้บอกวิธีทำให้ด้วย ผมก็เลยตอบไปในคอมเม้นท์ต่อมา ปรากฎว่า โค้ดที่ใส่ให้ดูมันกลับไม่โชว์ในคอมเม้นท์เลย เลยตอบไปว่าเดี๋ยวจะมาเขียนวิธีทำลงในบล็อคให้ จึงเป็นเหตุให้เกิดโพสนี้ขึ้นมานั่นเอง
มาลองดูกันเลยนะครับ
การทำงานของทริกนี้ ใช้แท็ก html ตัวหนึ่งที่ชื่อว่า <marquee> นั่นเอง จริงๆ แล้วแท็กนี้เป็นแท็กของ html เวอร์ชั่นเก่าที่มีมานานแล้ว ตั้งแต่สมัยเบราเซอร์ Netscape ยังดังๆ อยู่ IE ยังไม่เกิดด้วยซ้ำ ซึ่งสมัยก่อนนี้ยังไม่มีมาตรฐานของ html ดังนั้นแท็กนี้จะทำงานได้กับเฉพาะเน็ตสเคปเท่านั้น ยังมีแท็กอีกหลายตัวเลยที่ใช้ได้เฉพาะบางเบราเซอร์ เช่นแท็ก <blink></blink> ที่ใช้ทำตัวอักษรกระพริบ หรือแท็กอื่นๆ ถ้าสนใจก็ลองศึกษาเพิ่มเติมได้นะครับ
มาเข้าเรื่องของเรากันดีกว่า
แต่ก่อนจะดูกันต่อไปมาตกลงกันก่อน เรื่องของแท็ก html เนี่ย เวลาเขียนจะมีแท็กเปิดและแท็กปิด บางแท็กก็จะมีแต่แท็กเปิด ไม่ต้องปิด (อ้าว ยุงเข้าตายชัก .. 555 ไม่เกี่ยวกันเล๊ยยย)
การเขียนแท็ก html จะใช้เครื่องหมาย <[tag]> เป็นแท็กเปิด และ <[tag]> เป็นแท็กปิด ส่วนระหว่างแท็กเปิดและปิดก็ใส่ข้อมูลที่เราต้องการ หรือจะใส่แท็กอื่นๆ ซ้อนเข้าไปก็อีกก็ได้ แต่ต้องจำลำดับของแท็กให้แม่นๆ เพราะเดี๋ยวเปิดแล้วจะลืมปิด ถ้าเป็น html เวอร์ชั่นใหม่ๆ จะ fix เรื่องของ syntax และการเปิดและปิดแท็กมากๆ จะฟ้องว่าเราเขียนผิดพลาดอยู่เรื่อย ถ้าเป็นสมัยก่อนเบราเซอร์ก็จะอ่านเลยไป ถ้าแสดงผลได้ก็โอเคแล้ว แต่เดี๋ยวนี้จุกจิกขึ้นเยอะเชียว
กลับมาดูที่แท็ก <marquee> ของเรากันต่อดีกว่า
จากย่อหน้าก่อน เราก็ใส่ตัวอักษรหรือรูปภาพให้อยู่ระหว่างแท็กทั้งสองนั่นเอง
ตามนี้นะ
<marquee>[เราก็จะใส่ตัวอักษรหรือรูปภาพตรงนี้นั่นเอง]</marquee>
แต่แท็ก <marquee> มันไม่ได้มีแค่นี้น่ะสิ มันมีพารามิเตอร์มากำกับการทำงานอยู่ด้วยอีก 2-3 ตัว โดยหลักๆ ที่ใช้ก็จะมี
scrolldelay="[ใส่ค่าที่ต้องการเป็นตัวเลขนะครับ]"
พารามิเตอร์ตัวนี้ใช้ควบคุมอะไรน่ะเหรอ? คำตอบคือใช้ควบคุมความเร็วของการเคลื่อนที่ ช้าหรือเร็วก็อยู่ที่ค่าที่เราใส่เข้าไปนี่แหละ เพื่อนๆ ลองใส่ดูนะ แล้วลองดูความเร็วในการวิ่งที่เปลี่ยนไป ลองๆ ใส่ดูซัก 100 หรือ 200 ก่อน
อีกค่าหนึ่งก็คือ
direction="[LEFT/RIGHT/UP/DOWN]"
พารามิเตอร์ตัวนี้ใช้ควบคุมทิศทางการเคลื่อนที่ มีค่าที่ใช้ได้อยู่ 4 ค่านั่นคือ
LEFT คือวิ่งไปทางซ้าย
RIGHT คือวิ่งไปทางขวา
UP คือวิ่งขึ้นข้างบน และ
DOWN คือวิ่งลงข้างล่าง
ใช้ได้ทีละ 1 ค่านะครับ อย่าไปใส่พร้อมกัน เดี๋ยวมันวิ่งจนขาพันกันไม่รู้จะไปทางไหนดี 5555+
เอาล่ะเราลองมาดูโค้ดที่ใช้งานกันนะครับ
<marquee scrolldelay="100" direction="LEFT">ใส่ตัวอักษรตรงนี้ครับ</marquee>
ผลที่เราได้จะเป็นเช่นนี้
เรียบร้อยแล้ว ง่ายไม๊ครับเพื่อนๆ
ต่อไปเรามาลองเอารูปภาพมาใส่แทนตัวอักษรกันนะ
ก่อนอื่นเราต้องมาทำความกับแท็ก html อีกตัวหนึ่งนั่นก็คือแท็ก <img ..> นั่นเอง แท็กตัวนี้ใช้เรียกเอารูปที่มีอยู่มาใช้ โดยเป็นแท็กที่ไม่ต้องมีแท็กปิด แล้วก็เช่นกันคือมีพารามิเตอร์กำกับอยู่อีก โดยจะประกอบด้วย
src หมายถึง source ก็คือที่อยู่ของแหล่งที่เราเก็บภาพไว้
title คือคำอธิบายภาพ จะแสดงขึ้นมาเมื่อเราเอาเมาส์ไปวางบนภาพ
width คือความกว้างของภาพที่เราต้องการ ระบุเป็นพิกเซล
height คือความสูงของภาพที่เราต้องการ ระบุเป็นพิกเซลเช่นกัน
alt หมายถึง alternate คืออธิบายแทนภาพเมื่อกำลังโหลดภาพหรือโหลดไม่สำเร็จ
border คือขอบภาพเป็นพิกเซล
ยังมีอีกนะครับ แต่เอาแค่นี้พอก่อนดีกว่าเดี๋ยวจะงงกันไปใหญ่
รูปแบบการใช้งานแท็ก <img ../> ก็จะเป็นอย่างนี้ครับ
<img src="[พิมพ์ URL ของภาพที่ต้องการ]" title="[พิมพ์คำอธิบายภาพตรงนี้ครับ]" alt="[พิมพ์คำอธิบายแทนภาพครับ]" width="[ใส่ตัวเลขค่าเป็นพิกเซล]" height="[ใส่ตัวเลขค่าเป็นพิกเซล]" border="[ใส่ค่าที่ต้องการเป็นตัวเลขครับ]" />
มาดูตัวอย่างของการใช้แท็กนี้กันครับ
<img src="http://tombass.seesod.com/storage23/nN8QflDepb1258791861/m.jpg" title="ภาพที่ต้องการ" border="1" alt="ภาพของเรา" width="200" height="38" />
ผลที่ได้ก็จะเป็นเช่นนี้ครับ
ต่อไปเราก็เอาโค้ดนี้ไปใส่ในระหว่างแท็ก <marquee></marquee> ก็จะทำให้ภาพของเราวิ่งได้แล้วครับ
เดี๋ยวก่อนครับเพื่อนๆ ยังไม่หมดแค่นั้น
แหมๆๆ มีภาพวิ่งๆๆๆ แล้วให้มันอยู่เฉยๆ ให้มันเชยไปทำไม เรามาเพิ่มลิ้งค์ให้ภาพที่วิ่งๆ ของเราดีกว่า พอคลิ๊กปุ๊บ ก็จะไปหน้าที่เราต้องการปั๊บเลย คงดูเท่ไม่หยอก
คราวนี้ก็จะมีแท็กเพิ่มมาอีก 1 ตัวคือแท็ก <a></a> แท็กนี้ต้องมีแท็กปิดนะ เดี๋ยวจะไม่รู้ว่าจะให้สร้างลิ้งค์ถึงตรงไหน มีพารามิเตอร์อยู่ 2-3 ตัวให้ใช้งานนั่นคือ
href คือที่อยู่เป้าหมายที่เราต้องการ เมื่อคลิ๊กลิ้งค์นี้แล้วก็จะไปที่หน้านี้แหละ
title ความหมายเดียวกับแท็ก <img /> นั่นแหละครับ
target หมายถึงหน้าของเบราเซอร์ที่เราต้องให้ให้เปิด มีค่าให้ใช้งานหลักๆ อีก 4 ค่า คือ
_blank เปิดลิ้งค์ในหน้าต่างใหม่หรือแท็บใหม่
_top เปิดลิ้งค์ในเฟรมนอกสุด
_self เปิดลิ้งค์ในเฟรมที่ใช้งานอยู่ และ
_parent เปิดในหน้า parent ของเวบนั้น อธิบายยังไงดี ลองเองแล้วกัน
การใช้แท็ก <a></a> มีดังนี้
<a title="[คำอธิบายลิ้งค์]" href="[ใส่ที่อยู่ของหน้าเพจที่ต้องการ]" target="[ค่าของพารามิเตอร์ข้างต้น]" >รูปภาพหรือคำที่ต้องการสร้างลิ้งค์</a>
ตัวอย่างการใช้ครับ
<a href="http://www.tombass.net" target="_blank"><img title="ไปเยี่ยมชมเวบไซต์ของผมครับ" alt="Tombass.Net" src="http://tombass.seesod.com/storage23/nN8QflDepb1258791861/m.jpg />
ผลก็จะออกมาเป็นแบบนี้
สุดท้ายเราก็เอาทั้งหมดมารวมกัน ก็จะได้โค้ดออกมาประมาณนี้ครับ
<marquee scrolldelay="100" direction="LEFT">
<a href="http://www.tombass.net" title="ไปเยี่ยมชมเวบไซต์ของผมกันครับ" target="_blank" alt="Tombass.Net">
<img src="http://tombass.seesod.com/storage23/nN8QflDepb1258791861/m.jpg" title="ไปเยี่ยมชมเวบไซต์ของผมกันครับ" alt="ภาพของเรา" width="470" height="90" />
</a>
</marquee>
แล้วสุดท้ายก็ได้ผลออกมาเป็นเช่นนี้ตามที่เราต้องการครับ
สนุกไม๊ครับเพื่อนๆ มาถึงบรรทัดนี้ทุกคนก็สามารถสร้างรูปภาพให้วิ่งๆๆๆ แล้วยังคลิ๊กเพื่อไปยังหน้าที่ต้องการได้อีกด้วย ทำให้บล็อคของเราดูน่าสนใจขึ้นไปอีก
หวังว่าโพสนี้คงเป็นประโยชน์กับผู้ที่สนใจบ้างไม่มากก็น้อยนะครับ
ด้วยความเคารพครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น