Rollover Image ด้วย CSS

ปกติเวลาเราจะทำเมนูที่ประกอบด้วยรูป เมื่อนำ Mouse ไปวางก็จะเปลี่ยนรูปให้ จะทำอย่างนั้นได้ก็ต้องใช้ Javascript เข้าช่วย จริงๆใน Dreamwever ก็มีนะ แต่ถ้าหากเราคำนึงถึง SEO ลิงค์ต่างๆควรจะเป็น Text เพราะ Bot จะไต่ลิงค์ได้ง่าย และรู้ความหมายในทันทีโดยอ่านจากชื่อลิงค์ เมื่อเทียบกับรูป เอ๊า! อย่างนี้ก็ไม่ต้องมีเมนูที่ป็นรูปกันพอดี อ่านี่แหล่ะที่เราจะมาทำกันคือ

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

จัด Flash อยู่กลางหน้า Page แนวตั้งแนวนอน

ใช้ CSS ช่วยอีกล่ะก๊า…ขอยกตัวอย่างกับ Flash กว้าง 1,000px สูง 580 px
CSS.

#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>

ซ่อน Scrollbar Text Area ด้วย CSS

วิธีการเหมือนกับ script ซ่อน Scrollbar ด้วย CSSเด๊ะเลย

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

Fix PNG Transparent on IE แบบตรงๆ

จะว่าไปมี script หรือcss ที่ include แล้วใช้งานง่ายดูตามลิงค์ด้านล่าง

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

เอา mouse ไปชี้ที่รูปแล้วรูปโปร่งใสด้วย CSS

นานมาแล้วผมเคยใช้ javascript สลับรูปเอา คือต้องมีสองรูปไว้สลับกัน แต่ถ้าใช้ CSS เราก็ใช้แค่รูปเดียว แถมไม่โหลดช้าด้วยนะ

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>

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

มาใส่ icon ให้ Input Text กันดีกว่า

จากรูปด้านบนเอาไปดัดแปลงแต่งหรูในฟอร์มกรอกข้อมูลกันเลยทีเดียว ไม่มีอะไรมากครับเพียงใช้ 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 จัดรูปแบบเหมือน iFrame แบบง่ายๆ

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

head

<style type="text/css">

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

</style>

ตัวอย่าง

<div class="scroll-area">

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

</div>

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

ซ่อน Scrollbar ด้วย CSS

สมัยก่อนถ้าผมต้องการที่จะซ่อน scrollbar ของ browser นั้นต้องใช้ javascript เข้าช่วย แต่ตอนนี้เอา CSS ด้านล่างนี้ไปแป่ะเป็นอันจบเลย! แถม Support Firefox แบะ IE ด้วย

<style type="text/css">

html, body { overflow:  hidden; }

</style>

การเปลี่ยนสี Scrool Bar

Support IE เท่านั้นนะจ๊ะ
<style type="text/css">
<!--
body {
scrollbar-face-color: #999999;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #999999;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-track-color: #999999;
scrollbar-arrow-color: #000000;}
-->
</style>

Basic CSS Link Style

รูปแบบการกำหนด CSS ให้กับลิงค์ โดยจะมีความอิสระต่อกัน เพียงแค่เปลี่ยนชื่อ “classname”
CSS

<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>