- JavaScript คือ ภาษาคอมพิวเตอร์สำหรับการเขียนโปรแกรมบนระบบอินเทอร์เน็ต ซึ่งใช้ในการสร้างและพัฒนาเว็บไซต์ (ใช้ร่วมกับ HTML) มีวิธีการทำงาน
- Mouseenter เป็นการใช้ jQuery Event ควบคุมผูกตัวจัดการเหตุการณ์ event ที่ "mouseenter" หลังจากเลื่อนเมาส์ไปโดน
โค้ด: เลือกทั้งหมด
<!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
โค้ด: เลือกทั้งหมด
<!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 รูปเล็ก
- 2. เมื่อคลิกที่ Star Red รูปเล็ก
- 3. เมื่อคลิกที่ Circle Blue รูปเล็ก
- 4. เมื่อคลิกที่ Triangle รูปเล็ก
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา Javascript, HTML, Ajax และ jQueryซึ่งเป็นความรู้พื้นฐานในการพัฒนา Javascript, HTML5 , Ajax และ jQuery ต่อไป
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------