บทเรียนที่ 16 สลับภาพด้วยชุดคำสั่ง
นี่เป็นอีกตัวอย่างของการสลับภาพด้วย onMouseOver และ onMouseOut แต่แทนที่จะมีคำสั่งเปลี่ยนภาพในทันที เราจะทำให้คำสั่งเปลี่ยนภาพนั้นกลายเป็นชุดคำสั่ง ซึ่งโดยทั่วไปแล้วหากมีเพียงคำสั่งเดียว ไม่จำเป็นต้องสร้างชุดคำสั่งก็ได้ แต่ในความเป็นจริง คุณอาจต้องการให้มีการสลับภาพ หลายๆแห่ง หลายๆภาพ ในหน้าเดียว หรือเกิดเหตุการณ์อื่นๆร่วมด้วย การสร้างชุดคำสั่งจะช่วยจัดระเบียบ และทำให้ง่ายต่อการแก้ไขสคริป
สคริป...
<HTML>
<HEAD>
<title>การสลับภาพด้วยชุดคำสั่ง</title>
<SCRIPT type="text/javascript">
function up()
{
document.pic1.src="http://www.freewebs.com/maneemeeta/action.jpg"
}
function down()
{
document.pic1.src="http://www.freewebs.com/maneemeeta/na.jpg"
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<h2>เหมือนบทที่แล้วครับ</h2>
<A HREF="http://www.google.co.th"
onMouseOver="up()"
onMouseOut="down()">
<IMG SRC="http://www.freewebs.com/maneemeeta/na.jpg" name="pic1" border=0>
</BODY>
</HTML>
มาแยกโครงสร้างสคริปกันครับ
· อย่าลืมระวังการพิมพ์ onMouseOver และ onMouseOut ให้ถูกต้อง ...ที่ต้องย้ำอยู่บ่อยๆ เพราะเป็นสิ่งที่ลืมง่ายครับ
· โปรดสังเกตภายในจาวาสคริปที่สองชุดคำสั่งถูกสร้างขึ้นมา
<SCRIPT type="text/javascript">
function up()
{document.pic1.src="http://www.freewebs.com/maneemeeta/action.jpg"}
function down()
{document.pic1.src="http://www.freewebs.com/maneemeeta/na.jpg"}
</SCRIPT>
function up()
{document.pic1.src="http://www.freewebs.com/maneemeeta/action.jpg"}
function down()
{document.pic1.src="http://www.freewebs.com/maneemeeta/na.jpg"}
</SCRIPT>
จะเห็นว่าคำสั่งที่ใช้ยังเหมือนบทที่แล้ว เพียงแต่ทำให้เป็นชุดคำสั่งเท่านั้น โดยใช้ชื่อชุดคำสั่งว่า up และ down
· ต่อมา เรามาดูส่วนที่ใช้เรียกชุดคำสั่ง...
<A HREF="http://www.google.co.th"
onMouseOver="up()"
onMouseOut="down()">
onMouseOver="up()"
onMouseOut="down()">
รูปแบบที่ใช้นั้นเหมือนกับบทที่แล้วเปี๊ยบครับ เพียงแต่เปลี่ยนคำสั่งภายในให้กลายเป็นชื่อชุดคำสั่ง
· ตัวอย่างนี้ใช้คำสั่งจาวาสคริปเพียงคำสั่งเดียวในแต่ละชุดคำสั่ง ซึ่งปกติแล้วคุณสามารถใส่หลายๆคำสั่งไว้ในชุดคำสั่งได้ ซึ่งจะทำให้เกิดเหตุการณ์ได้หลากหลายยิ่งขึ้น
· ถ้าในหนึ่งหน้า คุณจะทำการสลับภาพ 2 แห่ง และสร้างชุดคำสั่ง 4 ชุดที่จะทำงานให้แต่ละแห่ง(แห่งละ 2) โดยตั้งชื่อแต่ละภาพ แต่ละชุดคำสั่งต่างกัน ดังเช่นตัวอย่างนี้...
<SCRIPT type="text/javascript">
function up()
{document.pic1.src="http://www.freewebs.com/maneemeeta/action.jpg"}
function down()
{document.pic1.src="http://www.freewebs.com/maneemeeta/na.jpg"}
function up2()
{document.pic2.src="http://www.freewebs.com/maneemeeta/action.jpg"}
function down2()
{document.pic2.src="http://www.freewebs.com/maneemeeta/na.jpg"}
</SCRIPT>
<A HREF="http://www.google.co.th"
onMouseOver="up()"
onMouseOut="down()">
<IMG SRC="http://www.freewebs.com/maneemeeta/na.jpg" name="pic1">
<A HREF="http://www.google.co.th"
onMouseOver="up2()"
onMouseOut="down2()">
<IMG SRC="http://www.freewebs.com/maneemeeta/na.jpg" name="pic2">
function up()
{document.pic1.src="http://www.freewebs.com/maneemeeta/action.jpg"}
function down()
{document.pic1.src="http://www.freewebs.com/maneemeeta/na.jpg"}
function up2()
{document.pic2.src="http://www.freewebs.com/maneemeeta/action.jpg"}
function down2()
{document.pic2.src="http://www.freewebs.com/maneemeeta/na.jpg"}
</SCRIPT>
<A HREF="http://www.google.co.th"
onMouseOver="up()"
onMouseOut="down()">
<IMG SRC="http://www.freewebs.com/maneemeeta/na.jpg" name="pic1">
<A HREF="http://www.google.co.th"
onMouseOver="up2()"
onMouseOut="down2()">
<IMG SRC="http://www.freewebs.com/maneemeeta/na.jpg" name="pic2">
ผลของสคริปข้างบนนี้จะแสดง link 2 แห่ง ที่ใช้รูปเดียวกัน รวมๆแล้วก็แสดงภาพออกมาได้สองรูปเท่านั้น ซึ่งจริงๆแล้วในกรณีนี้ คุณสามารถแสดงภาพได้สูงสุด 4 ภาพ โดยเปลี่ยน ที่อยู่ภาพให้ไม่เหมือนกันเลย
แบบฝึกหัด
ให้คุณเปิดแบบฝึกหัดเก่า(บทที่ 15) ที่คุณทำไว้แล้ว ออกมาแก้ไข โดยเพิ่มชุดคำสั่งสองชุดเข้าไปแทน ซึ่งผลลัพท์ที่ได้นั้นยังเหมือนเดิม
ไม่มีความคิดเห็น:
แสดงความคิดเห็น