ทำ popup แสดงรูปภาพ เนื่องในโอกาสสำคัญๆ

 

การทำ 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 ทั้งหมดนำไปวางในช่อง ข้อความด้านข้าง

 

[อ้อยควั้น]

 อ้อยควั้น

• สวัสดีค่ะ
• แวะตามมาขอบคุณค่ะ
• และมาสวัสดีปีใหม่ด้วยค่ะ
• ขอให้มีความสุข สดชื่น สมหวัง และโชคดีปีใหม่นะค่ะ
• อ้อ ! อยากบอกว่า...เข้ามาแล้วไม่ผิดหวังค่ะ
• ได้ความรู้กลับไปด้วย
• ขอบคุณนะค่ะ

[ครูเชียร]

 
ขอบคุณน้อง อ้อยควั้น มากครับ ที่แวะมาเยี่ยมทักทายกัน

[บรรจง ผอ.ไอซีที]

ขอบคุณ semicon นำมาใช้แล้วครับ ตามดูในแพลนเนต http://gotoknow.org/planet/16ictlabschool

[อ้อยควั้น_ชายแดนใต้]

• แวะมาสวัสดีปีใหม่ไทยค่ะ
• ปีใหม่ไทยปีนี้...ขอให้มีความสุข สดชื่น สมหวัง และมีสุขภาพแข็งแรงนะค่ะ

ปิดหน้าต่างนี้ [X] 

[ณัฏฐกรณ์ ปะพาน]

สุดยอดครับพี่น้อง

[ยศวดี]

อยากทำpop up เป็นบ้างนะช่วยแนะนำการทำให้ทีอยากศึกษาวิธีการทำด้วยมีโปรแกรมไหม