Group Blog
 
 
พฤษภาคม 2551
 
 123
45678910
11121314151617
18192021222324
25262728293031
 
7 พฤษภาคม 2551
 
All Blogs
 
ใส่รูป












Animated Photo Graphics

Animated Photo Graphics


การใส่รูป

ใส่รูปแบบธรรมดา
โค้ด= <*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 : 608 Pageviews.

 
ขอบคุณนะคะ


โดย: Picike วันที่: 7 พฤษภาคม 2551 เวลา:1:26:36 น.  

 
ขอบคุณมากค่ะ


โดย: โอน่าจอมซ่าส์ วันที่: 7 พฤษภาคม 2551 เวลา:13:15:47 น.  

 
ขอบคุณค่า..คุณเจี๊ยบ...


โดย: ลิตช์ (Litchi ) วันที่: 7 พฤษภาคม 2551 เวลา:22:45:37 น.  

 


โดย: Kingkimson วันที่: 16 กุมภาพันธ์ 2553 เวลา:23:45:23 น.  

ชื่อ :
Comment :
  *ใช้ code html ตกแต่งข้อความได้เฉพาะสมาชิก
 

kunyawat
Location :


[ดู Profile ทั้งหมด]

ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 1 คน [?]




Friends' blogs
[Add kunyawat's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.