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>    <a href="javascript:void(0)" onmouseover="roll.src='roll2.gif'" onmouseout="roll.src='roll0.gif'">หินอ่อน</a>    <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";