การทำรูปภาพให้สามารถซูมได้นั้นให้นึกถึงเวลาเราจะไปซื้อของออนไลน์ที่ในเว็บต่างๆหากเราสนใจสินค้าตัวไหนเราสามารถที่จะดูสินค้าให้ละเอียดได้แค่เอาเคอเซอร์เม้าส์ไปชี้ที่จุดใดจุดนึงของรูปภาพที่เราต้องการจะซูมได้โดยมีวิธีการทำดังนี้
วิธีการทำรูปภาพให้ซูมได้
- 1.เพิ่ม CSS ไปในส่วนของแท็ก <head>
2.เพิ่ม Jquery ไปในส่วนของแท็ก <head>
โค้ด: เลือกทั้งหมด
<link href="css/cssimg.css" rel="stylesheet" type="text/css"/>
3.จากนั้นในส่วนของแท็ก <body> ก็ใส่แท็ก <img>ไปดังโค้ดโค้ด: เลือกทั้งหมด
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="js/jquery.media.js" type="text/javascript"></script> <script src="js/functions.js" type="text/javascript"></script> <script src="js/validateForm.js" type="text/javascript"></script> <script src="js/mojomagnify.js" type="text/javascript"></script>
โค้ด: เลือกทั้งหมด
<img src="img/dog.jpeg" name="myimage" id="myimage" data-magnifysrc="img/full_dog.jpg" />
- คำอธิบาย
src="img/dog.jpeg" ระบุรูปที่ต้องการจะแสดงโดยจะต้องเล็กกว่ารูปที่จะเรียกในอิลีเม้น data-magnifysrc โดยใน data-magnifysrc จะระบุรูปภาพที่มีขนาดใหญ่กว่าในอิลีเม้น src
5.ผลลัพธ์ที่ได้ดังรูปโค้ด: เลือกทั้งหมด
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Test</title> <link href="css/cssimg.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="js/jquery.media.js" type="text/javascript"></script> <script src="js/functions.js" type="text/javascript"></script> <script src="js/validateForm.js" type="text/javascript"></script> <script src="js/mojomagnify.js" type="text/javascript"></script> </head> <body> <img src="img/dog.jpeg" name="myimage" id="myimage" data-magnifysrc="img/full_dog.jpg" /> </body> </html>
- คำอธิบาย
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery