Bloggang.com : ยายกุ๊กไ่ก่ : ห้องเก็บโค้ด 3 : การใส่รูป

ห้องเก็บโค้ด 3 : การใส่รูป

การใส่รูป

อย่าลืมเอาเครื่องหมายนี้ * ออกด้วยทุกครั้ง

ให้รูปไม่มีกรอบ
<*style>img {border: none;} <*/style>

ใส่รูปแบบธรรมดา
<*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>& lt;*/tr><*/tbody><*/table>
จะได้รูปออกมาตามตัวอย่าง

ทำวันนี้ให้ดีที่สุด

ใส่รูปหรือข้อความให้เคลื่อนที่ (Marquee)

การเคลื่อนที่มีหลายแบบ
เปลี่ยนทิศทางการเคลื่อนที่ ที่ direction และเปลี่ยนความเร็วที่ scrollamount

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

ทำให้ข้อความเลื่อนได้
<*marquee>ใส่ข้อความตรงนี้<*/marquee>

Have a nice day

<*marquee direction=right scrollamount=1>ใส่ข้อความตรงนี้ <*/marquee>

Have a nice day

ทำให้รูปเลื่อนได้
<*marquee><*img src=XXX><*/marquee>

<*marquee direction=right scrollamount=1><*img src=XXX><*/marquee>

ให้รูปวิ่งพร้อมข้อความ
<*marquee direction=right scrollamount=2><*img src=XXX> ให้รูปวิ่งพร้อมข้อความ<*/marquee>

Have a nice day

<*marquee width=350 height=250 direction=up scrollamount=1><*center>ใส่ข้อความและรูปที่นี<*/center><*/marquee>

Have a nice day

โค้ดทำกรอบสองชั้นแบบง่ายโดยใช้โค้ดชนิดของกรอบจาก
ห้องเก็บโค้ด 2 Font {ตัวอักษร}
<*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>

โค้ดทำกรอบและใส่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 อยู่ด้านขวามือ
<*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" />

TOP

ขอบคุณสำหรับโค้ดแต่งบล็อคจากป้ากล้วย,คุณดอกหญ้าเมืองเลยคะ
จขบ ก็อปเอามาเต็มๆเลย ขออนุญาติเจ้าของด้วยนะคะ
ไอค่อนและ line น่ารักๆจากคุณ UnderSunShine

Create Date : 23 พฤศจิกายน 2551

Last Update : 26 กุมภาพันธ์ 2553 20:45:06 น.

0 comments

Counter : 2078 Pageviews.