Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > สอบถามการเรียกใช้งาน CSS IconSet ที่อยู่ในรูปเดียว(ไฟล์ที่เป็น png) ดึงออกมายังไงครับ



 

สอบถามการเรียกใช้งาน CSS IconSet ที่อยู่ในรูปเดียว(ไฟล์ที่เป็น png) ดึงออกมายังไงครับ

 



Topic : 079497



โพสกระทู้ ( 189 )
บทความ ( 0 )



สถานะออฟไลน์




icon all

โชว์ไอคอนตัวใด๋ตัวหนึงทำยยังไงครับ งง มาก



Tag : PHP, HTML/CSS, JavaScript, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-06-07 17:31:06 By : okboou View : 4531 Reply : 13
 

 

No. 1



โพสกระทู้ ( 3,468 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter

know how ไม่ถึง ขุดให้ละกัน จริงๆ ก็คงไม่ยากนะ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-07 21:09:26 By : pjgunner.com
 


 

No. 2



โพสกระทู้ ( 3,748 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

ใช้ css กำหนดพิกัดที่แสดงครับ ว่างๆจะเอาตัวอย่างมาให้ดูละกันเคยเขียนไว้แต่นานแล้ว
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-07 21:28:13 By : Dragons_first
 

 

No. 3



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ตอบความคิดเห็นที่ : 2 เขียนโดย : Dragons_first เมื่อวันที่ 2012-06-07 21:28:13
รายละเอียดของการตอบ ::
อยากรู้ด้วยครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-07 21:34:16 By : mr.win
 


 

No. 4



โพสกระทู้ ( 174 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

อยากรู้ด้วยอีกคนครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-07 22:01:22 By : thethaicom
 


 

No. 5



โพสกระทู้ ( 5,146 )
บทความ ( 26 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


เขาเรียกว่า การ sprite ครับ ทำได้โดยการ Mass เอาแต่ละพิกัดมาแสดง อันล่าง แจกครับ

deawx

Code (PHP)
.age, .arrow-up, .cart-error, .anchor, .comment-edit,
.arrow-in, .camera-edit, .box, .calendar-view-day, .camera-add,
.bullet-wrench, .control-end-blue, .bullet-blue, .control-play, .car,
.control-stop-blue, .controller-delete, .building-link, .cd, .chart-bar-link,
.cd-eject, .application-tile-vertical, .application-osx-terminal, .cd-add, .basket-edit,
.control-pause, .brick-delete, .arrow-join, .arrow-down, .comments-delete,
.coins, .application-view-icons, .chart-pie-add, .chart-line-edit, .bullet-red,
.control-equalizer, .chart-curve-error, .camera-link, .chart-pie-error, .color-swatch,
.contrast-decrease, .book-edit, .database-go, .clock-play, .bug-go,
.database-connect, .cd-go, .cd-edit, .arrow-turn-right, .award-star-add,
.arrow-refresh, .chart-line-error, .chart-curve-delete, .cup-key, .brick-add,
.arrow-rotate-anticlockwise, .bell, .car-delete, .cog-edit, .cup-delete,
.application-xp-terminal, .brick, .application-delete, .award-star-silver-3, .chart-curve,
.clock-pause, .cake, .bullet-toggle-plus, .control-repeat, .computer-go,
.calculator-link, .database-gear, .chart-line-link, .application-get, .bullet-green,
.calendar, .arrow-branch, .calendar-delete, .control-play-blue, .bullet-key,
.application-add, .building-go, .arrow-inout, .bullet-orange, .bell-error,
.calculator-add, .basket-error, .cart, .clock-delete, .calculator-delete,
.camera-error, .cup, .bomb, .application-side-expand, .controller-add,
.cog, .controller, .bug-delete, .award-star-gold-3, .arrow-left,
.book-key, .brick-go, .chart-curve-add, .database-error, .cd-delete,
.contrast-high, .bug, .compress, .application-lightning, .clock-red,
.application-side-boxes, .control-fastforward, .database-delete, .chart-organisation-add, .building-add,
.control-pause-blue, .cd-burn, .arrow-out, .arrow-switch, .bug-error,
.car-add, .bullet-disk, .css-valid, .application-split, .application-form-add,
.bullet-picture, .application-view-gallery, .arrow-refresh-small, .css-go, .computer-add,
.accept, .chart-curve-go, .bug-add, .chart-pie-link, .comments,
.calendar-view-week, .chart-pie-delete, .controller-error, .cross, .application,
.control-start, .arrow-rotate-clockwise, .basket, .briefcase, .application-side-list,
.comment, .bullet-yellow, .cart-edit, .connect, .bullet-arrow-top,
.calculator-error, .bullet-star, .book-previous, .coins-add, .award-star-gold-1,
.control-start-blue, .application-home, .asterisk-orange, .comment-delete, .clock-add,
.chart-organisation, .cup-add, .css, .bullet-black, .award-star-bronze-1,
.cart-remove, .database, .clock-go, .control-end, .cog-error,
.calculator, .bell-delete, .book-open, .control-rewind-blue, .bullet-go,
.brick-link, .bullet-arrow-bottom, .bin-empty, .basket-put, .camera-small,
.bell-add, .building-error, .chart-line-delete, .cart-put, .application-side-contract,
.bug-edit, .chart-bar, .application-osx, .clock-stop, .application-form-magnify,
.application-view-columns, .attach, .book-next, .clock-link, .application-key,
.camera, .cart-go, .cup-edit, .application-tile-horizontal, .award-star-bronze-2,
.bell-go, .application-double, .application-error, .calendar-add, .arrow-divide,
.chart-curve-edit, .creditcards, .award-star-gold-2, .comment-add, .control-stop,
.cup-link, .application-link, .basket-delete, .control-eject, .control-eject-blue,
.application-put, .computer-error, .bullet-arrow-down, .chart-curve-link, .computer-key,
.cog-add, .database-edit, .award-star-silver-2, .award-star-silver-1, .cup-go,
.bug-link, .clock-error, .cog-delete, .calendar-edit, .brick-edit,
.book, .computer-edit, .application-view-detail, .chart-bar-delete, .clock,
.chart-organisation-delete, .building-edit, .calendar-link, .contrast, .bullet-error,
.bullet-delete, .application-go, .application-form-delete, .camera-delete, .computer-link,
.database-add, .book-link, .chart-line-add, .css-add, .application-view-list,
.award-star-delete, .arrow-redo, .cancel, .contrast-low, .cart-add,
.camera-go, .control-equalizer-blue, .bullet-feed, .application-cascade, .bullet-pink,
.basket-go, .book-add, .computer-delete, .asterisk-yellow, .bell-link,
.basket-add, .chart-pie-edit, .css-delete, .application-form-edit, .application-view-tile,
.add, .chart-bar-error, .application-xp, .arrow-undo, .basket-remove,
.chart-bar-add, .award-star-bronze-3, .bin-closed, .building-delete, .cart-delete,
.clock-edit, .bullet-arrow-up, .cursor, .book-delete, .cup-error,
.bullet-add, .control-rewind, .building-key, .computer, .bin,
.book-go, .arrow-right, .control-fastforward-blue, .chart-line, .application-form,
.cut, .arrow-turn-left, .application-side-tree, .contrast-increase, .calendar-view-month,
.bullet-toggle-minus, .cog-go, .cut-red, .color-wheel, .control-repeat-blue,
.book-error, .arrow-merge, .coins-delete, .application-edit, .calculator-edit,
.building, .bullet-white, .comments-add, .bricks
{ display: block; background: url('tmp.png') no-repeat; }
 
.age { background-position: -0px -0px; width: 25px; height: 30px; }
.arrow-up { background-position: -0px -30px; width: 16px; height: 16px; }
.cart-error { background-position: -0px -46px; width: 16px; height: 16px; }
.anchor { background-position: -0px -62px; width: 16px; height: 16px; }
.comment-edit { background-position: -0px -78px; width: 16px; height: 16px; }
.arrow-in { background-position: -0px -94px; width: 16px; height: 16px; }
.camera-edit { background-position: -0px -110px; width: 16px; height: 16px; }
.box { background-position: -0px -126px; width: 16px; height: 16px; }
.calendar-view-day { background-position: -0px -142px; width: 16px; height: 16px; }
.camera-add { background-position: -0px -158px; width: 16px; height: 16px; }
.bullet-wrench { background-position: -0px -174px; width: 16px; height: 16px; }
.control-end-blue { background-position: -0px -190px; width: 16px; height: 16px; }
.bullet-blue { background-position: -0px -206px; width: 16px; height: 16px; }
.control-play { background-position: -0px -222px; width: 16px; height: 16px; }
.car { background-position: -0px -238px; width: 16px; height: 16px; }
.control-stop-blue { background-position: -0px -254px; width: 16px; height: 16px; }
.controller-delete { background-position: -0px -270px; width: 16px; height: 16px; }
.building-link { background-position: -0px -286px; width: 16px; height: 16px; }
.cd { background-position: -0px -302px; width: 16px; height: 16px; }
.chart-bar-link { background-position: -0px -318px; width: 16px; height: 16px; }
.cd-eject { background-position: -0px -334px; width: 16px; height: 16px; }
.application-tile-vertical { background-position: -0px -350px; width: 16px; height: 16px; }
.application-osx-terminal { background-position: -0px -366px; width: 16px; height: 16px; }
.cd-add { background-position: -0px -382px; width: 16px; height: 16px; }
.basket-edit { background-position: -0px -398px; width: 16px; height: 16px; }
.control-pause { background-position: -0px -414px; width: 16px; height: 16px; }
.brick-delete { background-position: -0px -430px; width: 16px; height: 16px; }
.arrow-join { background-position: -0px -446px; width: 16px; height: 16px; }
.arrow-down { background-position: -0px -462px; width: 16px; height: 16px; }
.comments-delete { background-position: -0px -478px; width: 16px; height: 16px; }
.coins { background-position: -0px -494px; width: 16px; height: 16px; }
.application-view-icons { background-position: -0px -510px; width: 16px; height: 16px; }
.chart-pie-add { background-position: -0px -526px; width: 16px; height: 16px; }
.chart-line-edit { background-position: -0px -542px; width: 16px; height: 16px; }
.bullet-red { background-position: -0px -558px; width: 16px; height: 16px; }
.control-equalizer { background-position: -0px -574px; width: 16px; height: 16px; }
.chart-curve-error { background-position: -0px -590px; width: 16px; height: 16px; }
.camera-link { background-position: -0px -606px; width: 16px; height: 16px; }
.chart-pie-error { background-position: -0px -622px; width: 16px; height: 16px; }
.color-swatch { background-position: -0px -638px; width: 16px; height: 16px; }
.contrast-decrease { background-position: -0px -654px; width: 16px; height: 16px; }
.book-edit { background-position: -0px -670px; width: 16px; height: 16px; }
.database-go { background-position: -0px -686px; width: 16px; height: 16px; }
.clock-play { background-position: -0px -702px; width: 16px; height: 16px; }
.bug-go { background-position: -0px -718px; width: 16px; height: 16px; }
.database-connect { background-position: -0px -734px; width: 16px; height: 16px; }
.cd-go { background-position: -0px -750px; width: 16px; height: 16px; }
.cd-edit { background-position: -0px -766px; width: 16px; height: 16px; }
.arrow-turn-right { background-position: -0px -782px; width: 16px; height: 16px; }
.award-star-add { background-position: -0px -798px; width: 16px; height: 16px; }
.arrow-refresh { background-position: -0px -814px; width: 16px; height: 16px; }
.chart-line-error { background-position: -0px -830px; width: 16px; height: 16px; }
.chart-curve-delete { background-position: -0px -846px; width: 16px; height: 16px; }
.cup-key { background-position: -0px -862px; width: 16px; height: 16px; }
.brick-add { background-position: -0px -878px; width: 16px; height: 16px; }
.arrow-rotate-anticlockwise { background-position: -0px -894px; width: 16px; height: 16px; }
.bell { background-position: -0px -910px; width: 16px; height: 16px; }
.car-delete { background-position: -0px -926px; width: 16px; height: 16px; }
.cog-edit { background-position: -0px -942px; width: 16px; height: 16px; }
.cup-delete { background-position: -0px -958px; width: 16px; height: 16px; }
.application-xp-terminal { background-position: -0px -974px; width: 16px; height: 16px; }
.brick { background-position: -0px -990px; width: 16px; height: 16px; }
.application-delete { background-position: -0px -1006px; width: 16px; height: 16px; }
.award-star-silver-3 { background-position: -0px -1022px; width: 16px; height: 16px; }
.chart-curve { background-position: -0px -1038px; width: 16px; height: 16px; }
.clock-pause { background-position: -0px -1054px; width: 16px; height: 16px; }
.cake { background-position: -0px -1070px; width: 16px; height: 16px; }
.bullet-toggle-plus { background-position: -0px -1086px; width: 16px; height: 16px; }
.control-repeat { background-position: -0px -1102px; width: 16px; height: 16px; }
.computer-go { background-position: -0px -1118px; width: 16px; height: 16px; }
.calculator-link { background-position: -0px -1134px; width: 16px; height: 16px; }
.database-gear { background-position: -0px -1150px; width: 16px; height: 16px; }
.chart-line-link { background-position: -0px -1166px; width: 16px; height: 16px; }
.application-get { background-position: -0px -1182px; width: 16px; height: 16px; }
.bullet-green { background-position: -0px -1198px; width: 16px; height: 16px; }
.calendar { background-position: -0px -1214px; width: 16px; height: 16px; }
.arrow-branch { background-position: -0px -1230px; width: 16px; height: 16px; }
.calendar-delete { background-position: -0px -1246px; width: 16px; height: 16px; }
.control-play-blue { background-position: -0px -1262px; width: 16px; height: 16px; }
.bullet-key { background-position: -0px -1278px; width: 16px; height: 16px; }
.application-add { background-position: -0px -1294px; width: 16px; height: 16px; }
.building-go { background-position: -0px -1310px; width: 16px; height: 16px; }
.arrow-inout { background-position: -0px -1326px; width: 16px; height: 16px; }
.bullet-orange { background-position: -0px -1342px; width: 16px; height: 16px; }
.bell-error { background-position: -0px -1358px; width: 16px; height: 16px; }
.calculator-add { background-position: -0px -1374px; width: 16px; height: 16px; }
.basket-error { background-position: -0px -1390px; width: 16px; height: 16px; }
.cart { background-position: -0px -1406px; width: 16px; height: 16px; }
.clock-delete { background-position: -0px -1422px; width: 16px; height: 16px; }
.calculator-delete { background-position: -0px -1438px; width: 16px; height: 16px; }
.camera-error { background-position: -0px -1454px; width: 16px; height: 16px; }
.cup { background-position: -0px -1470px; width: 16px; height: 16px; }
.bomb { background-position: -0px -1486px; width: 16px; height: 16px; }
.application-side-expand { background-position: -0px -1502px; width: 16px; height: 16px; }
.controller-add { background-position: -0px -1518px; width: 16px; height: 16px; }
.cog { background-position: -0px -1534px; width: 16px; height: 16px; }
.controller { background-position: -0px -1550px; width: 16px; height: 16px; }
.bug-delete { background-position: -0px -1566px; width: 16px; height: 16px; }
.award-star-gold-3 { background-position: -0px -1582px; width: 16px; height: 16px; }
.arrow-left { background-position: -0px -1598px; width: 16px; height: 16px; }
.book-key { background-position: -0px -1614px; width: 16px; height: 16px; }
.brick-go { background-position: -0px -1630px; width: 16px; height: 16px; }
.chart-curve-add { background-position: -0px -1646px; width: 16px; height: 16px; }
.database-error { background-position: -0px -1662px; width: 16px; height: 16px; }
.cd-delete { background-position: -0px -1678px; width: 16px; height: 16px; }
.contrast-high { background-position: -0px -1694px; width: 16px; height: 16px; }
.bug { background-position: -0px -1710px; width: 16px; height: 16px; }
.compress { background-position: -0px -1726px; width: 16px; height: 16px; }
.application-lightning { background-position: -0px -1742px; width: 16px; height: 16px; }
.clock-red { background-position: -0px -1758px; width: 16px; height: 16px; }
.application-side-boxes { background-position: -0px -1774px; width: 16px; height: 16px; }
.control-fastforward { background-position: -0px -1790px; width: 16px; height: 16px; }
.database-delete { background-position: -0px -1806px; width: 16px; height: 16px; }
.chart-organisation-add { background-position: -0px -1822px; width: 16px; height: 16px; }
.building-add { background-position: -0px -1838px; width: 16px; height: 16px; }
.control-pause-blue { background-position: -0px -1854px; width: 16px; height: 16px; }
.cd-burn { background-position: -0px -1870px; width: 16px; height: 16px; }
.arrow-out { background-position: -0px -1886px; width: 16px; height: 16px; }
.arrow-switch { background-position: -0px -1902px; width: 16px; height: 16px; }
.bug-error { background-position: -0px -1918px; width: 16px; height: 16px; }
.car-add { background-position: -0px -1934px; width: 16px; height: 16px; }
.bullet-disk { background-position: -0px -1950px; width: 16px; height: 16px; }
.css-valid { background-position: -0px -1966px; width: 16px; height: 16px; }
.application-split { background-position: -0px -1982px; width: 16px; height: 16px; }
.application-form-add { background-position: -0px -1998px; width: 16px; height: 16px; }
.bullet-picture { background-position: -0px -2014px; width: 16px; height: 16px; }
.application-view-gallery { background-position: -0px -2030px; width: 16px; height: 16px; }
.arrow-refresh-small { background-position: -0px -2046px; width: 16px; height: 16px; }
.css-go { background-position: -0px -2062px; width: 16px; height: 16px; }
.computer-add { background-position: -0px -2078px; width: 16px; height: 16px; }
.accept { background-position: -0px -2094px; width: 16px; height: 16px; }
.chart-curve-go { background-position: -0px -2110px; width: 16px; height: 16px; }
.bug-add { background-position: -0px -2126px; width: 16px; height: 16px; }
.chart-pie-link { background-position: -0px -2142px; width: 16px; height: 16px; }
.comments { background-position: -0px -2158px; width: 16px; height: 16px; }
.calendar-view-week { background-position: -0px -2174px; width: 16px; height: 16px; }
.chart-pie-delete { background-position: -0px -2190px; width: 16px; height: 16px; }
.controller-error { background-position: -0px -2206px; width: 16px; height: 16px; }
.cross { background-position: -0px -2222px; width: 16px; height: 16px; }
.application { background-position: -0px -2238px; width: 16px; height: 16px; }
.control-start { background-position: -0px -2254px; width: 16px; height: 16px; }
.arrow-rotate-clockwise { background-position: -0px -2270px; width: 16px; height: 16px; }
.basket { background-position: -0px -2286px; width: 16px; height: 16px; }
.briefcase { background-position: -0px -2302px; width: 16px; height: 16px; }
.application-side-list { background-position: -0px -2318px; width: 16px; height: 16px; }
.comment { background-position: -0px -2334px; width: 16px; height: 16px; }
.bullet-yellow { background-position: -0px -2350px; width: 16px; height: 16px; }
.cart-edit { background-position: -0px -2366px; width: 16px; height: 16px; }
.connect { background-position: -0px -2382px; width: 16px; height: 16px; }
.bullet-arrow-top { background-position: -0px -2398px; width: 16px; height: 16px; }
.calculator-error { background-position: -0px -2414px; width: 16px; height: 16px; }
.bullet-star { background-position: -0px -2430px; width: 16px; height: 16px; }
.book-previous { background-position: -0px -2446px; width: 16px; height: 16px; }
.coins-add { background-position: -0px -2462px; width: 16px; height: 16px; }
.award-star-gold-1 { background-position: -0px -2478px; width: 16px; height: 16px; }
.control-start-blue { background-position: -0px -2494px; width: 16px; height: 16px; }
.application-home { background-position: -0px -2510px; width: 16px; height: 16px; }
.asterisk-orange { background-position: -0px -2526px; width: 16px; height: 16px; }
.comment-delete { background-position: -0px -2542px; width: 16px; height: 16px; }
.clock-add { background-position: -0px -2558px; width: 16px; height: 16px; }
.chart-organisation { background-position: -0px -2574px; width: 16px; height: 16px; }
.cup-add { background-position: -0px -2590px; width: 16px; height: 16px; }
.css { background-position: -0px -2606px; width: 16px; height: 16px; }
.bullet-black { background-position: -0px -2622px; width: 16px; height: 16px; }
.award-star-bronze-1 { background-position: -0px -2638px; width: 16px; height: 16px; }
.cart-remove { background-position: -0px -2654px; width: 16px; height: 16px; }
.database { background-position: -0px -2670px; width: 16px; height: 16px; }
.clock-go { background-position: -0px -2686px; width: 16px; height: 16px; }
.control-end { background-position: -0px -2702px; width: 16px; height: 16px; }
.cog-error { background-position: -0px -2718px; width: 16px; height: 16px; }
.chart-bar-edit { background-position: -0px -2734px; width: 16px; height: 16px; }
.brick-error { background-position: -0px -2750px; width: 16px; height: 16px; }
.database-key { background-position: -0px -2766px; width: 16px; height: 16px; }
.bullet-purple { background-position: -0px -2798px; width: 16px; height: 16px; }
.calculator { background-position: -0px -2814px; width: 16px; height: 16px; }
.bell-delete { background-position: -0px -2830px; width: 16px; height: 16px; }
.book-open { background-position: -0px -2846px; width: 16px; height: 16px; }
.control-rewind-blue { background-position: -0px -2862px; width: 16px; height: 16px; }
.bullet-go { background-position: -0px -2878px; width: 16px; height: 16px; }
.brick-link { background-position: -0px -2894px; width: 16px; height: 16px; }
.bullet-arrow-bottom { background-position: -0px -2910px; width: 16px; height: 16px; }
.bin-empty { background-position: -0px -2926px; width: 16px; height: 16px; }
.basket-put { background-position: -0px -2942px; width: 16px; height: 16px; }
.camera-small { background-position: -0px -2958px; width: 16px; height: 16px; }
.bell-add { background-position: -0px -2974px; width: 16px; height: 16px; }
.building-error { background-position: -0px -2990px; width: 16px; height: 16px; }
.chart-line-delete { background-position: -0px -3006px; width: 16px; height: 16px; }
.cart-put { background-position: -0px -3022px; width: 16px; height: 16px; }
.application-side-contract { background-position: -0px -3038px; width: 16px; height: 16px; }
.bug-edit { background-position: -0px -3054px; width: 16px; height: 16px; }
.chart-bar { background-position: -0px -3070px; width: 16px; height: 16px; }
.application-osx { background-position: -0px -3086px; width: 16px; height: 16px; }
.clock-stop { background-position: -0px -3102px; width: 16px; height: 16px; }
.application-form-magnify { background-position: -0px -3118px; width: 16px; height: 16px; }
.application-view-columns { background-position: -0px -3134px; width: 16px; height: 16px; }
.attach { background-position: -0px -3150px; width: 16px; height: 16px; }
.book-next { background-position: -0px -3166px; width: 16px; height: 16px; }
.clock-link { background-position: -0px -3182px; width: 16px; height: 16px; }
.application-key { background-position: -0px -3198px; width: 16px; height: 16px; }
.camera { background-position: -0px -3214px; width: 16px; height: 16px; }
.cart-go { background-position: -0px -3230px; width: 16px; height: 16px; }
.cup-edit { background-position: -0px -3246px; width: 16px; height: 16px; }
.application-tile-horizontal { background-position: -0px -3262px; width: 16px; height: 16px; }
.award-star-bronze-2 { background-position: -0px -3278px; width: 16px; height: 16px; }
.bell-go { background-position: -0px -3294px; width: 16px; height: 16px; }
.application-double { background-position: -0px -3310px; width: 16px; height: 16px; }
.application-error { background-position: -0px -3326px; width: 16px; height: 16px; }
.calendar-add { background-position: -0px -3342px; width: 16px; height: 16px; }
.arrow-divide { background-position: -0px -3358px; width: 16px; height: 16px; }
.chart-curve-edit { background-position: -0px -3374px; width: 16px; height: 16px; }
.creditcards { background-position: -0px -3390px; width: 16px; height: 16px; }
.award-star-gold-2 { background-position: -0px -3406px; width: 16px; height: 16px; }
.comment-add { background-position: -0px -3422px; width: 16px; height: 16px; }
.control-stop { background-position: -0px -3438px; width: 16px; height: 16px; }
.cup-link { background-position: -0px -3454px; width: 16px; height: 16px; }
.application-link { background-position: -0px -3470px; width: 16px; height: 16px; }
.basket-delete { background-position: -0px -3486px; width: 16px; height: 16px; }
.control-eject { background-position: -0px -3502px; width: 16px; height: 16px; }
.control-eject-blue { background-position: -0px -3518px; width: 16px; height: 16px; }
.application-put { background-position: -0px -3534px; width: 16px; height: 16px; }
.computer-error { background-position: -0px -3550px; width: 16px; height: 16px; }
.bullet-arrow-down { background-position: -0px -3566px; width: 16px; height: 16px; }
.chart-curve-link { background-position: -0px -3582px; width: 16px; height: 16px; }
.computer-key { background-position: -0px -3598px; width: 16px; height: 16px; }
.cog-add { background-position: -0px -3614px; width: 16px; height: 16px; }
.database-edit { background-position: -0px -3630px; width: 16px; height: 16px; }
.award-star-silver-2 { background-position: -0px -3646px; width: 16px; height: 16px; }
.award-star-silver-1 { background-position: -0px -3662px; width: 16px; height: 16px; }
.cup-go { background-position: -0px -3678px; width: 16px; height: 16px; }
.bug-link { background-position: -0px -3694px; width: 16px; height: 16px; }
.clock-error { background-position: -0px -3710px; width: 16px; height: 16px; }
.cog-delete { background-position: -0px -3726px; width: 16px; height: 16px; }
.calendar-edit { background-position: -0px -3742px; width: 16px; height: 16px; }
.brick-edit { background-position: -0px -3758px; width: 16px; height: 16px; }
.book { background-position: -0px -3774px; width: 16px; height: 16px; }
.computer-edit { background-position: -0px -3790px; width: 16px; height: 16px; }
.application-view-detail { background-position: -0px -3806px; width: 16px; height: 16px; }
.chart-bar-delete { background-position: -0px -3822px; width: 16px; height: 16px; }
.clock { background-position: -0px -3838px; width: 16px; height: 16px; }
.chart-organisation-delete { background-position: -0px -3854px; width: 16px; height: 16px; }
.building-edit { background-position: -0px -3870px; width: 16px; height: 16px; }
.calendar-link { background-position: -0px -3886px; width: 16px; height: 16px; }
.contrast { background-position: -0px -3902px; width: 16px; height: 16px; }
.bullet-error { background-position: -0px -3918px; width: 16px; height: 16px; }
.bullet-delete { background-position: -0px -3934px; width: 16px; height: 16px; }
.application-go { background-position: -0px -3950px; width: 16px; height: 16px; }
.application-form-delete { background-position: -0px -3966px; width: 16px; height: 16px; }
.camera-delete { background-position: -0px -3982px; width: 16px; height: 16px; }
.computer-link { background-position: -0px -3998px; width: 16px; height: 16px; }
.database-add { background-position: -0px -4014px; width: 16px; height: 16px; }
.book-link { background-position: -0px -4030px; width: 16px; height: 16px; }
.chart-line-add { background-position: -0px -4046px; width: 16px; height: 16px; }
.css-add { background-position: -0px -4062px; width: 16px; height: 16px; }
.application-view-list { background-position: -0px -4078px; width: 16px; height: 16px; }
.award-star-delete { background-position: -0px -4094px; width: 16px; height: 16px; }
.arrow-redo { background-position: -0px -4110px; width: 16px; height: 16px; }
.cancel { background-position: -0px -4126px; width: 16px; height: 16px; }
.contrast-low { background-position: -0px -4142px; width: 16px; height: 16px; }
.cart-add { background-position: -0px -4158px; width: 16px; height: 16px; }
.camera-go { background-position: -0px -4174px; width: 16px; height: 16px; }
.control-equalizer-blue { background-position: -0px -4190px; width: 16px; height: 16px; }
.bullet-feed { background-position: -0px -4206px; width: 16px; height: 16px; }
.application-cascade { background-position: -0px -4222px; width: 16px; height: 16px; }
.bullet-pink { background-position: -0px -4238px; width: 16px; height: 16px; }
.basket-go { background-position: -0px -4254px; width: 16px; height: 16px; }
.book-add { background-position: -0px -4270px; width: 16px; height: 16px; }
.computer-delete { background-position: -0px -4286px; width: 16px; height: 16px; }
.asterisk-yellow { background-position: -0px -4302px; width: 16px; height: 16px; }
.bell-link { background-position: -0px -4318px; width: 16px; height: 16px; }
.basket-add { background-position: -0px -4334px; width: 16px; height: 16px; }
.chart-pie-edit { background-position: -0px -4350px; width: 16px; height: 16px; }
.css-delete { background-position: -0px -4366px; width: 16px; height: 16px; }
.application-form-edit { background-position: -0px -4382px; width: 16px; height: 16px; }
.application-view-tile { background-position: -0px -4398px; width: 16px; height: 16px; }
.add { background-position: -0px -4414px; width: 16px; height: 16px; }
.chart-bar-error { background-position: -0px -4430px; width: 16px; height: 16px; }
.application-xp { background-position: -0px -4446px; width: 16px; height: 16px; }
.arrow-undo { background-position: -0px -4462px; width: 16px; height: 16px; }
.basket-remove { background-position: -0px -4478px; width: 16px; height: 16px; }
.chart-bar-add { background-position: -0px -4494px; width: 16px; height: 16px; }
.award-star-bronze-3 { background-position: -0px -4510px; width: 16px; height: 16px; }
.bin-closed { background-position: -0px -4526px; width: 16px; height: 16px; }
.building-delete { background-position: -0px -4542px; width: 16px; height: 16px; }
.cart-delete { background-position: -0px -4558px; width: 16px; height: 16px; }
.clock-edit { background-position: -0px -4574px; width: 16px; height: 16px; }
.bullet-arrow-up { background-position: -0px -4590px; width: 16px; height: 16px; }
.cursor { background-position: -0px -4606px; width: 16px; height: 16px; }
.book-delete { background-position: -0px -4622px; width: 16px; height: 16px; }
.cup-error { background-position: -0px -4638px; width: 16px; height: 16px; }
.bullet-add { background-position: -0px -4654px; width: 16px; height: 16px; }
.control-rewind { background-position: -0px -4670px; width: 16px; height: 16px; }
.building-key { background-position: -0px -4686px; width: 16px; height: 16px; }
.computer { background-position: -0px -4702px; width: 16px; height: 16px; }
.bin { background-position: -0px -4718px; width: 16px; height: 16px; }
.book-go { background-position: -0px -4734px; width: 16px; height: 16px; }
.arrow-right { background-position: -0px -4750px; width: 16px; height: 16px; }
.control-fastforward-blue { background-position: -0px -4766px; width: 16px; height: 16px; }
.chart-line { background-position: -0px -4782px; width: 16px; height: 16px; }
.application-form { background-position: -0px -4798px; width: 16px; height: 16px; }
.cut { background-position: -0px -4814px; width: 16px; height: 16px; }
.arrow-turn-left { background-position: -0px -4830px; width: 16px; height: 16px; }
.application-side-tree { background-position: -0px -4846px; width: 16px; height: 16px; }
.contrast-increase { background-position: -0px -4862px; width: 16px; height: 16px; }
.calendar-view-month { background-position: -0px -4878px; width: 16px; height: 16px; }
.bullet-toggle-minus { background-position: -0px -4894px; width: 16px; height: 16px; }
.cog-go { background-position: -0px -4910px; width: 16px; height: 16px; }
.cut-red { background-position: -0px -4926px; width: 16px; height: 16px; }
.color-wheel { background-position: -0px -4942px; width: 16px; height: 16px; }
.control-repeat-blue { background-position: -0px -4958px; width: 16px; height: 16px; }
.book-error { background-position: -0px -4974px; width: 16px; height: 16px; }
.arrow-merge { background-position: -0px -4990px; width: 16px; height: 16px; }
.coins-delete { background-position: -0px -5006px; width: 16px; height: 16px; }
.application-edit { background-position: -0px -5022px; width: 16px; height: 16px; }
.calculator-edit { background-position: -0px -5038px; width: 16px; height: 16px; }
.building { background-position: -0px -5054px; width: 16px; height: 16px; }
.bullet-white { background-position: -0px -5070px; width: 16px; height: 16px; }
.comments-add { background-position: -0px -5086px; width: 16px; height: 16px; }
.bricks { background-position: -0px -5102px; width: 16px; height: 16px; }

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-07 22:35:21 By : deawx
 


 

No. 6



โพสกระทู้ ( 5,146 )
บทความ ( 26 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


อ้อ ลืมไป ... อันนี้บางไอคอนไม่แสดงนะครับ

ระบบของบอร์ดมันแบนคำว่า Address น่ะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-07 22:36:21 By : deawx
 


 

No. 7



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

อืมมม พอเข้าใจว่ามันเป็นแบบนี้ เพิ่งรู้วิธีครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-07 22:52:07 By : mr.win
 


 

No. 8



โพสกระทู้ ( 5,146 )
บทความ ( 26 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


อันนี้ผมดึงจากโปรแกรมผมมาทั้งกระบิ เลยครับคุณวิน ฮา ๆ อาจจะตาลาย แต่ใช้ได้ครับ ไม่ต้องเก็บรูปเยอะ เก็บภาพเดียว ใช้ css เข้ามาจัดการ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-07 23:08:08 By : deawx
 


 

No. 9



โพสกระทู้ ( 3,748 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

ง่ะพี่เดี่ยวตัดหน้า ว่าแต่โค๊ดเยอะมาก ผมเขียนใช้เองนิดเดียวเพราะว่ารูปใช้แค่ 2 รูปเท่านั้น แต่ยิ่งรูปเยอะโค๊ด css ก็เยอะตามนั้นแหละครับ
งั้นผมคงไม่ต้องโพสต่อนะคับ ขอบคุณพี่เดี่ยวมากครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-08 08:35:10 By : Dragons_first
 


 

No. 10



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

ตอบความคิดเห็นที่ : 9 เขียนโดย : Dragons_first เมื่อวันที่ 2012-06-08 08:35:10
รายละเอียดของการตอบ ::
ลองเอามาดูก็ได้ครับ จะได้แชร์กันครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-08 08:50:30 By : mr.win
 


 

No. 11



โพสกระทู้ ( 3,748 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 10 เขียนโดย : mr.win เมื่อวันที่ 2012-06-08 08:50:30
รายละเอียดของการตอบ ::
ได้ครับ เด๋วจัดให้ครับ แบบง่ายสุดๆ


ก่อนอื่นให้เรียงภาพ จะแนวตั้งหรือแนวนอนก็ได้ครับ แล้วแต่ถนัด ทำใน Photoshop แล้ว save เป็น .PNG นะครับ

อันนี้ที่อยู่รูป
sprite.png sprite.png

อันนี้ .html+css Sprite

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spite Image by Aon Kung</title>
<style>
div {
	background:url(sprite.png);
	background-position: -0px -0px; width: 20px; height: 19px;
}
#div:hover{background-position: -0px -19px; width: 20px; height: 19px;}
</style>
</head>

<body>
<div id="div">&nbsp;</div>
</body>
</html>




ประวัติการแก้ไข
2012-06-08 09:50:25
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-08 09:49:17 By : Dragons_first
 


 

No. 12



โพสกระทู้ ( 189 )
บทความ ( 0 )



สถานะออฟไลน์


พิกัสต้องแปะ ใช่ไหมครับ


ขอบคุณมากครับเป้นความรู้อย่างมาก


ประวัติการแก้ไข
2012-06-11 09:44:44
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-11 09:44:02 By : okboou
 


 

No. 13

Guest


background: url(xxx.png) จุดเริ่มต้นแกนX จุดเริ่มต้นแกนY no-repeat; ครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-06-15 13:26:18 By : Pine
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามการเรียกใช้งาน CSS IconSet ที่อยู่ในรูปเดียว(ไฟล์ที่เป็น png) ดึงออกมายังไงครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 02
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่