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

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

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

ภาพประจำตัวสมาชิก
pprn
PHP Sr. Member
PHP Sr. Member
โพสต์: 96
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

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

โพสต์โดย pprn » 06/07/2018 3:26 pm

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

    Mouseenter เป็นการใช้ jQuery Event ควบคุมผูกตัวจัดการเหตุการณ์ event ที่ "mouseenter" หลังจากเลื่อนเมาส์ไปโดน

รูปแบบคำสั่ง การเปลี่ยนรูปสินค้าหรือสีสินค้าด้วย Javascript Onmouseenter (จาวาสคิปต์ ออนคลิก)

โค้ด: เลือกทั้งหมด

<!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/bootstrap/3.3.6/css/bootstrap.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 รูปเล็ก

      star yellow.JPG
      เมื่อคลิกที่ Star Yellow รูปเล็ก
      star yellow.JPG (14.59 KiB) เปิดดู 46 ครั้ง

    2. เมื่อคลิกที่ Star Red รูปเล็ก

      star red.JPG
      เมื่อคลิกที่ Star Red รูปเล็ก
      star red.JPG (18 KiB) เปิดดู 46 ครั้ง

    3. เมื่อคลิกที่ Circle Blue รูปเล็ก

      circle blue.JPG
      เมื่อคลิกที่ Circle Blue รูปเล็ก
      circle blue.JPG (16.65 KiB) เปิดดู 46 ครั้ง

    4. เมื่อคลิกที่ Triangle รูปเล็ก

      triangle.JPG
      เมื่อคลิกที่ Triangle รูปเล็ก
      triangle.JPG (17.84 KiB) เปิดดู 46 ครั้ง



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

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

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน