ข้อมูลองค์ความรู้โดย
กฤษณี โภโต
ตำแหน่ง ผู้จัดการ

บทที่ 12 Images

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Java
  ลงข้อมูลเมื่อ 09:07:01 22/05/2013
  Page View (2297) แบ่งปัน

บทที่ 12 Images

 Image เป็น Object อีกตัวหนึ่งที่สามารถใช้ JavaScript ควบคุมได้ แต่ตัวมันไม่ได้มี Properties หรือ Method ให้เราใช้ลูกเล่นได้มากมายนัก บางครั้งจึงต้องใช้ร่วมกับอย่างอื่น เช่น links เพื่อเอาความสามารถบางอย่างของ links มาเพิ่มให้กับ Image

Image properties

border มีค่าเท่ากับแอตทริบิวต์ BORDER
complete โหลดภาพเสร็จหรือยัง
height มีค่าเท่ากับแอตทริบิวต์ HEIGHT
hspace มีค่าเท่ากับแอตทริบิวต์ HSPACE
lowsrc มีค่าเท่ากับแอตทริบิวต์ LOWSRC
name ชื่ออ็อบเจกต์ของ Image
src ชื่อ URL ของ Image
vspace มีค่าเท่ากับแอตทริบิวต์ VSPACE
width มีค่าเท่ากับแอตทริบิวต์ WIDTH

Image เป็น Object ที่ไม่มี Method แต่มี Event 3 ตัวคือ onAbout onError onLoad

การสลับภาพเมื่อเอา mouse ไปทับ

เมื่อภาพภาพหนึ่งถูกแสดงในเวบเพจแล้ว หากเราใช้ JavaScript เปลี่ยนค่าในพรอเพอร์ตี้ src จะมีผลทำให้ภาพนั้นเปลี่ยนไปด้วย การสลับภาพเมื่อเอา mouse ไปทับ ก็จะใช้หลักการนี้แหละครับ แต่เราจะรู้ได้ไงว่า mouse จะไปทับเมื่อไหร่ ในเมื่อ Object Image ไม่มี Event ที่ชื่อ onmouseover และ onmouseout

ไม่ยากครับ ก็อย่างที่กล่าวไว้ตอนต้นบทไงว่า เราจะเอา Links มาเพิ่มความสามารถให้ Image ก็ตรงนี้และครับ ถ้าเราทำ Image ให้เป็นตัวลิงก์ซะก็ใช้ Event onmouseover และ onmouseout ได้แล้ว แบบนี้ไงคร

และนี้คือ Code ของตัวอย่างข้างบนครับ

<a href="javascript:void(0)" 

        onmouseover="switch1.src=pic2.gif"

           onmouseout="switch1.src=pic1.gif">

        <img src="pic1.gif" name="switch1">

</a>

 

การทำ Rollover

มีหลักการเดียวกับการสลับภาพเมื่อเอา mouse ไปทับครับ เพียงแต่คราวนี้ตัวลิงก์ไม่ใช่ภาพ แต่จะเปลี่ยนภาพที่อยู่อีกจุดหนึ่งได้

และนี้คือ Code 

<a href="javascript:void(0)"

         onmouseover="roll.src='roll1.gif'"

         onmouseout="roll.src='roll0.gif'">

         สายรุ้ง</a>

&nbsp;&nbsp;

<a href="javascript:void(0)"

         onmouseover="roll.src='roll2.gif'"

         onmouseout="roll.src='roll0.gif'">หินอ่อน</a>

&nbsp;&nbsp;

<a href="javascript:void(0)"

         onmouseover="roll.src='roll3.gif'"

         onmouseout="roll.src='roll0.gif'">ลายไม้</a>

<p>

<img src="roll0.gif" border=1 name="roll">

เทคนิคการทำ Precache Image

 ท่านอาจจะพบว่าทั้ง 2 script ข้างต้นมีข้อเสียตรงที่ การทำงานในครั้งแรกภาพจะไม่เปลี่ยนทันทีทันใด แต่จะต้องรอให้ภาพที่จะเปลี่ยนขึ้นมาแทนโหลดเสร็จก่อน แต่ไม่ต้องห่วงครับ หัวข้อนี้จะสอนวิธีแก้ปัญหานี้

          วิธีแก้ก็ง่ายมากครับ แค่โหลดภาพที่จะเปลี่ยนมาเตรียมไว้ก่อนเท่านั้นเอง วิธีนี้ทำให้การเปลี่ยนภาพครั้งแรก ทำได้เร็ว แต่ไม่ได้หมายความว่าการโหลดเวบเพจจะเร็วขึ้นนะครับ กลับจะช้าลงด้วยเพราะต้องโหลดภาพที่อาจจะ ไม่ได้แสดงมาเตรียมไว้

การทำ Precache มี 2 ขั้นตอนครับ ให้ในไว้ใน <script>...</script> ที่อยู่ในส่วน Head

1. ประกาศอ็อบเจกต์ Image ด้วยคำสั่ง new

mypic1=new Image();

2. ระบุชื่อไฟล์ด้วยการกำหนดค่าใน src

mypic1.src="picname1.gif";

เพียงแค่นี้ภาพก็จะถูกโหลดมาเตรียมพร้อมแสดงผลแล้วครับ

 

ที่มาจาก : http://realdev.truehits.net




องค์ความรู้ที่มีผู้อ่านมากสุด
บทที่ 3 Operator in JavaScript
บทที่ 3 Operator in JavaScript

โดย... กฤษณี โภโต

สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )
สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )

โดย... กฤษณี โภโต

บทที่ 13 Math Function
ในการเขียนโปรแกรม มีบางครั้งที่เราต้องอาศัยการคำนวณทางคณิตศาสตร์ JavaScript ก็มีคุณสมบัติในการคำนวณทางคณิตศาสตร์กะเค้าเหมือนกันครับ

โดย... กฤษณี โภโต

บทที่ 2 เรื่องของตัวแปร JavaScript
JavaScript ก็เหมือนภาษาที่ใช้เขียนโปรแกรมทั่วไป ตรงที่มีตัวแปรสำหรับเก็บค่า จากส่วนหนึ่งของ Program แล้วก็เอาไปใช้ในส่วนอื่นๆได้ ตัวแปรก็คือ ชื่อที่เรากำหนดขึ้นมาสำหรับเก็บค่า อย่างเช่น เราอาจกำหนดตัวแปรชื่อว่า imageName เพื่อไปเก็บชื่อไฟล์ภาพๆหนึ่ง หรือ อาจกำหนดให้ amount ไปเก็บจำนวนเต็ม เป็นต้น

โดย... กฤษณี โภโต

บทที่ 9 Document Object
Document object คืออะไร Document Object หมายถึงเอกสาร HTML ที่เป็นเวบเพจที่กำลังแสดงอยู่ในหน้าต่างหลัก เป็น Propertiy ของ window (window.document) Document Object เปรียบเสมือนหน้าหนังสือ หากคุณลองเปิดหนังสือดูจะเห็น หมายเลขหน้า และ หมายเลขบท ในทาง OOP หมายเลขหน้าและหมายเลขบทเหล่านั้นก็เป็น Properties สำหรับบอกคุณสมบัติ ของหน้านั้น ว่าอยู่ในหน้าที่เท่าไหร่ บทใด นอกจากนี้ ในหน้าหนังสือยังมีเนื้อหาสาระที่ประกอบอยู่ภายใน ไม่ว่าจะเป็นเนื้อหา หัวข้อ ย่อหน้า รูปภาพ ตาราง ฯลฯ สิ่งเหล่านี้ก็นับเป็น Properties ของหน้าหนังสือเช่นกันครับ

โดย... กฤษณี โภโต

บทที่ 14 String
ไม่ว่าจะเขียนโปรแกรมด้วยภาษาใด การจัดการกับ String ก็เป็นความสามารถที่ขาดไม่ได้ ใน JavaScript ก็เช่นกัน

โดย... กฤษณี โภโต

บทที่ 10 Form Java
คุณคงเคยพบกับ Banner ข้างบนนี้มาก่อนนะครับ เจ้านี่แหละ มันเกิดจากการนำ object form ไปประยุกต์ ใช้ กับ setTimeout ในบทที่ผ่านมา และ นอกจากนี้แล้ว Form ยังมีคุณสมบัติน่าสนใจอีกมาก ทั้ง Button Checkbox radio ฯลฯ รวมทั้ง text ที่อยู่ข้างบนนี้ด้วยครับ

โดย... กฤษณี โภโต

บทที่ 6 Event Java
Event คืออะไร

โดย... กฤษณี โภโต

บทที่ 11 Links
บทที่ 11 Links

โดย... กฤษณี โภโต

บทที่ 7 OOP for JavaScript
Object เป็นความสามารถที่สำคัญอย่างหนึ่งของ JavaScript เรียกได้ว่าเป็นพระเอกของเรื่องเลยเชียวนะ หน้านี้ผมจะแนะนำให้รู้จักกับ Object ก่อนว่าเป็นอย่างไรนะครับ

โดย... กฤษณี โภโต