เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript Onmouseenter (จาวาสคิปต์ ออนเมาส์ซีนเตอร์)

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
pprn
PHP Super Hero Member
PHP Super Hero Member
Posts: 565
Joined: 02/07/2018 10:45 am

เทคนิคการเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript Onmouseenter (จาวาสคิปต์ ออนเมาส์ซีนเตอร์)

Post by pprn »

  • JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน
แบบอ็อบเจ็กโอเรียลเต็ด (Object Oriented Programming : OOP)
  • Mouseenter เป็นการใช้ jQuery Event ควบคุมผูกตัวจัดการเหตุการณ์ event ที่ "mouseenter" หลังจากเลื่อนเมาส์ไปโดน
รูปแบบคำสั่ง การเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript Onmouseenter (จาวาสคิปต์ ออนคลิก)

Code: Select all

<!DOCTYPE html> 
<html><head>
	<script src="https://ajax.googleapis.com/jquery.min.js"></script> 
	<link href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel= "stylesheet"> 
	<script> 
		function function_name_1() { 	var variable_name = "picture_name ที่ต้องการให้แสดง.jpg";	document.getElementById("element_id").src = variable_name;		} 
		function function_name_2(){	variable_name = ""; 		document.getElementById("element_id").src = variable_name;		}
	</script>
</head>
<body> 
	 Text_output
	<img onmouseenter="function_name_1();" onmouseleave="function_name_2();" src="picture_name ที่ต้องการให้คลิกเลื่อนเมาส์.jpg">
	<br><img id="bag" src="">

</body>
</html>
อธิบายโค้ด
  • - <script src="https://ajax.googleapis.com/jquery.min.js"></script> คือ Google CND
    - <link href= "https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css" rel= "stylesheet"> คือ bootstrap cdn 3.36
    - variable_name คือ ชื่อตัวแปร
    - function_name คือ ชื่อฟังก์ชั่น
    - element_id คือ ชื่อไอดี
    - picture_name คือ ชื่อไฟล์รูปภาพ
    - Text_output คือ ข้อความที่ต้องการพิมพ์ออกมาแสดงให้ผู้ใช้เห็น
ตัวอย่าง
  • ภาพมีชื่อว่า Star Yellow.jpg, Star Red.jpg, Circle Blue.jpg และ Triangle.jpg

Code: Select all

<!DOCTYPE html> 
<html><head>
	<script src="https://ajax.googleapis.com/jquery.min.js"></script> 
	<link href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel= "stylesheet"> 
	<script> 
		function func1() { 	var image = "Star Yellow.jpg";	document.getElementById("picture").src = image;		} 
		function func2(){	image = ""; 		document.getElementById("picture").src = image;		}

		function func3() { 	var image = "Star Red.jpg";	document.getElementById("picture").src = image;		} 
		function func4(){	image = ""; 		document.getElementById("picture").src = image;		}

		function func5() { 	var image = "Circle Blue.jpg";	document.getElementById("picture").src = image;		} 
		function func6(){	image = ""; 		document.getElementById("picture").src = image;		}

		function func7() { 	var image = "Triangle.jpg";	document.getElementById("picture").src = image;		} 
		function func8(){	image = ""; 		document.getElementById("picture").src = image;		}
	</script>
</head>
<body> 
	Product :
	<img onmouseenter="func1();" onmouseleave="func2();" src="Star Yellow.jpg" class="img-circle" width="50">
	<img onmouseenter="func3();" onmouseleave="func4();" src="Star Red.jpg" class="img-circle" width="50">
	<img onmouseenter="func5();" onmouseleave="func6();" src="Circle Blue.jpg" class="img-circle" width="50">
	<img onmouseenter="func7();" onmouseleave="func8();" src="Triangle.jpg" class="img-circle" width="50">
	<br><img id="picture" src="">

</body>
</html>
ผลลัพธ์
  • 1. เมื่อคลิกที่ Star Yellow รูปเล็ก
    • เมื่อคลิกที่ Star Yellow รูปเล็ก
      เมื่อคลิกที่ Star Yellow รูปเล็ก
      star yellow.JPG (14.59 KiB) Viewed 1080 times
  • 2. เมื่อคลิกที่ Star Red รูปเล็ก
    • เมื่อคลิกที่ Star Red รูปเล็ก
      เมื่อคลิกที่ Star Red รูปเล็ก
      star red.JPG (18 KiB) Viewed 1080 times
  • 3. เมื่อคลิกที่ Circle Blue รูปเล็ก
    • เมื่อคลิกที่ Circle Blue รูปเล็ก
      เมื่อคลิกที่ Circle Blue รูปเล็ก
      circle blue.JPG (16.65 KiB) Viewed 1080 times
  • 4. เมื่อคลิกที่ Triangle รูปเล็ก
    • เมื่อคลิกที่ Triangle รูปเล็ก
      เมื่อคลิกที่ Triangle รูปเล็ก
      triangle.JPG (17.84 KiB) Viewed 1080 times


----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา Javascript, HTML, Ajax และ jQueryซึ่งเป็นความรู้พื้นฐานในการพัฒนา Javascript, HTML5 , Ajax และ jQuery ต่อไป
_____________________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------------------------------------------------------

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: facebook.com [Crawler] and 3 guests