วิธีสร้าง Interactive Picture โดยใช้ jQuery

วิธีทำ blogger



Interactive Image เป็น effect สำหรับรูปภาพที่สามารถเปลี่ยนสถานะการแสดงผลได้ เช่น การเรียกขึ้นมาแสดงผล และปิดการแสดงผลนั้น โดยการทำงานนี้จะอาศัยการทำงานของ jQuery เข้ามาช่วย

นอกจากหลักการข้างต้นที่กล่าวมาแล้ว ถ้าเราใช้การกำหนด CSS เข้ามาช่วยก็จะทำให้เราสามารถกำหนดตำแหน่งการแสดงผลของภาพได้ และสามารถประยุกต์ใช้งานได้ เช่น ในตัวอย่างนี้เป็นการประยุกต์ใช้ในการขายสินค้าที่เป็นอุปกรณ์ในสำนักงาน เป็นต้น

สำหรับตัวอย่างของผลลัพธ์ของบทความนี้สามารถคลิกดูได้จากลิงค์ด้านล่าง




วิธีติดตั้ง

Login เข้าไปที่ blogger

ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องขยายแม่แบบเครื่องมือ



ขั้นที่ 1 ติดตั้ง CSS โดยค้นหาโค้ด ]]></b:skin> และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

/* Interactive-picture Edit by Hackublog*/

/* Picture Styles */
#picture{ position:relative; top:20px; width:650px; height:466px; margin:0px auto 30px 0; background:#FFF url('http://upic.me/i/g3/office.jpg'); overflow:hidden; }
/* General More Button */       
.more{ position:absolute; width:50px; height:50px; background:url('http://upic.me/i/ei/4vdim.png'); border:1px solid #444; padding:5px; text-align:left; overflow:hidden; }
.more span{ position:absolute; left:60px; width:160px; padding:15px 0 0 5px; color:#FFF; font:bold 13px Lucida Grande, Arial, sans-serif; text-shadow:#000 1px 1px 0px; }
/* Item Specific More Button */
#couch{ top:240px; left:75px;} /*ปรับค่าตำแหน่งโดยวัดระยะห่างจากด้านบน และ ทางซ้าย*/
#plant{ top:180px; left:370px; } /*ปรับค่าตำแหน่งโดยวัดระยะห่างจากด้านบน และ ทางซ้าย*/
#monitor{ top:335px; left:390px; } /*ปรับค่าตำแหน่งโดยวัดระยะห่างจากด้านบน และ ทางซ้าย*/
#board{ top:50px; left:400px; } /*ปรับค่าตำแหน่งโดยวัดระยะห่างจากด้านบน และ ทางซ้าย*/
/* General Info Box */
#infobox{ position:absolute; bottom:-200px; left: 350px; height:200px; width:300px; z-index:20; margin:0 0 -100px -150px; background:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; text-align:center; }
#infobox a, #infobox a:visited{ font:italic 16px Georgia, serif; color:#555; text-decoration:none; }
#infobox a:hover{ text-decoration:underline; }
/* Close button for info box */
span.close{position:absolute; right:5px; top:5px;}
/* The dimmed background when the info box is showing */   
#fade_bg{ position:absolute; z-index:15; width:100%; height:100%; background:url('http://upic.me/i/ei/4vdim.png'); display:none;}



คุณสามารถปรับความกว้างและค่าตัวเลขของตำแหน่งต่าง ๆ โดยดูได้จากรูปด้านล่าง

สอนทำ blogger

ในกรณีที่ต้องการเปลี่ยนภาพพื้นหลัง ก็สามารถเปลี่ยนที่โค้ดรูปภาพ http://upic.me/i/g3/office.jpg ที่ปรากฎใน CSS ข้างต้น


ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง Java Script ซึ่งทำโดยค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript' />
<script type="text/javascript">
        $(document).ready(function(){
            //Blur Links (Prevents Outline)
            $('a').click(function() {
                this.blur();
            });
            //Hide all item descriptions in the info box
            $("#infobox > div").css("display", "none");
            //Call in the info box
            $(".more a").click(function(){
                $("#infobox").animate({bottom: '233px' }, 300);
                $("#fade_bg").fadeIn();
                return false;
            });
            //Expand more info button on hover
            $(".more").hover(function(){
                $(this).stop().animate({width: '225px' }, 200).css({'z-index' : '10'}); //Change the width increase caption size
            }, function () {
                $(this).stop().animate({width: '50px' }, 200).css({'z-index' : '1'});
              });
              //Show description for selected item
              $("#couch a").click(function(){
                $("#couch_info").show();
            });
            $("#plant a").click(function(){
                $("#plant_info").show();
            });
              $("#monitor a").click(function(){
                $("#monitor_info").show();
            });
              $("#board a").click(function(){
                $("#board_info").show();
            });
            //Remove background, info box and hide all descriptions
            $("#fade_bg, .close").click(function(){
                $("#fade_bg").fadeOut();
                $("#infobox").animate({bottom: '-200px' }, 300, function() {
                    $("#infobox > div").css("display", "none");
                });
                return false;
            });
        });
    </script>



สำหรับในขั้นที่ 2 นี้ ถ้า templates ของคุณมีการติดตั้ง jquery 1.3.2 แล้วก็ไม่ต้องติดตั้งซ้ำเข้าไปอีก นั่นคือ คุณสามารถลบโค้ด


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

ในขั้นที่ 2 ทิ้งไปได้เลยครับ



ขั้นที่ 3 ขั้นนี้เป็นการติดตั้ง HTML ซึ่งทำได้ 2 ทางเลือก ดังนี้

3.1 หากต้องการติดตั้งโค้ดเข้าไปใน Template โดยตรงก็ทำต่อเนื่องจากขั้นที่ 2 โดยค้นหาโค้ด <div id='main-wrapper'> แล้ววางโค้ดต่อไปนี้ถัดจากโค้ดดังกล่าว และบันทึกแม่แบบก็เป็นอันจบขั้นตอนครับ


<!-- Interactive-picture-with-jquery-->
<div id="picture">
<!-- More Info Buttons -->
<div class="more" id="couch">
<a href="#"><img src="http://upic.me/i/or/cmore.png"/></a>
<span>IKEA Klippan Couch</span>
</div>
<div class="more" id="plant">
<a href="#"><img src="http://upic.me/i/or/cmore.png"/></a>
<span>Cornelius, Office Plant</span>
</div>
<div class="more" id="monitor">
<a href="#"><img src="http://upic.me/i/or/cmore.png"/></a>
<span>Samsung 305t Monitor</span>
</div>
<div class="more" id="board">
<a href="#"><img src="http://upic.me/i/or/cmore.png"/></a>
<span>Custom White Board</span>
</div>
<!-- End More Info Buttons -->
<!-- Info Boxes -->
<div id="infobox">
<span class="close"><a href="#"><img src="http://upic.me/i/t6/close.png"/></a></span>
<br/>
<div id="couch_info">
<img src="http://upic.me/i/1m/klippan.jpg"/><br/>
<a href="http://www.ikea.com/us/en/catalog/products/10138530">IKEA Klippan Couch</a>
</div>
<div id="plant_info">
<img src="http://upic.me/i/sj/plant.jpg"/><br/>
<a href="http://images.google.com/images?q=office%20plants&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&ie=UTF-8&sa=N&hl=en&tab=wi">Office Plants</a>
</div>
<div id="monitor_info">
<img src="http://upic.me/i/vc/samsung.jpg"/><br/>
<a href="http://www.samsung.com/us/consumer/office/monitors/professional/LS30HUXCB/XAA/index.idx?pagetype=prd_detail">Samsung 305t Monitor</a>
</div>
<div id="board_info">
<img src="http://upic.me/i/7w/whiteboard.jpg"/><br/>
<a href="http://www.lowes.com/lowes/lkn?action=productDetail&productId=61082-46498-31023248&lpage=none">Custom Whiteboards</a>
</div>       
</div><!-- End Info Boxes -->
<!-- Dimmed Background -->
<div id="fade_bg">&nbsp;</div>
<!-- End Dimmed Background -->
</div><!-- End Interactive-picture-with-jquery-->




3.2 วางโค้ดด้วยวิธีเพิ่ม Gadget ซึ่งทำได้โดย

ไปที่แผงควบคุม >> รูปแบบ >> องค์ประกอบของหน้า >> Add Gadget ชนิด HTML/จาวาสคริปต์

วางโค้ดเดียวกับ 3.1 ลงไป ปรับแก้ตามความต้องการแล้วบันทึกก็จบขั้นตอน


หมายเหตุ เนื่องจากการสร้าง Interactive picture จะต้องใช้พื้นที่ของความกว้างมาก (650 px) ดังนั้นตำแหน่งที่เหมาะสมที่ควรจะวาง Gadget ก็คือ ด้านบนหรือด้านล่างกล่องบทความบล็อก ดังนั้นเมื่อเพิ่ม Gadget ในตำแหน่งใดก็แล้วแต่ ให้ Drag mouse เพื่อลาก Gadget ไปยังตำแหน่งที่กล่าวไว้ (ดูรูป)


สอนแต่งบล็อก




แนวทางการปรับแต่งโค้ดในขั้นที่ 3

1. โค้ดสีแดง เป็นข้อความโต้ตอบสำหรับแนะนำสินค้าเมื่อนำ mouse ไป over ในตำแหน่งดังกล่าว

ทำ blogspot

2. โค้ดสีม่วงคือ URL ของรูปภาพ (รูปควรมีขนาด 250 x 150 px ) ซึ่งควรเปลี่ยนเป็นรูปภาพของคุณเอง

ทำ blogger

3. โค้ดสีน้ำเงินคือ URL ของสินค้า ควรแทนที่ด้วย Link ที่คุณต้องการให้เชื่อมโยงกับรูปภาพ

4. และโค้ดสีชมพูคือข้อความสั้น ๆ สำหรับแนะนำภาพ หรือสินค้าครับเปลี่ยนได้ตามความต้องการเช่นกัน

สอนทำบล็อก 

หากมีข้อสงสัยในการติดตั้งโปรดสอบถามที่กล่อง Comment ด้านล่างได้เลย และผมหวังว่าเทคนิคนี้จะเป็นประโยชน์ในการทำบล็อกของชาว blogger ทุกท่านครับ

ตอนนี้มีความคิดเห็น : 3 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. โอ้ มันสวยสุดยอดมากเลยค่ะ ขอบคุณมากๆค่ะ

  1. สุดยอดดด เหนือคำบรรยาย

  1. ขออนุญาตฝากลิงค์นะคะ
    ตอนนี้คุณสามารถเล่นเกมส์คาสิโนสุดโปรด ที่ไหน เมื่อไหร่ก็ได้ ! 
    เล่นผ่าน App บน iPad iPhone และ มือถือ ระบบ Android  ที่นี่เลยค่ะ
    https://www.999player.com

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel