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

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

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

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

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

โพสต์โดย pprn » 06/07/2018 2:37 pm

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


    JavaScript OnClick คือเหตุการณ์ที่เกิดจากการคลิกเมาส์

รูปแบบคำสั่ง OnClick


    อธิบายโค้ด
      - function_name คือ ชื่อฟังก์ชั่น

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

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

<!DOCTYPE html>
<html><head>
   <script src="https://ajax.googleapis.com/jquery.min.js"></script>
   
   <script>
      var variable_name_1 = 1;
      function function_name1() {    
         if (variable_name_1==1) { var variable_name_2  = "picture_name_1.jpg";          }
         if (variable_name_1==2) { var variable_name_2 = "picture_name_2.jpg";          }
         click++;            
         document.getElementById("element_id").src = variable_name_2;      
      }
      function function_name_2(){   variable_name_2 = "";       document.getElementById("element_id").src = variable_name_2;   }

      function function_name_3() {    var variable_name_2 = "picture_name_2.jpg";   
                                          document.getElementById("element_id").src = variable_name_2;   }
      function function_name_4(){   variable_name_2 = "";       document.getElementById("element_id").src = variable_name_2;   }

   </script>
</head>
<body>

   <button onclick="function_name_1();">Text_output</button>
   
   <br><img id="element_id"" src="">

</body>
</html>


อธิบายโค้ด

    - <script src="https://ajax.googleapis.com/jquery.min.js"></script> คือ Google CND
    - 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>
   
   <script>
      var click = 1;
      function imag1() {    
         if (click==1) { var image = "Star Yellow.jpg";          }
         if (click==2) { var image = "Star Red.jpg";          }
         if (click==3) { var image = "Circle Blue.jpg";          }
         if (click==4) { var image = "Triangle.jpg"; click=0;   }
         click++;            
         document.getElementById("picture").src = image;      
      }
      function imag2(){   image = "";       document.getElementById("picture").src = image;      }

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

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

      function imag7() {    var image = "Triangle.jpg";             document.getElementById("picture").src = image;      }
      function imag8(){   image = "";                             document.getElementById("picture").src = image;      }
   </script>
</head>
<body>

   <button onclick="imag1();">Select</button>
   
   <br><img id="picture" src="">

</body>
</html>


ผลลัพธ์

    1. เมื่อคลิกที่ Star Yellow

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

      2. เมื่อคลิกที่ Star Red

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

    3. เมื่อคลิกที่ Circle Blue

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

    4. เมื่อคลิกที่ Triangle

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



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

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

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

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

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