OnMouseOver

OnMouseOver คือ JavaScript เหตุการณ์ ที่ทำให้หน้าของคุณมีการโต้ตอบมากขึ้นโดยการเปลี่ยนลักษณะที่ปรากฏของภาพเมื่อวางเมาส์เหนือภาพ

เคล็ดลับ

เอฟเฟกต์ JavaScript OnMouseOver สามารถทำได้โดยใช้ CSS โดยที่ผู้เยี่ยมชมไม่จำเป็นต้องเปิดใช้งาน JavaScript บนเบราว์เซอร์ของตน

ตัวอย่าง OnMouseOver

ตัวอย่างด้านล่างแสดงให้คุณเห็นว่าคุณสามารถสร้างปุ่มง่ายๆ ที่มีเอฟเฟกต์บนเมาส์ได้อย่างไร เมื่อวางเมาส์เหนือปุ่มใดปุ่มหนึ่งด้านล่าง ปุ่มจะเปลี่ยนเป็นสีเข้มขึ้น แสดงว่าสามารถคลิกได้

HTML
ความช่วยเหลือออนไลน์
ข้อมูลไวรัส
ศัพท์แสงคอมพิวเตอร์
ข้อมูลอินเทอร์เน็ต

คำแนะนำตัวอย่าง OnMouseOver

ด้านล่างนี้คือภาพรวมของวิธีการสร้างตัวอย่างข้างต้น

ในสุทธิส่วนด้านล่างเป็นไฟล์รูปภาพ ตัวอย่างเช่น om1.gif และ om11.gif เป็นไฟล์สองไฟล์ที่ใช้สำหรับตำแหน่งเปิดและปิด ไฟล์ om1.gif จะแสดงขึ้นเมื่อวางเมาส์ไว้เหนือภาพ ดังนั้นในตัวอย่างด้านบนจะเป็นสีเทาอ่อน เมื่อวางเมาส์เหนือภาพจะเปลี่ยนเป็น om11.gif สีเทาเข้ม คุณสามารถทำตามรูปแบบเดียวกันนี้เมื่อสร้างภาพของคุณ หรือหากต้องการคุณสามารถเปลี่ยนรูปแบบการตั้งชื่อได้

สีน้ำเงินส่วนคือ ตัวแปร เพื่อจัดเก็บตำแหน่งเปิดและปิดภาพสำหรับแต่ละปุ่ม ตัวอย่างเช่น, onef คือตำแหน่งปิด ( ฉ สำหรับ ปิด ) และ หนึ่ง คือเมาส์บนภาพตำแหน่ง ในตัวอย่างด้านบนของเรา มีปุ่มห้าปุ่มที่มีชุดภาพสองภาพ รวมเป็น 10 ภาพ

ในส้มส่วนที่เป็นภาพ ลิงค์ . ลิงก์เหล่านี้อาจชี้ไปยังหน้าใดๆ ที่คุณต้องการให้ปุ่มส่งต่อผู้เยี่ยมชมไปยังเว็บไซต์ของคุณ

  <a href='/html-web-design-help-9735' onMouseOver='act('one')' onMouseOut='inact('one')'> img/o-definitions/84/onmouseover.gif' name='one' alt='HTML'>   
 <a href='https://www.computerhope.com/oh.htm' onMouseOver='act('two')' onMouseOut='inact('two')'> img/o-definitions/84/onmouseover-2.gif' name='two' alt='Online help'>   
 <a href='/virus-9574' onMouseOver='act('three')' onMouseOut='inact('three')'> img/o-definitions/84/onmouseover-3.gif' name='three' alt='Virus information'>   
 <a href='/computer-terms-dictionary-7016' onMouseOver='act('four')' onMouseOut='inact('four')'> img/o-definitions/84/onmouseover-4.gif' name='four' alt='Computer jargon'>   
 <a href='/internet-8263' onMouseOver='act('five')' onMouseOut='inact('five')'> img/o-definitions/84/onmouseover-5.gif' name='five' alt='Internet Info'>