โ ค้ ด แ ม ว

ลำดับตอนที่ #28 : (T h e c a t*) ; โค้ดรูปภาพเลื่อนไปหน้าข้อความ ใช้แนะนำตัวหรืออะไรก็ได้ (แนะนำ)

       ` THE CAT โค้ดแมวๆ ●

    พอชี้ภาพปุ๊บรูปก็จะเลื่อนไปเป็นหน้าตัวอักษร
     สามารถใช้แนะนำตัวเองหรืออะไรก็ได้นะคะ          

 

                       ตัวอย่าง
             ลองเอาเมาส์ชี้ที่ภาพดูนะคะ 
       แล้วจะเจออะไรที่มัน วะวะว๊าววว >o<
                           CODE                              

           ควรใช้ภาพขนาด 320 * 320 นะคะ
         ภาพจะออกมาสวย ไม่ขาดไม่เกินกรอบ
 

- - - - - - - - - - - - - - - - - - - -  โค้ดแมวๆ ยินดีต้อนรับทุกคนค่ะ <3 รูปหน้าบทความอาจพิลึกนิดนุง -..- ช่างมันเนอะๆ ตอนใหม่ขอนำเสนอ โค้ดรูปเลื่อนเจ๋งๆ ลองเอาไปใช้สิ๊ แล้วจะติดใจ อุอริ

                           CODE                              

<style type="text/css"> #side{ margin-right:-1px; width:250px; height:150px; overflow:hidden;} #text {text-align:center; width:ใส่ขนาดความกว้างpx; height:ใส่ขนาดความสูงpx; padding:5px; overflow:auto; color:#363636; background-color:#fff;} #picture {margin-left:-280px; width:ใส่ความกว้างอีกทีนึงpx; height:ความสูงอีกทีนึงpx; overflow:hidden; -webkit-transition: opacity 0.9s linear; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out;} #side:hover #picture {margin-left:-550px;} </style> <table id="side" border="0" cellpadding="0" cellspacing="0" ><tr> <td><div id="text"> พิมพ์ข้อความใส่ลงไปเลย</div> </td> <td><div id="picture"><img src="ใส่ Url รูปภาพนะ"></div></td> </tr></table>

   ตรง {margin-left:-550px;} ตรง -550 สามารถปรับ
             ได้นะคะเพื่อให้เลื่อนพอดีกับรูปภาพ
               

     T H E M E
◈ B L & W H ◈