Bloggang.com : kunyawat : ใส่รูป

ใส่รูป

การใส่รูป

ใส่รูปแบบธรรมดา
โค้ด= <*img src = …..ใส่ URL ของรูปนั้นๆ….>
จะได้รูปออกมาตามตัวอย่าง

ถ้าจะให้รูปเรียงเป็นแถวต่อกันไปเรื่อยๆ ให้ใส่คำสั่งเรียงต่อไปเรื่อยๆตามจำนวนรูป

ถ้าจะให้รูปเรียงเป็นแถวต่อกันไปเรื่อยๆ ให้ใส่คำสั่งเรียงต่อไปเรื่อยๆตามจำนวนรูป
<*img src = …..ใส่ URL ของรูปนั้นๆ….><*img src = …..ใส่ URL ของรูปนั้นๆ….><*img src = …..ใส่ URL ของรูปนั้นๆ….>
จะได้รูปออกมาตามตัวอย่าง

จะได้รูปออกมาตามตัวอย่าง

ใส่ให้อยู่ตรงกลางหน้า โค้ด= <*center><*img src=http:XXX><*/center>
จะได้รูปออกมาตามตัวอย่าง

รูปใหญ่เกินไป ให้ใส่ขนาดตัวเลขที่ต้องการลดขนาด
โค้ด=<*center><*img src=http:XXX width=ใส่เลขของขนาดที่ต้องการ height=ใส่เลขของขนาดที่ต้องการ><*/center>
จะได้รูปออกมาตามตัวอย่าง

ใส่รูปอยู่ด้านขวาพร้อมข้อเขียนอยู่ด้านซ้ายมือของรูป
โค้ด=<*table border="0"><*tbody><*tr><*td valign="top"><*p>เขียนข้อความที่ต้องการ <*/p><*/td><*td valign="top"><*img src="..ใส่..//..ของรูป.." border="0"><*/td><*/tr><*/tbody><*/table>
จะได้รูปออกมาตามตัวอย่าง

มธุรสวาจาไม่ต้องเสียเงินตรา แต่ผลลัพธ์ออกมามากล้น

รูปอยู่บนด้านซ้ายพร้อมข้อเขียนอยู่ด้านขวามือของรูป
โค้ด=<*table border="0"><*tbody><*tr><*td valign="top"><*img src="urlของรูปที่จะใส่" border="0" /><*/td><*td valign="top"><*p>ข้อความที่ต้องการใส่<*/p><*/td><*/tr><*/tbody><*/table>
จะได้รูปออกมาตามตัวอย่าง

มธุรสวาจาไม่ต้องเสียเงินตรา แต่ผลลัพธ์ออกมามากล้น

ทำให้รูปเลื่อนได้
โค้ด=<*marquee><*img src=urlของรูปที่จะใส่> <*/marquee>
จะได้รูปออกมาตามตัวอย่าง

ใส่กรอบให้รูป

โค้ดใส่กรอบให้รูป
โค้ด=<*table border="3" cellspacing="1" style="border: 3px solid ใส่โค้ดสี"><*tbody><*tr><*td><*img src="..ใส่..//..ของรูป.." border="0" /><*/td><*/tr><*/tbody><*/table>
จะได้รูปออกมาตามตัวอย่าง

กรอบรูปแบบเรียบง่ายแบบต่างๆ

กรอบเส้นธรรมดา

<*fieldset style="border:5px solid โค้ดสี; padding:10;">
<*center>ข้อความหรือรูปที่ต้องการ<*/center>
<*/fieldset>
5px=ความหนาของกรอบ เปลี่ยนที่ตัวเลข
padding10=ความสูงของกรอบจากตัวหนังสือ เปลี่ยนที่ตัวเลข

กรอบเส้นคู่

<*fieldset style="border:5px double โค้ดสี; padding:10;">
<*center>ข้อความหรือรูปที่ต้องการ<*/center>
<*/fieldset>

กรอบเส้นคู่ด้านบนบาง ด้านล่างหนา

<*fieldset style="border:5px groove โค้ดสี; padding:10;">
<*center>ข้อความหรือรูปที่ต้องการ<*/center>
<*/fieldset>

กรอบเส้นคู่ด้านบนหนา ด้านล่างบาง

<*fieldset style="border:5px ridge โค้ดสี; padding:10;">
<*center>ข้อความหรือรูปที่ต้องการ<*/center>
<*/fieldset>

กรอบเส้นประ

<*fieldset style="border:5px dashed โค้ดสี; padding:10;">
<*center>ข้อความหรือรูปที่ต้องการ<*/center>
<*/fieldset>

กรอบจุด

<*fieldset style="border:5px dotted โค้ดสี; padding:10;">
<*center>ข้อความหรือรูปที่ต้องการ<*/center>
<*/fieldset>

กรอบแบบ inset

<*fieldset style="border:5px inset โค้ดสี; padding:10;">
<*center>ข้อความหรือรูปที่ต้องการ<*/center>
<*/fieldset>

กรอบแบบoutset

<*fieldset style="border:5px outset โค้ดสี; padding:10;">
<*center>ข้อความหรือรูปที่ต้องการ<*/center>
<*/fieldset>

Fieldset Box คือกรอบที่ใส่รอบรายละเอียดของข้อความที่เขียนอยู่ส่วนกลางของบล็อก)
Fieldset Box
<*fieldset>ใส่รายละเอียดที่นี่<*/fieldset>

Fieldset Box
<*fieldset><*center>ข้อความหรือรูปที่ต้องการ<*/center><*/fieldset>

โค้ดทำกรอบสองชั้นแบบง่ายโดยใช้โค้ดชนิดของกรอบจากข้างบน
<*table style="border: ridge 5px #ffcccc" width=450><*tbody><*tr><*td align="center" valign="middle" style="border: 2px ridge #ffcccc;padding:10px">ใส่ข้อความ<*/td><*/tr><*/tbody><*/table>

ridge=ชนิดของกรอบที่สามารถเปลี่ยนได้ มี solid ,dotted ,dashed ,double เป็นต้น
5px=ขนาดของกรอบ
#ffcccc=โค้ดสีที่ต้องการ

โค้ดทำกรอบและใส่BGในกรอบที่มีสีเดียวกัน
<*table style="background-color: #66CDAA" cellspacing=7 cellpadding=7 width=450><*tbody><*tr><*td style="border-right:4px solid;border-top:4px solid;border-left:4px solid;border-bottom:4px solid">ใส่ข้อความที่ต้องการเขียน<*/td><*/tr><*/tbody><*/table>

#66CDAA=โค้ดสีที่ต้องการ

โค้ดกรอบที่มีรูปอยู่ในกรอบด้านบนเละมี scrollbar อยู่ด้านขวามือลอกคุณkungguenter มาอีกที่ยังไม่ได้ลองทำดู
<*table height=468 cellSpacing=0 cellPadding=0 width=325 background= //img529.imageshack.us/img529/2008/99012975tq3.jpg border=0> <*tbody>
<*tr><*td width=90 height=85><*/td><*td width=240 height=85><*/td><*td width=120 height=237 rowSpan=2><*/td><*/tr>
<*tr><*td width=100 height=152> <*/td><*td width=230 height=152><*/td><*/tr><*tr><*td width=90 height=58>
<*DIV style="scrollbar-face-color: # ff6699; left: 306px; float: right; overflow-x: hidden; overflow: scroll; width: 314px; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #ffffff; scrollbar-base-color: #ffffff; HEIGHT: 130px">
พิมพ์ข้อความที่นี่ค่ะ
<*/DIV><*/td><*td width=230 height=58><*/td><*td width=120 height=58><*/td><*/tr><*/tbody>

//img529.imageshack.us/img529/2008/99012975tq3.jpg =เปลี่ยนได้
# ff6699=โค้ดสีscrollbar

โค้ดใส่รูปให้รูปอยู่กลางบล็อก
<*style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position:center;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}<*/style>

โค้ดใส่รูปให้รูปอยู่มุมซ้ายบนของบล็อก
<*style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: left top;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}<*/style>

โค้ดใส่รูปให้รูปอยู่กลางบล็อกด้านซ้าย
<*style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: left center;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}<*/style>

โค้ดใส่รูปให้รูปอยู่มุมซ้ายล่างของบล็อก
<*style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: left bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}<*/style>

โค้ดใส่รูปให้รูปอยู่มุมขวาบนของบล็อก
<*style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: right top;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}<*/style>

โค้ดใส่รูปให้รูปอยู่มุมขวากลางบล็อก
<*style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: right center;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}<*/style>

โค้ดใส่รูปให้รูปอยู่มุมขวาล่างของบล็อก
<*style>Body {background-image:url("……ใส่ URLของภาพที่จะใช้……");background-position: right bottom;background-repeat: no-repeat;background-attachment: fixed;background-color: "……ใส่สีพื้นหลัง……";}<*/style>

โค้ดใส่รูปให้รูปอยู่เรียงแนวยาวด้านบนของบล็อก
<*style>body {background-image:url("……ใส่ URLของภาพที่จะใช้……") ;background-repeat : repeat-x ;background-attachment : fixed; background-color: "……ใส่สีพื้นหลัง……";}<*/style>

โค้ดใส่รูป แบบ กำหนดความกว้าง x ความยาว
<*img src="ใส่..//..ของรูป" border="0" width="31" height="19" />

ใส่ข้อความให้กับรูป
<*img src="ใส่..//..ของรูป" border="0" alt="เขียนข้อความที่เราต้องการ">

Create Date : 07 พฤษภาคม 2551

Last Update : 7 พฤษภาคม 2551 0:33:21 น.

4 comments

Counter : 905 Pageviews.