zeazon
10-05-2005, 02:22 AM
เคยเห็นหรือเปล่าที่เวลาเอาเมาส์ไปชี้ที่รูปแล้วรูปจะเปลี่ยน ส่วนมากจะเห็นเป็นปุ่มมากกว่าเนอะ เดี๋ยวจะบอกวิธีว่ามันทำยังงายยย
ก็ใช้คำสั่ง <img src=""> ในการเอาภาพมาวางนี่แหละ แต่ว่าเราจะตั้งชื่อให้กับรูปด้วย เพื่อว่าเวลาเปลี่ยนรูปจะได้อ้างถูกว่ารูปไหน โดยใส่ค่า name เข้าไป อย่างนี้
<img src="" name=""> ตรงค่า name จะตั้งเป็นอะไรก็ได้แต่อย่าให้เหมือนรูปอื่นละกัน
หลังจากนั้นเราจะทำให้มันเปลี่ยนรูปล่ะ โดยคำสั่งที่จะใช้ก็มีสองอันนี้ <b>onmouseover</b> กะ <b>onmouseout</b>
<b>onmouseover</b> ก็คือ เมื่อเอาเมาส์มาวางแล้วจะให้ทำอะไร
<b>onmouseout</b> ก็คือ เมื่อเอาเมาส์ออกไปแล้วจะให้ทำอะไร
เราก็จะเอามาทำงี้
<b>onmouseover="ชื่อname.scr='รูปที่ต้องการเปลี่ยนเป็นรูปนี้;'"</b>
ตัวอย่างเช่น
<font color="blue"><img src="http://www.agalico.com/board/images/icons/onion-s1-1.gif" name="aa" onmouseover="aa.src='http://www.agalico.com/board/images/icons/onion-s2-2.gif;'"></font>
จะได้ออกมาอย่างงี้
<img src="http://www.agalico.com/board/images/icons/onion-s1-1.gif" name="aa" onmouseover="aa.src='http://www.agalico.com/board/images/icons/onion-s2-2.gif';">
แต่ว่าเมื่อเอาเมาส์ออกมาแล้ว รูปไม่เปลี่ยนคืน หรืออยากจะให้เปลี่ยนถาวรก็ไม่เป็นไร แต่ถ้าอยากให้รูปเปลี่ยนกลับคืนเมื่อเอาเมาส์ออกก็ใส่ onmouseout เข้าไป โค้ดจะเป็นอย่างงี้
<font color="blue"><img src="http://www.agalico.com/board/images/icons/onion-s1-1.gif" name="bb" onmouseover="bb.src='http://www.agalico.com/board/images/icons/onion-s2-2.gif';" onmouseout="bb.src=http://www.agalico.com/board/images/icons/onion-s1-1.gif';"></font>
ผลที่ได้จะเป็นอย่างงี้
<img src="http://www.agalico.com/board/images/icons/onion-s1-1.gif" name="bb" onmouseover="bb.src='http://www.agalico.com/board/images/icons/onion-s2-2.gif';" onmouseout="bb.src='http://www.agalico.com/board/images/icons/onion-s1-1.gif';">
เป็นยังไงบ้างลองหัดๆ ดูนะ :emo_037:
ก็ใช้คำสั่ง <img src=""> ในการเอาภาพมาวางนี่แหละ แต่ว่าเราจะตั้งชื่อให้กับรูปด้วย เพื่อว่าเวลาเปลี่ยนรูปจะได้อ้างถูกว่ารูปไหน โดยใส่ค่า name เข้าไป อย่างนี้
<img src="" name=""> ตรงค่า name จะตั้งเป็นอะไรก็ได้แต่อย่าให้เหมือนรูปอื่นละกัน
หลังจากนั้นเราจะทำให้มันเปลี่ยนรูปล่ะ โดยคำสั่งที่จะใช้ก็มีสองอันนี้ <b>onmouseover</b> กะ <b>onmouseout</b>
<b>onmouseover</b> ก็คือ เมื่อเอาเมาส์มาวางแล้วจะให้ทำอะไร
<b>onmouseout</b> ก็คือ เมื่อเอาเมาส์ออกไปแล้วจะให้ทำอะไร
เราก็จะเอามาทำงี้
<b>onmouseover="ชื่อname.scr='รูปที่ต้องการเปลี่ยนเป็นรูปนี้;'"</b>
ตัวอย่างเช่น
<font color="blue"><img src="http://www.agalico.com/board/images/icons/onion-s1-1.gif" name="aa" onmouseover="aa.src='http://www.agalico.com/board/images/icons/onion-s2-2.gif;'"></font>
จะได้ออกมาอย่างงี้
<img src="http://www.agalico.com/board/images/icons/onion-s1-1.gif" name="aa" onmouseover="aa.src='http://www.agalico.com/board/images/icons/onion-s2-2.gif';">
แต่ว่าเมื่อเอาเมาส์ออกมาแล้ว รูปไม่เปลี่ยนคืน หรืออยากจะให้เปลี่ยนถาวรก็ไม่เป็นไร แต่ถ้าอยากให้รูปเปลี่ยนกลับคืนเมื่อเอาเมาส์ออกก็ใส่ onmouseout เข้าไป โค้ดจะเป็นอย่างงี้
<font color="blue"><img src="http://www.agalico.com/board/images/icons/onion-s1-1.gif" name="bb" onmouseover="bb.src='http://www.agalico.com/board/images/icons/onion-s2-2.gif';" onmouseout="bb.src=http://www.agalico.com/board/images/icons/onion-s1-1.gif';"></font>
ผลที่ได้จะเป็นอย่างงี้
<img src="http://www.agalico.com/board/images/icons/onion-s1-1.gif" name="bb" onmouseover="bb.src='http://www.agalico.com/board/images/icons/onion-s2-2.gif';" onmouseout="bb.src='http://www.agalico.com/board/images/icons/onion-s1-1.gif';">
เป็นยังไงบ้างลองหัดๆ ดูนะ :emo_037: