+ แนะนำ
+ เรื่องของตัวแปร
+ Operator
+ Statement
+ Function
+ Event
+ OOP

+ Windows
+ Document Object
+ Form
+ Link
+ Image
+ Math Function
+ String

Image

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

- Image properties
- การสลับภาพเมื่อเอา mouse ไปทับการทำ Rollover
- การทำ Rollover
- เทคนิคการทำ Precache Image

Image properties

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

<< Back :: ^ top ^

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

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

	Pyayam.com :: พ ย า ย า ม ดอทคอม ::
FileEditFormatViewHelp
<a href="javascript:void(0)" onmouseover="switch1.src=image/logo.jpg" onmouseout="switch1.src=image/logo2.jpg"> <img src="image/logo.jpg" name="switch1"> </a>

<< Back :: ^ top ^

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

สายรุ้ง    หินอ่อน    ลายไม้

และนี้คือ Code ของตัวอย่างข้างบนครับ (ก่อนทำอย่าลืมเตรียมไฟล์ภาพนะครับ)

	Pyayam.com :: พ ย า ย า ม ดอทคอม ::
FileEditFormatViewHelp
<a href="javascript:void(0)" onmouseover="roll.src='image/roll1.gif'" onmouseout="roll.src='image/roll0.gif'"> สายรุ้ง</a> &nbsp;&nbsp; <a href="javascript:void(0)" onmouseover="roll.src='image/roll2.gif'" onmouseout="roll.src='image/roll0.gif'">หินอ่อน</a> &nbsp;&nbsp; <a href="javascript:void(0)" onmouseover="roll.src='image/roll3.gif'" onmouseout="roll.src='image/roll0.gif'">ลายไม้</a> <p> <img src="image/roll0.gif" border=1 name="roll">

<< Back :: ^ top ^

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

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

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

	Pyayam.com :: พ ย า ย า ม ดอทคอม ::
FileEditFormatViewHelp
mypic1=new Image();

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

	Pyayam.com :: พ ย า ย า ม ดอทคอม ::
FileEditFormatViewHelp
mypic1.src="picname1.gif";

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

<< Back :: ^ top ^