ห้องเก็บโค้ดของใช้ส่วนตัว

ลำดับตอนที่ #61 : ชี้ลิงค์ และ ลิงค์หลายสี

มาอัพเดทโค้ดใหม่ๆแล้วจ้า...

ดูโค้ดดิบกันก่อน

<STYLE>
a:link { color: #โค้ดสีของลิงค์ธรรมดา(ไม่เคยกด); text-decoration: none}
a:visited { color: #โค้ดสีของลิงค์ที่เคยเข้าไปแล้ว; text-decoration: none}
a:hover { color: #โค้ดสีของลิงค์ขณะที่เมาส์คลิกลงไป; position:relative; top:1; left:1;}
a:active { color: #โค้ดสีของลิงค์ขณะที่กำลังโหลด; text-decoration: none}
</STYLE>

วิธีแปลงโค้ด

ตัวสีส้ม คือโค้ดสีของตัวอักษรที่เป็นลิงค์ที่เราไม่เคยเข้าไป (ดูตัวอย่างได้ข้างล่าง)


ตัวสีเขียว คือโค้ดสีของตัวอักษรที่เป็นลิงค์ที่เราเคยเข้าไปแล้ว(ตัวอย่างข้างล่างเน้อ)


ตัวสีน้ำเงิน คือ โค้ดสีของตัวอักษรที่เป็นลิงค์ขณะที่เรากำลัง "คลิก" ลงไปเลยอะนะ(ตัวอย่างข้างล่างเหมือนเดิม อิอิ   จะบอกมากทำไมเนี่ย -*-)


ตัวสีม่วง และสีชมพู  สำคัญมาก!   มันคือตำแหน่งของลิงค์(ขณะที่เรากำลังชี้)ว่าจะให้เลื่อนไปทางใด  ขนาดไหน   โดยมีหลักเกณฑ์ดังนี้

 - - - - - - - ให้ใส่ค่าพิกเซลที่ต้องการจะให้เลื่อน ซึ่งจะเลื่อนไปทางตรงกันข้ามกันกับศัพท์ที่เรากำหนดไว้
                  โดยศัพท์ Top คือ มันจะเลื่อนไปทางซ้ายตามจำนวนที่เราใส่อะนะ(ในที่นี้คือ 1  ไม่รู้ว่าน้อยไปรึเปล่า  ปรับกันได้จ้ะ)
                  ส่วน Left คือ เลื่อนไปทางซ้าย  หลักเดิม~ (ดูตัวอย่างข้างล่างง)


ตัวสีแดง คือโค้ดสีของลิงค์ขณะที่มันกำลังโหลดอยู่... คือเราคลิกไปแล้วและรอขณะที่มันกำลังเปิดหน้าใหม่อะนะ ละเอียดสุดๆและ   เข้าใจกันนะคัฟ อุอุ

เอาล่ะ  สำคัญแล้ว   มาดูตัวอย่างกัน    ^o^
โดยลิงค์ข้างล่างจะโยงไปที่หน้านี้ -*-  เผื่อใครต้องการกด เป็นคำว่า I.Zenith โดยจะเป็นลิงค์ที่เราเคยเข้าแล้ว ดังนั้นจะเป็นสีของลิงค์ที่เคยเข้าแล้ว

ต่อไปจะเป็นคำว่า ||I.ZenitH|| ซึ่งจะโยงไปหน้าที่ไม่มีตัวตน 555+  ก็จะขึ้นเป็นอันที่เราไม่เคยเข้านะ  ลองใช้ได้เลยจ้า~


ส่วนคำว่า  d€$t!ńῨ เป็นตัวอักษรธรรมดา  เอามาเทียบให้ดูว่ามันต่างกันยังไงอะ



I.Zenith      D€$t!ńῨ    ||i.ZenitH||

*หมายเหตุ   ในที่นี้  เราแทนค่าโค้ดดังนี้

<STYLE>
a:link { color: #00CCFF; text-decoration: none}
a:visited { color: #FFF000; text-decoration: none}
a:hover { color: #FF0000; position:relative; top:2; left:2;}
a:active { color: #FF6600; text-decoration: none}
</STYLE>

[ความหมาย : ลิงค์ธรรมดา = สีฟ้า ; ลิงค์ที่เคยเข้าแล้ว = สีเหลือง ; ลิงค์ขณะที่เมาส์กำลังชี้ : สีแดง ; ลิงค์ขณะที่กำลังโหลด : สีส้ม ; เยิ้องล่าง,เยิ้องขวา = 2px]

   เฮ้อ...  เหนื่อยคัฟ!   อิอิ   เม้นๆกันหน่อยจี้ TToTT