ตั้ง iframe ให้ไร้ขอบ ไร้ scroll by plug.in

28
Jan
0

Firefox และอื่นๆ

style = “border:0px;overflow:hidden;”

IE

border=0 scrolling=”no” frameborder=”0″

สรุปแล้วรวมได้ดังนี้

<iframe src=”" border=0 scrolling=”no” frameborder=”0″ style = “border:0px;overflow:hidden;”></iframe>

ทำRollover Image แบบไม่ง้อ javascript by akara

31
Aug
1

ปกติแล้วเวลาที่เราจะทำ rollover image เพื่อมาใช้ในเวปไซต์ของเราเนี่ย

เราก็มักจะใช้ javascript ในการทำใช่ไหมครับ

(ที่บอกว่าส่วนใหญ่ใช้วิธีนี้เพราัะว่ามันติดมากับโปรแกรม Dreamweaver ครับ)

ซึ่งจริงๆแล้วเราไม่จำเป็นต้องใช้วิธีนั้นเลยครับ ใช้แค่ CSS อย่างเดียวก็พอแล้ว

วิธีการก็ไม่ยากเลยครับ

รูปที่ใช้ button_1.gif ขนาด100×50px

รูปที่ใช้ตอน rollover button_1_over.gif ขนาดเท่ากัน

จากนั้น อันนี้คือส่วนของ css ครับ

a.image{

display:block;

width:100px;

height:50px;

background:url(’button_1.gif’) no-repeat;

}

a.image:hover{

background:url(’button_1_over.gif’) no-repeat;

}

แล้ว html เราก็แค่ใส่ class ให้ tag a เท่านั้นเองครับ

ตัวอย่าง

เห็นไหมครับไม่ยากเลย….

แต่เดี๋ยวก่อน! ผมยังมีของเด็ดกว่านี้อีก

คือ การใช้รูปเพียงรูปเดียวในการทำ rollover image

นี่คือไฟล์รูปครับ ลองคลิกขวาดูได้ครับ จะเห็นว่าเป็นรูปเดียว

ที่มีขนาด 100×105px

จากนั้นเรามาเปลี่ยน css กันซักหน่อยครับ เป็น

a.image_single{

display:block;

width:100px;

height:50px;

background:url(’button_1_single.gif’) 0 0 no-repeat;

}

a.image_single:hover{

background:url(’button_1_single.gif’) 0 -55px no-repeat;

}

ตัวอย่าง

รูปที่ทำจากวิธีนี้จะเป็นรูปด้านล่างนะครับ จะเห็นได้ว่าไม่แตกต่างกันเลย ประหยัดไปไฟล์นึงด้วยนะเอ้อ

ดาว์นโหลดตัวอย่างทั้งหมด

edit @ 31 Aug 2009 19:30:15 by Akara_gat

HTML+CSS Tools by akara

1
Jul
0

ก็ขอ re-use ของเก่านิดนึงละกันนะครับ
พอดีได้มีโอกาสไปพูดในงาน comkucamp#1 ซึ่งเป็นกิจกรรมของ
ชุมนุมนิสิตภาควิชาวิศวกรรมคอมพิวเตอร์ มหาวิทยาลัยเกษตรศาสตร์
รูปแบบงานก็คล้ายๆ barcamp นั่นแหละครับ แต่เป็นเวอร์ชั่น ม.เกษตร

หัวข้อที่ผมเอาไปพูดก็คือ Web design Tips & Technique 1.5
(ที่ต้องเป็น1.5 เพราะว่าทำ2ไม่ทัน ในslideเป็นของครั้งแรกที่พูดใน barcampbkk2 ซะครึ่งนึง)

ทีนี้ในslideก็จะมีหัวข้อนึงน่ะครับ ที่เกี่ยวกับเครื่องมือในการทำงานกับhtmlและcss
ซึ่งเดี๋ยวผมจะพูดต่อไปนี่แหละครับ ว่ามันมีเครื่องมืออะไรที่น่าใช้บ้าง
(ตกลงที่แพล่มไปตั้งนานนี่ไม่ได้เกี่ยวเลยใช่ไหม…. -_-”)

ก่อนอื่นเลยครับ ผมขอแบ่งเครื่องมือออกเป็น3ประเภทหลักๆคือ

Png Color Problem in IE by akara

29
May
3

ถ้าพูดถึงปัญหา png ในIEแล้ว ปกติทุกๆคนก็คงนึกว่า เป็นเรื่อง png ไม่แสดงtransparencyใน ie6 ใช่ไหมครับ

แต่คราวนี้ผมจะมาพูดถึงอีกปัญหานึงครับ ไม่ใช่ปัญหาธรรมดาๆอย่างที่กล่าวมา

ก็ไม่รู้จะอธิบายเป็นคำพูดยังให้เข้าใจง่ายๆยังไงอ่ะนะครับ ลองไปดูจากตัวอย่างเลยดีกว่า

<div style=”background:#567ED4;padding:20px;”>
<img src=”color_code_567ED4.png”>
</div>

นี่คือโค้ดHTMLที่ผมกำหนดให้พื้นหลังของ div มีค่าสีเป็น #567ED4

ซึ่งเป็นสีเดียวกับรูป color_code_567ED4.png

แล้วลองมาดูผลที่ไ่ด้ใน firefox และ ie ครับ

จะเห็นได้ว่าผลที่แสดงออกมาบน ie นั้น สีของรูป เพี้ยนไปจากเดิมครับ

ซึ่งปัญหานี้เท่าที่ผมค้นหามา รู้สึกว่าจะเจอแต่บน ie เท่านั้น browserอื่นๆ ไม่มีปัญหาอะไร

ส่วนวิธีแก้น่ะหรอครับ เหอะๆๆๆ

ผมก็ใช้วิธีโง่ๆเอาด้วยการใช้รูป png ที่เป็นสีที่ต้องการนั้นแหละไปใส่เป็น background แทน