Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

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 นี้มันทำงานยังไงเพราะคิดว่าหลายๆคนน่าจะคุ้นตาอยู่แล้วเพราะมันแทบจะกลายเป็นมาตรฐานบ้านเราไปแล้ว

download step 1


ถอด 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 ต่างกันเพียบ

download step 2


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 ใหม่ๆ เลยใช้เทคนิคเลื่อนตำแหน่งภาพแบบนี้แทน จาก หลายสิบปุ่ม เลยกลายเป็นเรียกขอรูปแค่ครั้งเดียว

download step 3


สรุป

จากการใช้ CSS เพื่อทำ Swap image ทำให้เราเขียน code ได้สั้นลง สะอาดขึ้น ลง request จำนวน file ที่ต้องเรียกลงได้
แค่นี้ คนทำเวบก็น่าจะเริ่มใช้ CSS ให้มากๆขึ้นได้แล้วนะครับ

XHTML , CSS จงเจริญ

รูปคุณ Read (19,553) Comments (17) 2008-01-11 17:28:16

ความคิดเห็น

เดี๋ยวนี้คนใช้ css ก็เยอะขึ้นนะ *0*

รูปคุณ Zelandiax โดยคุณ Zelandiax 2008-01-11 21:39:10

ผมว่าดีนะครับ อย่างน้อยก็ช่วยให้คนที่ ขยัน(ตายหล่ะ)เขียน code อย่างผม สะดวกขึ้น

รูปคุณ เล็ก โดยคุณ เล็ก 2008-01-11 22:32:27

ดูสะอาดกว่าจริง ๆ

รูปคุณ golf โดยคุณ golf 2008-01-11 22:34:33


กอฟ มา เยือน

สุดเดช

โฮะๆ น่าหนุก เดี๋ยวเอาไปใช้มั่งดีก่า

รูปคุณ แพท โดยคุณ แพท 2008-01-12 01:18:23

ชอบครับ แต่ผมเคยเขียนเป็นฟังก์ชั่นใช้งานดู แต่นี่ก็แจ๋วไปอีกแบบ

รูปคุณ P@W โดยคุณ [email protected] 2008-01-12 06:04:53


ทุกอย่างเกิดจากเหตุ และปัจจัย ไม่ใช่อยู่ดี ๆ ก็เกิดขึ้น :: สร้างฝันบนจินตนาการ

www.konkeanweb.com , www.prawee.com ,www.tct15.com ,www.thaiagro.com

 

รูปคุณ 12354665 โดยคุณ 12354665 2008-02-07 08:42:10

แล้วสมมุติว่า มีรูป 8 รูปใช้เป็นเมนู และให้แต่ละอันมีการสลับภาพเมื่อเอาเมาส์ชี้ งี้ก็ต้องเขียน css 8x2 = 16 ถูกมะ แล้วงี้ javascript กับ css อันไหนจะสั้นกว่ากันหน๋อ

รูปคุณ showkung โดยคุณ showkung 2008-02-11 12:18:06

ได้ความรู้ขึนเยอ ขยันเขียนให้อ่าน หน่อยนะค่ะ กำลังศึกษา css เป็นกำลังใจให้คะ

รูปคุณ ning โดยคุณ ning 2008-02-13 16:07:34


ช่างมองในสิ่งที่คนอื่นมองไม่เห็นจริงๆๆ แหละคือการมองต่างมุม ทำให้ได้ไอเดียแปลกๆๆ เสมอ....

รูปคุณ อุ้ยเสียวป้อ โดยคุณ อุ้ยเสียวป้อ 2008-04-07 11:14:36

เทคนิคนี้ดีมากครับ ผมได้ลองไปใช้กับเว็บดูแต่เดิมเวลา swap มานต้องโหลดก่อนเหมือนกระตุกไงไม่รู้ พอลองใช้อันนี้ดู ลื่นปรื้ดดดดดดดดดดดดดเลยครับ

รูปคุณ อุ้ย (อุ้ยเสียวป้อ) โดยคุณ อุ้ย (อุ้ยเสียวป้อ) 2008-04-30 13:19:02

ภาพใน google map ที่แสดงส่วนของ กรอบ แล้วก็ marker เป็นรูปภาพรูปเดียวครับ สุดยอดจริงๆ เทคนิคแบบนี้

รูปคุณ smapan โดยคุณ smapan 2008-07-21 23:41:18

ถ้าเปิดด้วย ie 6 image จะ load ไม่ทันนะ ของ javascript จะมี MM_preloadImages(??) เพื่อ ให้ภาพไม่หายไป เคยเจอมาแล้ว แล้วก็ต้อง พึ่ง preloadImages อ่ะ แต่ถ้า มีวิธีอื่นก็บอกกันได้นะจ๊ะ

รูปคุณ gmail โดยคุณ gmail 2008-08-18 12:52:40

เป็นการประยุกต์คำสั่งเข้ากับเทคนิคได้อย่างยอดเยี่ยมมากครับ

ยกนิ้วให้เลย

ผมจะหัดใช้ อิอิ

รูปคุณ แกะน้อย โดยคุณ แกะน้อย 2008-10-17 20:55:16

ลดการ รีเควส ได้เยอะ ขอบคุณครับ

ตอนแรกผมทำได้ แต่ เปลี่ยนสี แต่เพิ่งทราบว่า เปลี่ยนรูปด้วย CSS ก็ได้

รูปคุณ โจ้ โดยคุณ โจ้ 2008-12-22 10:16:51

เยี่ยมไปเลย

รูปคุณ pp โดยคุณ pp 2009-08-18 15:52:18

ลองเอาไปประยุกต์ใช้แล้วค่ะ เร็วกว่าใช้ javascript มาก ขอบคุณสำหรับบทความดีๆนะคะ

รูปคุณ มิ้งค์ โดยคุณ มิ้งค์ 2009-10-05 10:53:54

อ่านง่าย เขียนก็ง่าย ขึ้นเยอะเลยครับ

ขอบคุณครับ

รูปคุณ ท๊อป โดยคุณ ท๊อป 2013-12-10 10:28:02

ร่วมแสดงความคิดเห็น



ขอความกรุณา ปัญญาชน ทุกๆท่าน รณรงค์การใช้ภาษาไทยให้ถูกต้อง
กรุณา ลงความคิดเห็นโดยใช้ภาษาไทยให้เป็นภาษาไทย งดการใช้ภาษาวัยรุ่น,
แอ๊บแบ๊ว บอกตรงๆปัญญาอ่อน !! Admin นั่งอ่านแล้วปวดหัว

เข้าระบบ


จำไว้ด้วยนะจ้ะ

สมัครสมาชิก
ลืมรหัสผ่าน

บทความล่าสุด

Gallery

Tags

Mozilla Ajax BarCampBangkok Review JavaScript Mobile Live Honda ล้อเสือหมอบ AIS ASP Firefox Movie Blog Book MySQL Freeware Search Engine Airnet Travel Hardware Motorcycle Instant Messenger PHP Developer Clip Video Yamaha How to HTML Phantom

อื่นๆ ...

เพื่อนบ้าน

สถิติส่วนตัว

คลิกรับ Feed สิจ๊ะ

TwitterCounter for @9aum

Scriptdd.com | ctdd Version 3.0 ติดต่อฐานข้อมูลทิ้งสิ้น 6 ครั้งใช้เวลาประมวลผล 0.1915 วินาที
โปรแกรมโดย 9AuM | ออกแบบโดย styleshout