CSS Background image link

ในการทำให้รูปภาพสามารถ link ได้ ถ้าเขียนโดย xhtml ก็จะเขียนในลักษณะนี้

1

<a href="urllink.html"><img src="logo.jpg" alt="" border="0" /></a>

แต่ถ้าเราเขียนในรูปแบบของ css เรามักจะกำหนดรูปภาพไปอยู่ในส่วนของ css
ซึ่งทำให้เราไม่ได้เขียนให้รูปภาพ link ได้ในรูปแบบเดิมได้ (รูปแบบ xhtml)
แต่ถ้าจะให้รูปภาพ สามารถ link ได้ ขอแนะนำ 1 วิธีการ โดยทำตามนี้

ส่วนของ css

1
2
3
4
5
6
7
8
9
10

 <style type="text/css">
#logolink {
display: block;
height: 100px;
width: 200px;
background-image: url(logo.jpg);
}
 
#bglink span { display: none; }
</style>

ส่วนวิธีเรียกใช้ก็คือ

1
2
3

<p id="logolink">
<a id="bglink" href="urllink.html"><span>Click my logo</span></a>
</p>

ขอขอบคุณ

http://www.webdeveloper.com/forum/showthread.php?t=188503

หวังว่าคงทำกันได้นะครับ

สั่งพิมพ์เอกสารเป็นหน้าๆ โดยใช้ CSS ควบคุม

ในบางครั้งเราต้องการเขียนโปรแกรมเพื่อพิมพ์เอกสาร แต่เราก็ต้องมาทดสอบในการพิมพ์ว่าต้อง
เว้นวรรคมากแค่ไหน ถึงจะไปหน้าใหม่ แต่วิธีที่จะบอกทำให้เราสามารถ ควบคุมการพิมพ์ของเรา
ได้ดีขึ้น ได้สะดวกมากขึ้น

ส่วนของ CSS

1
2
3
4
5
6
7
8
9
10

<style type="text/css">
<!--
@media print {
div.page  {
height: 100%;
margin: 0px 0px 0px 0px;
  }
}
-->
</style>

ส่วนของ Html

1
2

<div class="page">aa</div>
<div class="page">bb</div>

จากตัวอย่างจะเห็นว่า ใน CSS มีการเรียกใช้ Media Print คือการสั่งให้จัดการกับสื่อหรือ
Output ที่เป็น Printer ซึ่งเรากำหนดให้มีผลกับช่วง tag <div>
เมื่อคุณลองสั่งรัน Script แล้วสั่งพิมพ์ออกมา ก็จะเห็นว่า Printer
จะพิมพ์ออกมา 2 หน้า โดยหน้าแรกจะเป็น aa หน้า 2 จะเป็น bb

อ้างอิงจาก www.siamdev.com

Light Box JS v2.0

เวปที่แนะนำการแสดงผลรูปภาพแบบใหม่
เป็นเวปแรก ๆ ที่ให้แสดงผลแบบนี้ สมัยนี้จึงเรียกการแสดงผลลักษณะนี้
ว่า แสดงผลแบบ lightbox ถึงแม้ว่าจะไม่ได้ใช้ lightbox ก็ตาม

เหอะๆๆ

http://www.huddletogether.com/projects/lightbox2

น่าปลื้มใจแทน lightbox จริง ๆ ที่มีคน copy idea เหอะ ๆ

css Zen Garden

เป็นเวปที่ทำให้เห็นความสามารถของ css มากกว่าเดิม
เพราะเวปนี้มีแค่ ข้อความแบบเดียว แต่เปลี่ยนแค่ css ก็สามารถเปลี่ยนรูปลักษณ์ได้

http://www.csszengarden.com

เวปนี้ เป็นเวปแรงบันดาลใจผม ในการศึกษา css เลยนะเนี่ย