CSS2 Cursor Styles

cursor: auto

cursor: inherit

cursor: crosshair

cursor: default

cursor: help

cursor: move

cursor: pointer

cursor: progress

cursor: text

cursor: wait

cursor: e-resize

cursor: ne-resize

cursor: nw-resize

cursor: n-resize

cursor: se-resize

cursor: sw-resize

cursor: s-resize

cursor: w-resize

CSS3 Cursor Styles

cursor: none (not IE, Safari, Opera)

cursor: context-menu (not Firefox, Chrome)

cursor: cell (not Safari)

cursor: vertical-text

cursor: alias (not Safari)

cursor: copy (not Safari)

cursor: no-drop

cursor: not-allowed

cursor: ew-resize

cursor: ns-resize

cursor: nesw-resize

cursor: nwse-resize

cursor: col-resize

cursor: row-resize

cursor: all-scroll

ข้อมูลจาก : http://www.sitepoint.com/css3-cursor-styles/

.example{
width:500px;
height: 100%;
overflow:hidden;
}

เปลี่ยนText ลิงค์ธรรมดา ไปเป็นรูป แถม Rollover ได้อีก

ขั้นแรกก็สร้างลิงค์ปกติ และต้องกำหนด ID ของลิงค์เพื่อให้ CSS อ้างถึงด้วย

<a href="#" id="menu_product">Product</a>

ต่อมาก็ใส่ CSS จัดการให้มันแสดงเป็นรูปซะ

<STYLE>

a#menu_product { text-indent: -1000px;background-image:url(menu_product.png); height: 50px; width:200px;}

a#menu_product:hover { background-image:url(menu_product_a.png); }

</STYLE>

จากโค้ดก็มีการเรียก CSS ปกติโดยมี 2 แบบคือลิงค์ธรรมดา(a#menu_product) กับลิงค์ตอน mouse over(a#menu_product:hover) คำสั่งหลักๆก็มีไม่ีกี่คำสั่งดังนี้

• text-indent สั่งให้ดัน Text ที่อยู่ในภายในลิงค์ คือคำว่า Product ออกไปทางซ้ายจะได้ไม่ต้องมาแสดงทับ background-image ที่เราโหลดมาแสดงแทน(menu_product.png)
• heightและwidth กำหนดกว้างสูงตามรูป background

เรียบร้อย ถ้ามีหลายลิงค์ก็ทำแบบเดียวกันแต่ ID ต้องไม่ซ้ำกันนะคับ

ตัวอย่าง(Viewsource ดูเองได้เลยครับ) : http://www.memo8.com/lab/css/roll-over-1/roll-over-1.html

#container_flash{

position: absolute;  width: 1000px; height: 580px; left: 50%; margin-left: -500px;  top: 50%; margin-top: -290px;

}

ค่าที่ต้องกำหนดตามความกว้าง/สูงของ Flash
- width กำหนดให้เท่ากับความกว้างของ Flash
- height กำหนดให้เท่ากับความสูงของ Flash
- margin-left ครึ่งนึงของความกว้างของ Flash แล้วเติมเครื่องหมายลบ(-) ไว้ข้างหน้า
- margin-top ครึ่งนึงของความสูงของ Flash แล้วเติมเครื่องหมายลบ(-) ไว้ข้างหน้า
Exsample.

<div id="container_flash">ใส่ Falsh ที่นี่</div>

<textarea name="detail" STYLE="overflow:hidden;" rows=5  cols=50> Hide Scrollbar Text Area </textarea>

http://jquery.khurshid.com/ifixpng.php

http://koivi.com/ie-png-transparency/

http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/

แต่บางงาน โค้ด javascript ไปตีกับ fix-png ที่เรา include มาใส่ (โอกาสน้อย ยกเว้นซวยอย่างผม T_T…)

ก็เลยจำเป็นต้อง fix แบบรูปต่อรูปตามโค้ดด้านล่างเด้อ

<span style="width:247;height:216px;display:inline-block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png');">

<img style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" src="test.png" width="247" height="216" border="0" >

</span>

จากโค้ดจะมี แท็ก span ครอบ แท็ก img อีกที และมีการกำหนด Attributes ต่างๆ อาจจะยาว แต่จุดหลักที่ต้องกำหนดนั่นก็คือ

width,height และ พาธรูป ซึ่งต้องกำหนดทั้ง แท็ก span และแท็ก img ให้ตรงกัน

ตย. http://www.memo8.com/lab/css/png/fix-png1.html

head

<style>
div.trans-off {
height:144px;width: 258px;
}

div.trans-on {height:144px;width: 258px;
background-color: #fff;
filter: alpha(opacity=50); -moz-opacity: 0.5;

}</style>

จุดเสียว เอ๊ย!!! จุดเด่นมันอยู่ที่การเซ็ตค่าตรงนี้ ตอนนี้คือ 50 แต่ ถ้ายิ่งโปร่งใสตัวเลขก็จะต้องยิ่งลดลง สังเกตว่าจะมี -moz ด้วย ตรงนี้เพื่อให้มีผลกับ firefox ด้วยอ่ะนะ

filter: Alpha(Opacity=50);-moz-opacity:.50;

example

<div class="trans-off" onmouseover="this.className='trans-on'" onmouseout="this.className='trans-off'">
<IMG src="logo.gif" WIDTH="258" HEIGHT="144" BORDER="0" ALT="">
</div>

ตัวอย่างไฟล์ที่นี่

ทำยังไงลองดูโค้ดด้านล่างเป็นตัวอย่างนะจ๊ะ จะเข้าใจมากยิ่งขึ้น

Head

<style>

.menu{background-color:#F2ECD3; }

.menu-over{background-color:#E3D0B6;}

</style>

BODY

<table width="300"  border="2" cellspacing="0" cellpadding="0">

<tr>

<td onmouseover="this.className='menu-over'" onmouseout="this.className='menu'" class="menu" >menu1</td>

</tr>

<tr>

<td onmouseover="this.className='menu-over'" onmouseout="this.className='menu'" class="menu" >menu2</td>

</tr>

<tr>

<td onmouseover="this.className='menu-over'" onmouseout="this.className='menu'" class="menu" >menu3</td>

</tr>

</table>

จากโค้ดด้านบนจะประกอบด้วย 2 event ดังนี้

• onmouseover เปลี่ยนสีพื้นหลัง โดยเรียก Css-Class ที่ชื่อ menu-over
• onmouseout สีพื้นหลังกลับมาเหมือนเดิม ก็ให้เรียก Css-Class ที่ชื่อ menu ซึ่งเป็น css-class ที่ Tag-TD ใช้อยู่ตั้งแต่แรกแล้วนั่นเอง

คลิกดูไฟล์ที่นี่ (viewsource ดูเอานะ)

CSS

<STYLE>.search-box{background-image:url('images/zoom.gif');

background-repeat:no-repeat;

padding-left:20px;

}

.mail-box{

background-image:url('images/mail.gif');

background-repeat:no-repeat;

padding-left:20px;

}

</STYLE>

Body

<input type="text" name="search" class="search-box"><br/>

<input type="text" name="search" class="mail-box">

มาดูความหมายของแต่ล่ะบรรทัดของ CSS กันครับ

background-image:url('images/zoom.gif');

บรรทัดนี้เรียก รูป background มาแหม่ะ!กับ TextInput เรา

background-repeat:no-repeat;

บรรทัดนี้สั่งให้ background คงที่ไม่แสดงซ้ำ

padding-left:20px;

บรรทัดนี้สั่งให้ ดันพื้นที่ทางด้านซ้ายขยับไป 20 px จะได้ไม่ไปบัง background icon ที่เราแป่ะไว้ นั่นเอง

คลิกที่นี่ เพื่อดูไฟล์ที่ผมทดสอบดูครับ

รูปด้านบนคือผลลัพท์ที่ใส่้ CSS เข้าไปจัดรูปแบบการแสดงอีกที

head

<style type="text/css">

.scroll-area {
float:left;
width: 400px;
height: 150px;
overflow: auto;
}

</style>

ตัวอย่าง

<div class="scroll-area">

เนื้อหาที่ต้องการ

</div>

ลองคลิกที่นี่เพื่ิอดูไฟล์ที่ผมลอง test ดูึครับ