Dexdev

Link Thumbnail เพื่ออะไร
เห็นเว็บอื่นเค้าหล่อเวลาเอาเม้าส์ over ที่ link แล้วมีเป็น thumbnail โชว์ขึ้นมา…อ้อไอ้เว็บนี้น่าตามันอย่างนี้นี่เอง(จะได้ไม่ต้อง click) เลยอยากหล่อมั่งจนมาเป็นบทความนี้ครับ

Link Thumbnail ทำงานยังไง

1. สร้าง thumbnail ของเว็บนั้นๆมาก่อน (อย่าคิดว่าผมทำเอง)
   โดยผมเรียกใช้บริการของ http://www.websnapr.com/ วิธีการก็คือผูกตัวแปร url แบบ get ไปเลย

   

   <img src=”http://images.websnapr.com/?size=s&url=http://www.dexdev.com” />

2. เตรียม HTML
   โดยเพิ่ม class=”thumbnail” เข้าไป

   <a href=”http://www.dexdev.com” class=”thumbnail”>dexdev.com</a>

3. เตรียม Javascript
   include prototype (อย่างไม่มีทางเลือก)

   <script type=”text/javascript” src=”prototype.js”></script>

   ค้นหา tag A ที่มี class ชื่อ thumbnail ใช้ $$ (CSS selectors)

   $$(‘a.thumbnail’)

   เป้าหมายต่อไปหลังจากได้ a.thumbnail มาแล้วคือการแทรก div ที่มี thumbnail ของ link ครับ

   ‘<div><img src=”http://images.websnapr.com/?size=s&url=’+ $(this).readAttribute(‘href’) + ‘” /></div>’

   เช็คอีกนิดว่าเคยแทรก div ไปรึยัง

   var thumbnail = $(this).down(0);

   if(!thumbnail) {

   //ถ้าไม่มีค่อยแทรก div

   }

   เอา code ไปเลยดีกว่าเริ่มเยอะ

   document.observe(“dom:loaded”, function() { //ใช้ window.onload มันไม่หล่ออิอิ

   $$(‘a.thumbnail’).invoke(‘observe’,'mouseover’, function(){ //วนลูปเพิ่ม onmouseover

   var thumbnail = $(this).down(0);

   if(!thumbnail){

   new Insertion.Bottom($(this), ‘<div><img src=”http://images.websnapr.com/?size=s&url=’+ $(this).readAttribute(‘href’) + ‘” /></div>’);

   }

   });

   });

4. CSS
   

   a.thumbnail div {

   position: absolute;

   display: none;

   border: 1px solid #eee;

   left: 0px;

   top: 20px;

   padding: 5px;

   background: #fff;

   }

   a.thumbnail div img {

   border: none;

   }

   a.thumbnail:hover {

   position: relative;

   }

   a.thumbnail:hover div {

   display: block;

   }

   ตอนแรกให้ซ่อน thumbnail ไว้ก่อนครับ เอาเม้าส์ over เมื่อไหร่ค่อยขึ้นมาหล่อ …
   แค่นี้ก็ได้ thumbnail ของเว็บไปแปะหล่อๆกันแล้ว

ข้อดีของ Link Thumbnail

รู้สึกว่าหล่ออะเวลาเอาเม้าส์ไปวางบน link แล้วมีตัวอย่างขึ้นมาด้วย

ข้อเสีย

1. เว็บช้าขึ้นจากเดิมที่เคยช้าอยู่แล้วก็ช้าขึ้นไปอีกเฮ้อ
2. คอยดูสิวันไหนไอ้เว็บที่เราไปเอา thumbnail เค้ามาใช้มันเจ๊ง….ก็หล่อเลือกได้(ว่าจะตายแบบไหน)
3. …

Download หลังจากอ่านข้อดีข้อเสียแล้วคิดว่าคุ้มเหลือเกินก็ download ที่นี่ได้เลยครับ