swap image แบบไม่ใช้ javascript
หัวข้อ บทความ แทก CSS | HTML | JavaScript
บทความนี้อยากเขียนเพราะ อยากล้างไอเดียของคนทำเวบสมัยโบราณ กับไอ้การทำ Swap image ด้วย Javascript
แบบดั่งเดิมความเดิมเมื่อชาติที่แล้ว ด้วยการล้างสมองของ Dreamweaver ที่มี่ความสามารถมากมายจนทำให้เหล่า
คนทำเวบ ไม่อาจปฎิเสธ ที่จะหยิบมันมาใช้ ไม่ว่าจะของแท้ของเถื่อนก็ตาม จนถึงวันนี้เทคนิคนี้ก็ยังถูกส่งไปลง
หลอกขายในหนังสือสอนเขียน Web สำหรับมือใหม่มากมาย กลาดเกลื่อน
คือทุกครั้งผมจะรู้สึกเซ็งๆกับหนังสือคอมพิวเตอร์บ้านเราเหมือนกัน (ไว้จะเปิดเป็นอีกบทความให้อ่านกันดีกว่า) รู้สึกว่า
ความรู้มันวนๆเวียนๆหลอกขายไปๆมาๆอยู่เรื่อยๆแบบนี้ ออกมาจากกรอบเหอะครับ คิดนอกกรอบแล้วจะเห็นอะไรดีๆ
Swap image ด้วย javascript ของดั่งเดิมจาก Dreamweaver
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Step 1</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('mgallery_over.gif')">
<a href="http://www.scriptdd.com/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('My Gallery','','mgallery_over.gif',1)">
<img src="mgallery.gif" alt="ลอง Link ดูจ้า" name="My Gallery" width="95" height="35" border="0" id="My Gallery" />
</a>
</body>
</html>
ผมคงไม่โม้ว่า Script นี้มันทำงานยังไงเพราะคิดว่าหลายๆคนน่าจะคุ้นตาอยู่แล้วเพราะมันแทบจะกลายเป็นมาตรฐานบ้านเราไปแล้ว
ถอด Javascript ทิ้ง Coding ใสปิ๊งๆด้วย CSS
ว่าแล้วผมโมดิฟาย code เลย เอา Javascript ออก แล้วใช้ CSS พื้นฐานแบบบ้านๆเราตามเท่าที่ความรู้จะมีใส่ไปโลดดังนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Step 2</title>
<style>
#link2mygallery a{
display:block;
width:95px;
height:35px;
text-indent:-9999px;
background:url(mgallery.gif);
}
#link2mygallery a:hover{
display:block;
width:95px;
height:35px;
text-indent:-9999px;
background:url(mgallery_over.gif);
}
</style>
</head>
<body>
<div id="link2mygallery">
<a href="http://www.scriptdd.com/" title="ลอง Link ดูจ้า">Link ไปหาหน้า My Gallery</a>
</div>
</body>
</html>
ผมจับเอา javascript ออกแล้วใส่ div id ระบุเป็นกรอบเอาไว้โดยใช้ a และ a:hover เหมือนที่เราใช้กำหนด
ใน style ปกตินั้นแหล่ะ
display:block คือกำหนดให้แสดงผลเป็น block เหลี่ยมๆ ตามขนาดที่เราระบุไว้
text-indent:-9999px; จะทำหน้าที่ กำหนดย่อหน้าของข้อความนั้นกำหนดมันไปเลย -9999px ย่อหน้าถูกชี้ไปสุดชาติของขอบจอเลย
ที่เหลือเป็นการกำหนด background ตามการ overmouse ถ้า over mouse ก็จะเปลี่ยน background อีกรูป
เห็นไหมได้ผลเหมือนกัน coding ต่างกันเพียบ
CSS ทำได้อีกรวมรูปลด Request
จาก step 2 ก็สามารถเอาไปใช้งานจริงแล้วได้แต่ประสิทธิภาพมันก็คงไม่ต่างกับ javascript เพราะหากนับ request ในการเรียก
เข้า Server ก็คงเท่าักันคือ 1 html + 2 image
เราสามารถใช้ CSS ลด request ดังกล่าวได้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Step 3</title>
<style>
#link2mygallery a{
display:block;
width:95px;
height:35px;
text-indent:-9999px;
background:url(mgallery_mix.gif);
background-position:0 0;
}
#link2mygallery a:hover{
display:block;
width:95px;
height:35px;
text-indent:-9999px;
background:url(mgallery_mix.gif);
background-position:0 35px;
}
</style>
</head>
<body>
<div id="link2mygallery">
<a href="http://www.scriptdd.com/" title="ลอง Link ดูจ้า">Link ไปหาหน้า My Gallery</a>
</div>
</body>
</html>
สิ่งที่เราทำคือ load รูป mgallery_mix.gif รูปเดียวและใช้การเลื่อนตำแหน่งของ background เอา
background-position:0 35px; คือการเลื่อนตำแหน่ง background ตาม x,y ที่ต้องการ
เพียงเท่านี้เราก็ยังสามารถทำ swap image แบบไม่ใช้ javascript ด้วย code แสนสั้นและดูสะอาดตาได้แล้ว
การเลื่อนตำแหน่ง background นี้ผมได้ตัวอย่างมาจาก Fckeditor พวกปุ่มเมนูต่างๆ นั้น
ใน Version เก่าๆ ปุ่มพวกนี้จะถูกตัดเป็น 1 รูป ทำให้เกิด request เรียกเข้า Server มหาศาล เลย Load ช้า
Fckeditor version ใหม่ๆ เลยใช้เทคนิคเลื่อนตำแหน่งภาพแบบนี้แทน จาก หลายสิบปุ่ม เลยกลายเป็นเรียกขอรูปแค่ครั้งเดียว
สรุป
จากการใช้ CSS เพื่อทำ Swap image ทำให้เราเขียน code ได้สั้นลง สะอาดขึ้น ลง request จำนวน file ที่ต้องเรียกลงได้
แค่นี้ คนทำเวบก็น่าจะเริ่มใช้ CSS ให้มากๆขึ้นได้แล้วนะครับ
XHTML , CSS จงเจริญ
Read (22,368)
Comments (17)
2008-01-11 17:28:16
ความคิดเห็น
เดี๋ยวนี้คนใช้ css ก็เยอะขึ้นนะ *0*
โดยคุณ Zelandiax
2008-01-11 21:39:10
ผมว่าดีนะครับ อย่างน้อยก็ช่วยให้คนที่ ขยัน(ตายหล่ะ)เขียน code อย่างผม สะดวกขึ้น
โดยคุณ เล็ก
2008-01-11 22:32:27
ดูสะอาดกว่าจริง ๆ
กอฟ มา เยือน
โดยคุณ golf
2008-01-11 22:34:33
โฮะๆ น่าหนุก เดี๋ยวเอาไปใช้มั่งดีก่า
โดยคุณ แพท
2008-01-12 01:18:23
ชอบครับ แต่ผมเคยเขียนเป็นฟังก์ชั่นใช้งานดู แต่นี่ก็แจ๋วไปอีกแบบ
ทุกอย่างเกิดจากเหตุ และปัจจัย ไม่ใช่อยู่ดี ๆ ก็เกิดขึ้น :: สร้างฝันบนจินตนาการ www.konkeanweb.com , www.prawee.com ,www.tct15.com ,www.thaiagro.com 
โดยคุณ [email protected]
2008-01-12 06:04:53
โดยคุณ 12354665
2008-02-07 08:42:10
แล้วสมมุติว่า มีรูป 8 รูปใช้เป็นเมนู และให้แต่ละอันมีการสลับภาพเมื่อเอาเมาส์ชี้ งี้ก็ต้องเขียน css 8x2 = 16 ถูกมะ แล้วงี้ javascript กับ css อันไหนจะสั้นกว่ากันหน๋อ
โดยคุณ showkung
2008-02-11 12:18:06
ได้ความรู้ขึนเยอ ขยันเขียนให้อ่าน หน่อยนะค่ะ กำลังศึกษา css เป็นกำลังใจให้คะ
โดยคุณ ning
2008-02-13 16:07:34
ช่างมองในสิ่งที่คนอื่นมองไม่เห็นจริงๆๆ แหละคือการมองต่างมุม ทำให้ได้ไอเดียแปลกๆๆ เสมอ....
โดยคุณ อุ้ยเสียวป้อ
2008-04-07 11:14:36
เทคนิคนี้ดีมากครับ ผมได้ลองไปใช้กับเว็บดูแต่เดิมเวลา swap มานต้องโหลดก่อนเหมือนกระตุกไงไม่รู้ พอลองใช้อันนี้ดู ลื่นปรื้ดดดดดดดดดดดดดเลยครับ 
โดยคุณ อุ้ย (อุ้ยเสียวป้อ)
2008-04-30 13:19:02
ภาพใน google map ที่แสดงส่วนของ กรอบ แล้วก็ marker เป็นรูปภาพรูปเดียวครับ สุดยอดจริงๆ เทคนิคแบบนี้ 
โดยคุณ smapan
2008-07-21 23:41:18
ถ้าเปิดด้วย ie 6 image จะ load ไม่ทันนะ ของ javascript จะมี MM_preloadImages(??) เพื่อ ให้ภาพไม่หายไป เคยเจอมาแล้ว แล้วก็ต้อง พึ่ง preloadImages อ่ะ แต่ถ้า มีวิธีอื่นก็บอกกันได้นะจ๊ะ 
โดยคุณ gmail
2008-08-18 12:52:40
เป็นการประยุกต์คำสั่งเข้ากับเทคนิคได้อย่างยอดเยี่ยมมากครับ
ยกนิ้วให้เลย
ผมจะหัดใช้ อิอิ
โดยคุณ แกะน้อย
2008-10-17 20:55:16
ลดการ รีเควส ได้เยอะ ขอบคุณครับ
ตอนแรกผมทำได้ แต่ เปลี่ยนสี แต่เพิ่งทราบว่า เปลี่ยนรูปด้วย CSS ก็ได้
โดยคุณ โจ้
2008-12-22 10:16:51
เยี่ยมไปเลย
โดยคุณ pp
2009-08-18 15:52:18
ลองเอาไปประยุกต์ใช้แล้วค่ะ เร็วกว่าใช้ javascript มาก ขอบคุณสำหรับบทความดีๆนะคะ 
โดยคุณ มิ้งค์
2009-10-05 10:53:54
อ่านง่าย เขียนก็ง่าย ขึ้นเยอะเลยครับ
ขอบคุณครับ
โดยคุณ ท๊อป
2013-12-10 10:28:02