เว็บสไตล์ชีท
CSS ทิป & ทริค

รูปภาพ & การใส่คำบรรยายภาพ

HTML ไม่มีี element ที่ใช้เพิ่มคำบรรยายใต้ภาพ ซึ่่งครั้งนึงเคยมีแนวคิดที่จะเพิ่มความสามารถนี้ใน (see HTML3), แต่จนถึง HTML4 ความสามารถนี้ก็ยังไม่มีให้ใช้้ เราจะประยุกต์หาวิธีการใช้แทน element ดังนี้:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>แบบจำลองย่อขนาดหอ
    Eiffel tower ในกรุง Parc Mini-France
</div>

ในตอนนี้ เราจะใช้ style sheet ในการกำหนด class "figure" เพื่อ กำหนด format ให้รูปภาพตามที่ท่านต้องการ เช่น เมื่อต้องการให้รูปลอยอยู่ทางขวา กินพื้นที่ 25 % ของความกว้างย่อหน้าทั้งหมด สามารถทำได้โดย กำหนดใน style sheet ดังนี้:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

ซึ่งตามจริงแล้ว ท่านสามารถใช้เพียงสองบรรทัดแรกเท่านั้นก็เพียงพอ (float and width) บรรทัดที่เหลือ เป็นการตกแต่งเพื่อให้สวยงามเท่านั้น

การย่อขยายรูปภาพ

ปัญหาหนึ่งที่เรามักพบกัน คือ รูปที่ใช้มีความกว้างเกินไป ตัวอย่างข้างบนจะเห็นว่ารูปกว้าง 136 px และ DIV มีขนาด 25 % ของย่อหน้าทั้งหมด ดังนั้นเวลาที่รูปกว้างกว่า tag DIV จะเกิดปัญหารูปล้นออกจาก tag DIV!

การแก้ไขปัญหานี้ทำได้โดย ถ้าท่านรู้ค่าความกว้างของทุกรูปในเอกสาร ท่านสามารถตั้งค่าความกว้างต่ำสุดใน DIV ได้ ดังนี้::

DIV.figure {
  min-width: 150px;
}

อีกวิธีคือใช้การย่อขยายรูปภาพ ซึ่งเราแสดงไว้ในรูปด้านขวา เมื่อท่านเปิดหน้าต่างกว้าง ท่านอาจเห็นว่าภาพ JPEG ไม่ย่อขยายได้ดีนัก แต่ถ้าภาพของท่านเป็น แผนภูมิ หรือกราฟใน format SVG แล้วละก็ การย่อขยายจะทำงานได้อย่างดีเยี่ยมเลยทีเดียว ตัวอย่างโค้ดที่ใ้ช้เป็น ดังนี้:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez และป้อมยามเย็น
</div>

Style sheet ที่ใช้ คือ:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

จะเห็นว่ามีการเพิ่มโค้ดแค่บรรทัดสุดท้ายเท่านั้น เพื่อทำให้ภาพที่อยู่ใน tag DIV กว้างเต็มพื้นที่ตลอดเวลา(บริเวณภายในขอบและ padding)

การใส่คำบรรยายเหนือภาพ

ท่านสามารถใส่คำบรรยายเหนือภาพได้ โดยกำหนดบริเวณภาพเป็นตาราง โดยเพิ่มโค้ดจาก style sheet ดังนี้:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

เครื่องหมาย '+' ใช้บอกว่ากฎใน style sheet ข้างต้นจะใช้เมื่อถึง element P ที่ปรากฎตามหลัง element P ซึ่งในที่นี้คือ P ที่สอง (ที่เป็นคำบรรยายภาพ) ที่ถัดจาก P ของภาพนั่นเอง

(เทคนิคนี้อาจมี bug ใน browser เก่าๆ โดยเฉพาะเมื่อใช้ร่วมกับวิธีีการย่อขยายภาพที่อธิบายไว้ด้านบน ดังภาพประกอบด้านขวา)

รูปภาพในภาษา XHTML

ข้อเสนอการเพิ่มรูปแบบคำสั่งการทำงานในปัจจุบัน (มกราคม 2003) XHTML2 ได้ระบุ element CAPTION ให้ใช้งานแล้ว โดยจะเรียกใช้ร่วมกับ OBJECT. ถ้าข้อเสนอดังกล่าวได้รับอนุมัติ ความจำเป็นในการใช้ DIV และ CLASS จะหมดไป และใน XHTML2, ท่านสามารถเขียนโค้ดด้านล่างแทนได้:

<object data="eiffel.jpg">
  <caption>แบบจำลองหอ Eiffel ในกรุง Parc
    Mini-France</caption>
</object>