JavaScript Image Object : สอน method และ property ของ Image Object, เรียน method และ property ของ Image Object
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • Image () ใช้สร้าง image object
    name ใช้ในการกำหนดค่า หรือคืนค่า ชื่อ ของ image
    id ใช้ในการกำหนดค่า หรือคืนค่า id ของ image
    src ใช้ในการกำหนดค่า หรือคืนค่า url ของ image
    lowsrc ใช้ในการกำหนดค่า หรือคืนค่า url ที่ใช้โหลดภาพความละเอียดต่ำก่อนโหลดภาพจริง ของ image
    complete ใช้ตรวจสอบว่าโหลด image สำเร็จหรือไม่
    border ใช้ในการกำหนดค่า หรือคืนค่า ความหนา ของเส้นขอบของ image
    width ใช้ในการกำหนดค่า หรือคืนค่า ความกว้าง ของ image
    height ใช้ในการกำหนดค่า หรือคืนค่า ความสูง ของ image
    hspace ใช้ในการกำหนดค่า หรือคืนค่า ระยะห่างทางขอบซ้ายและขวา ของ image
    vspace ใช้ในการกำหนดค่า หรือคืนค่า ระยะห่างทางขอบบนและขอบล่าง ของ image
    alt ใช้ในการกำหนดค่า หรือคืนค่า ข้อความอภิบายรูปภาพ ของ image
    align ใช้ในการกำหนดค่า หรือคืนค่า ตำแหน่ง ของ image
    longDesc ใช้ในการกำหนดค่า หรือคืนค่า url ของข้อมูลเพิ่มเติม ของ image
    isMap ใช้ตรวจสอบว่า image นั้นถูกใช้เป็น map หรือไม่
    useMap ใช้กำหนดค่า หรือคืนค่า map ที่ใช้
    click() ใช้กำหนดให้ มีการ click mouse ที่ image
    focus() ใช้กำหนดให้ image ได้รับ focus
    blur() ใช้กำหนดให้ image สูญเสีย focus
    onload ใช้กำหนดให้ function ทำงานเมื่อมีการโหลดรูปภาพ
    onerror ใช้กำหนดให้ function ทำงานเมื่อมีความผิดพลาดในการโหลดรูปภาพ
    onabort ใช้กำหนดให้ function ทำงานเมื่อมีการยกเลิกการโหลดรูปภาพ
    onfocus ใช้กำหนดให้ function ทำงานเมื่อ image ได้รับ focus
    onblur ใช้กำหนดให้ function ทำงานเมื่อ image สูญเสีย focus
    onclick ใช้กำหนดให้ function ทำงานเมื่อ image ถูก click
  • method :
    new Image ();

    return type :
    image

    content :
    ใช้สร้าง image object

    example :
    var img = new Image ();

  • property :
    name;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า ชื่อ ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    alert ( tagImg.name );

  • property :
    id;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า id ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    alert ( tagImg.id );

  • property :
    src;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า url ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    alert ( tagImg.src );

  • property :
    lowsrc;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า url ที่ใช้โหลดภาพความละเอียดต่ำก่อนโหลดภาพจริง ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    alert ( tagImg.lowsrc );

  • property :
    complete;

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่าโหลด image สำเร็จหรือไม่

    example :
    var tagImg = document.getElementById ( "bamboo" );
    if ( tagImg.complete )
    {
         alert ( "load image complete" );
    }

  • property :
    border;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า ความหนา ของเส้นขอบของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.border = "2";

  • property :
    width;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า ความกว้าง ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.width = "200px";

  • property :
    height;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า ความสูง ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.height = "50px";

  • property :
    hspace;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า ระยะห่างทางขอบซ้ายและขวา ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.hspace = "5px";

  • property :
    vspace;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า ระยะห่างทางขอบบนและขอบล่าง ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    alert ( tagImg.vspace );

  • property :
    alt;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า ข้อความอภิบายรูปภาพ ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.alt = "bamboolabcode";

  • property :
    align;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า ตำแหน่ง ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.align = "top";
    

  • property :
    longDesc;

    return type :
    string, void

    content :
    ใช้ในการกำหนดค่า หรือคืนค่า url ของข้อมูลเพิ่มเติม ของ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    alert ( tagImg.longDesc );

  • property :
    isMap;

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า image นั้นถูกใช้เป็น map หรือไม่

    example :
    var tagImg = document.getElementById ( "bamboo" );
    if ( tagImg.isMap )
    {
         alert ( "use map" );
    }
    

  • property :
    useMap;

    return type :
    string, void

    content :
    ใช้กำหนดค่า หรือคืนค่า map ที่ใช้

    example :
    var tagImg = document.getElementById ( "bamboo" );
    alert ( tagImg.useMap );

  • method :
    click ();

    return type :
    void

    content :
    ใช้กำหนดให้ มีการ click mouse ที่ image

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.click();

  • method :
    focus ();

    return type :
    void

    content :
    ใช้กำหนดให้ image ได้รับ focus

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.focus();

  • method :
    blur ();

    return type :
    void

    content :
    ใช้กำหนดให้ image สูญเสีย focus

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.blur();

  • property :
    onload = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อมีการโหลดรูปภาพ

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.onload = function()
    {
         alert ( "image loding" );
    }

  • property :
    onerror = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อมีความผิดพลาดในการโหลดรูปภาพ

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.onerror = function()
    {
         alert ( "load image not success" );
    }

  • property :
    onabort = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อมีการยกเลิกการโหลดรูปภาพ

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.onabort = function()
    {
         alert ( "cancel load image" );
    }

  • method :
    onfocus = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อ image ได้รับ focus

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.onfocus = function()
    {
         alert ( "image gain focus" );
    }

  • property :
    onblur = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อ image สูญเสีย focus

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.onblur = function()
    {
         alert ( "image lost focus" );
    }

  • property :
    onclick = function;

    return type :
    void

    content :
    ใช้กำหนดให้ function ทำงานเมื่อ image ถูก click

    example :
    var tagImg = document.getElementById ( "bamboo" );
    tagImg.onclick = function()
    {
         alert ( "image be clicked" );
    }

 
Share This Chapter Login with Facebook