พอดีผมได้รับงานทำเว็บไซต์ ที่ต้องออกแบบเว็บให้เอื้อประโยชน์แก่ผู้พิการทางสายตาด้วย ผมก็เลยออกเดินทางไปหาข้อมูลที่สามคมคนตาบอดแห่งประเทศไทย สิ่งหนึ่งที่เค้าที่ทางผู้พิการของมาคือขอปุ่มเพื่อที่จะเพิ่มขนาดของตัวอักษรในเนื้อหาครับ

หลายท่านคงจะงงๆ ว่าตาบอดแล้วทำไมถึงต้องทำปุ่มเพิ่มลดขนาดตัวอักษรด้วย เป็นเพราะว่าผู้พิการทางสายตานี้ไม่ใช่แค่คนตาบอดอย่างเดียวครับ คำว่าพิการทางสายตานั้นยังครอบคลุมถึง ผู้ที่ตาบอดสี และ "สายตาเลือนราง"ด้วย เพราะผู้ที่สายตาเลือนรางนั้นเวลาเค้ามองที่หน้าจอคอมพิวเตอร์เค้าแทบจะเอาหน้าไปติดที่จอคอมพิวเตอร์เลยทีเดียวครับ เราจึงต้องทำเว็บที่ยอขยายขนาดตัวอักษรได้ หลายๆท่านคงจะสงสัยอีกว่า "อ้าวทำไมเค้าไม่กด ctrl++ เพื่อเพิ่มขนาด หรือกด ctrl+- เพื่อลดขนาด" ทางสมาคมคมเค้าบอกมาว่า ต้องทำไว้เผื่อผู้ใช้งานเบื้องต้น เพราะเค้าอาจไม่รู้ว่าสามารถกดแบบนี้ได้ เอาละขี้โม้มามากพอและเข้าสู่วิธีการทำกันเลยดีกว่า

ลองกดดูนะครับ >>> ลดขนาดตัวอักษร เพิ่มขนาดตัวอักษร

 

1.ใส่ script Javascript ลงไปในระหว่าง Head ครับว่า

<script>
var min=8;
var max=18;
function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}
function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}
</script>

 

2.ทำปุ่มเพื่อเพิมลดขนาดใน tag body

<a href="javascript:decreaseFontSize();">-</a> 
<a href="javascript:increaseFontSize();">+</a>

หมายเหตุ ข้างใน tag <a> คุณสามารถใส่ tag <img> ได้นะครับ

เพียงเท่านี้คุณก็ทำปุ่มเพิ่มลดขนาดได้แล้วครับ

---------------------------------------------------------------------------------------------------

โค๊ดเหล่านี้ได้จากการช่วยเหลือของพี่ชัยวัฒน์ ไตรกิ่ง ครับขอบคุณพี่ไว้ ณ ที่นี้ด้วยครับ ส่วนคนใดยังไม่ค่อยเข้าใจลองดูจากโค๊ดใน blog ของผมก็ได้นะครับหรือไม่ก็เข้าไปที่เว็บไซต์ http://www.white-hat-web-design.co.uk/articles/js-fontsize.php ครับ

ป.ล.นี้เป็นการเขียน blog ครั้งแรกครับ เขียนผิดเขียนถูกยังไงก็ติติงกันเข้ามาได้ครับผม