เปลี่ยน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>

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

จากรูปด้านบนเอาไปดัดแปลงแต่งหรูในฟอร์มกรอกข้อมูลกันเลยทีเดียว ไม่มีอะไรมากครับเพียงใช้ CSS เข้าช่วย เอาล่ะฝอยมากไปแล้วดูตัวอย่างเลยดีว่า

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 ดูึครับ

<style type="text/css">

html, body { overflow:  hidden; }

</style>

<style type="text/css">

a.classname:link {font-family: tahoma;

font-size: 12px;

color: #99CC00;

}

a.classname:visited {

font-family: tahoma;

font-size: 12px;

color: #99CC00;

}

a.classname:hover {

font-family: tahoma;

font-size: 12px;

color: #99999;

}

a.classname:active {

font-family: tahoma;

font-size: 12px;

color: #99CC00;

}

</style>

Example

<a href="#" class="classname">Link</a>