ใส่ลูกเล่นให้ภาพของคุณด้วยเทคนิค Rollover

บทความนี้เป็นบทความสั้น ๆ ที่กล่าวถึงเทคนิคการทำให้ภาพในบล็อกของคุณน่าสนใจมากขึ้น

โดยทั่วไปเทคนิคนี้เรียกว่า เป็นการทำ Rollover Image ซึ่งเป็นการภาพมีการเปลี่ยนแปลงเมื่อนำเมาส์ไป Over (ถ้าพูดง่ายๆ คือ ภาพจะเปลี่ยนไปเมื่อนำเมาส์ไปชี้) สำหรับตัวอย่างของการใช้เทคนิคนี้สามารถดูได้จากภาพด้านล่างนี้ครับ





ท้าวความ…ปกติการใส่ภาพทำได้โดยใช้โค้ด

<img src="URL ของภาพ" />

ถ้ามีการกำหนดกว้างยาวก็ใช้โค้ด(กว้าง 100 สูง 100)
<img src="URL ของภาพ" width="100" height="100" />


ถ้าต้องการให้มีข้อความโต้ตอบก็ใส่ title เข้าไป
<img src="URL ของภาพ" width="100" height="100" title="ใส่ข้อความโต้ตอบ" />


ถ้าต้องการให้ภาพของคุณมี keyword กำกับด้วย ก็เติม alt เข้าไปอีกอย่าง
<img src="URL ของภาพ" width="100" height="100" title="ใส่ข้อความโต้ตอบ" alt="ใส่ key word" />


และถ้าต้องการใส่ Link ให้รูปภาพก็ทำได้โดย ใส่ tag a เข้าไป
<a href="ใส่ Link"><img src="URL ของภาพ" width="100" height="100" title="ใส่ข้อความโต้ตอบ" alt="ใส่ key word" /></a>


ถ้าต้องการให้คลิกที่ภาพแล้วเปิดในหน้าต่างใหม่ก็ใส่ taget _blank เข้าไปอีก
<a href="ใส่ Link" target="_blank"><img src="URL ของภาพ" width="100" height="100" title="ใส่ข้อความโต้ตอบ" alt="ใส่ key word" /></a>



เอาล่ะครับ พอจะเข้าใจโค้ดการใส่รูปภาพกันแล้วเข้าเรื่องกันเลยครับ


ขั้นตอนการติดตั้ง

โค้ดสำหรับการทำ Rollover Image ก็คือ

<a href="ใส่ Link ที่ต้องการเชื่อมโยง"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>


IMAGE-1-LINK : หมายถึงรูปที่ปรากฎก่อนและหลัง mouse over
IMAGE-2-LINK : หมายถึงรูปที่แสดงเมื่อนำ mouse ไป over


ตัวอย่างของโค้ดที่เติม Link ต่าง ๆ แล้ว

<a href="http://hackublog.blogspot.com/"><img src="http://upic.me/i/mw/beatifulbeach.jpg" onmouseover="this.src='http://upic.me/i/6o/20186712.jpeg'" onmouseout="this.src='http://upic.me/i/mw/beatifulbeach.jpg'" /></a>

ถ้าต้องการใส่ความกว้าง หรือความยาวก็ทำได้โดยใช้วิธีที่ได้กล่าวมาในตอนต้นครับ

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

  1. การลากเมาส์ไปบนรูปแล้วมีคำว่า click here to share ทำไงครับ ขอบคุนครับ

  1. ขอบคุนมากครับที่ช่วยเหลือ แต่เทคนิค rollover ผมได้นำไปใช้แล้วและได้ผล ที่ผมถามหมายถึงทุกภาพในไซต์ของคุน ถ้านำเมาส์ไปบนภาพจะมีแถบสีดำพร้อมเงากรอบรูป พร้อมกับคำว่า click here to share น่ะครับผมอยากได้เทคนิคนั้นถ้าไม่เป็นการรบกวน
    ขอบคุนจากใจจริง

  1. @Eatme Pls. : ที่ผมใช้เป็นส่วนเสริมที่มากับ Wibiya toolbar ครับ ตามบทความ

    http://www.hackublog.com/2010/03/2-toolbar-gagdget-wibiya-gfc.html

  1. แล้วถ้า เรา ต้องการจะให้ภาพเปลี่ยนหลายภาพกว่านี้จะทำได้ไหมคะ

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

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

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