การทำ popup แสดงรูปภาพ มีส่วนประกอบใหญ่ๆ 2 ส่วน คือ ส่วนของสคริปควบคุม popup และส่วนของการแสดงผล ซึ่งมีรายละเอียดดังนี้ครับ

1. ส่วนควบคุม popup

<SCRIPT language=JavaScript type=text/JavaScript>
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
</SCRIPT>

<STYLE TYPE="text/css">
#floater {
z-index:0; visibility: visible; position: absolute
}
</STYLE>

2. ส่วนแสดงผล

  • กำหนดตำแหน่งของ popup
    right: 0px;  หมายถึง ห่างจากขอบด้านขวา 0 พิกเซล
    top: 0px;  หมายถึง ห่างจากขอบด้านบน 0 พิกเซล
    left: 0px;  หมายถึง ห่างจากขอบด้านซ้าย 0 พิกเซล
    bottom: 0px;  หมายถึง ห่างจากขอบด้านล่าง 0 พิกเซล
    เช่น ถ้าต้องการไว้ห่างจากขอบด้านขวา 10 พิกเซล และห่างจากขอบค้านบน 170 พิกเซล
    <div id=floater style="position:; visibility:show; right:10px; top:170px;  z-index:0;">
  • กำหนดตำแหน่งของข้อความ
    <div align="กำหนดตำแหน่ง">
    align="left"  ข้อความชิดด้านซ้ายของภาพ
    align="right"  ข้อความชิดด้านขวาของภาพ
    เช่น  <div align="left">
  • กำหนดสีของข้อความ
    <font color="สีที่ต้องการ">
    color="yellow"  ตัวอักษรเป็นสีเหลือง
    เช่น <font color="yellow">
  • กำหนดที่อยู่ URL ของภาพที่ต้องการแสดง
    <img src="URL" border="0"/>
    border=0 ไม่แสดงเส้นรอบรูป
    border=1  แสดงเส้นรอบรูป
    เช่น <img src="/file/semicon/newyear.gif" border="0">


ตัวอย่าง Code ใช้งานจริง

<!--Start Popup-->

<SCRIPT language=JavaScript type=text/JavaScript>
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
</SCRIPT>

<STYLE TYPE="text/css">
#floater {
z-index:0; visibility: visible; position: absolute
}
</STYLE>

<div id=floater style="position:; visibility:show; right:10px; top:10px;  z-index:0;">
<div align="left">
<a href="#" onClick="overlayclose('floater'); return false">
<font color="yellow"><b>ปิดหน้าต่างนี้&nbsp;[X]&nbsp;</b></font>
</a>
</div>
<img src="/file/semicon/newyear.gif" border="0">
</div>

<!--End Popup-->

 การนำไปใช้

เข้าไปที่เมนู   เมนูสำหรับ..(ชื่อท่าน).. => บล็อก => ..(ชื่อบล็อก).. => แก้ไขบล็อก

Copy Code ทั้งหมดนำไปวางในช่อง ข้อความด้านข้าง