• Thứ Ba, 06/01/2004 09:49 (GMT+7)

    Thay đổi hình ảnh nội dung với sự kiện OnChange

    Với JavaScript, bạn có thể làm cho trang Web của mình trở nên sinh động và hấp dẫn hơn. Bài viết này giới thiệu kỹ thuật dùng sự kiện 'OnChange' và mã lệnh JavaScript để thay đổi hình ảnh và nội dung các Text Box trên trang Web.

    Minh hoạ ở đây là trang Web gồm 1 Form với 1 Drop-Down Menu và 3 Text Box chứa các thông tin về tên, số điện thoại, địa chỉ, e-mail. Trong Form có chèn một ảnh có cùng màu nền với Form (ở đây tôi chọn ảnh màu đen trùng với nền màu đen). Hình 1.

    Sau đây là mã nguồn trang hoanchuyen.htm:
    <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>
    <HTML><HEAD><TITLE>hoan chuyen</TITLE>
    <META content=en-us http-equiv=Content-Language>
    <META content='text/html; charset=utf-8' http-equiv=Content-Type>
    <META content='Microsoft FrontPage 4.0' name=GENERATOR>
    <META content = FrontPage.Editor .Document name=ProgId>
    <SCRIPT language=JavaScript>
    <!--hide me //-> ảnh được lưu trong thư mục 'anh', nằm cùng thư mục với hoanchuyen.htm

    var photos=new Array()
    photos[1]='anh/briney.gif'
    photos[2]='anh/ana.gif'
    photos[3]='anh/Sgirl3.jpg'
    function forward(anh,entry)
    {
    var the_anh=anh[entry];
    document.images.photoslider.src = the_anh;
    }

    //show me-->

    </SCRIPT>

     

    <SCRIPT language=JavaScript>

    <!--hide me

    //-> số điện thoại

    var phone_book=new Array();

    phone_book[1]='1234567';

    phone_book[2]='3456812';

    phone_book[3]='8567431';

     

    function displayNumber(the_phone_book,entry){

    var the_number=the_phone_book[entry];

    window.document.the_form.number_box1.value=the_number;

    }

    //show me-->

    </SCRIPT>

     

    <SCRIPT language=JavaScript>

    <!--hide me

    //-> E-mail

    var e_mail=new Array();

    Hình 1 form thông tin

    e_mail[1]='brineyspear@yahoo.com';

    e_mail[2]='annako@yahoo.com';

    e_mail[3]='sgirl@yahoo.com';

     

    function displayEmail(the_email, entry){

    var email=the_email[entry];
    window.document.the_form.mail.value=email;

    }
    //show me-->
    </SCRIPT>

     

    <SCRIPT language=JavaScript>

    <!--hide me

    //-> địa chỉ

    var dc=new Array();

    dc[1]='..........Hoa Kỳ';

    dc[2]='............CH Liên Bang Nga';

    dc[3]='...........Vương Quốc Anh';

    function displaydc(the_dc,entry2)

    {var the_ad=the_dc[entry2];

     window.document.the_form.add.value = the_ad;

     }

     //show me-->

    </SCRIPT>

    </HEAD>

    <BODY bgColor=#000000 leftMargin=0 link=#00ff00

    style='OVERFLOW-X: hidden; OVERFLOW-Y: scroll; WIDTH: 100%' text=#000000

    topMargin=0 vLink=#e5b700>

    <FORM name=the_form>

    <P align=center>&nbsp;</P>

    <P align=center><FONT color=#66ff99 face=Arial

    size=3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</FONT>

    <FONT color=#66ff99 size=5>

    <!- Chèn ảnh vào vị trí bạn muốn ảnh nhân vật hiển thị, cb.gif là ảnh màu đen->

    <IMG height=127 name=photoslider src='anh/cb.gif'

    width=124> </FONT></P>

    <FONT color=#66ff99 size=5>

    <P align=center>

    <TABLE border=10 width='85%' height='148'>

      <TBODY>

      <TR>

        <TD align=middle width='53%' height='29'>

    <B><FONT color=#ffffff  size=3><FONT face=Arial>Tªn</FONT>

    <FONT color=#66ff99 size=5>&nbsp;&nbsp;  </FONT></FONT></B></TD>

     <FONT color=#66ff99 size=5>

        <TD align=middle width='95%' height='29'>

          <P align=left><FONT color=#66ff99 face=Arial size=5>

    <!- Dùng sự kiện Onchange để gọi các hàm JavaScript hiển thị thông tin lưu giữ->     

    <SELECT


    Hình 2 form thông tin

          onchange = 'forward(photos, this .options [this.selectedIndex] .value); displayEmail(e_mail,this .options[this.selectedIndex] .value);  displayNumber(phone_book, this.options [this.selectedIndex].value);  displaydc(dc,this.options[this.selectedIndex].value); '

       <!-Hiển thị tiếng việt trong Drop-Down Menu và Text Box->  

        size=1 style='FONT-FAMILY: Arial; FONT-SIZE: 10pt' value='1'

          <option>

         <option>----------</option>

         <OPTION value=1>BrineySpear</OPTION>

     <OPTION value=2>Anna Kornikova</OPTION>

      <OPTION value=3>Sprite girl</

    OPTION></SELECT> </FONT></P>

      </FONT>

      <TR>

        <TD align=middle width='55%' height='29'>

    <b><font color='#ffffff' size='3' face='Arial'>S ®iÔn tho¹i</font><FONT color=#66ff99    

          size=5>&nbsp;</FONT></b></TD>   

        <FONT color=#66ff99 size=5>   

        <TD width='50%' height='29'>

    <B><FONT color=#66ff99 face=Arial size=5>

    <INPUT  name=number_box1 size=13></FONT></B></TD></TR>   

      </FONT>   

      <TR>   

        <TD align=middle width='55%' height='26'>

    <b><font face='Arial' color='#ffffff' size='3'>§Þa chØ</font>

    <FONT color=#66ff99 size=5>&nbsp;</FONT></b></TD>   

        <FONT color=#66ff99 size=5>   

        <TD width='50%' height='26'><FONT color=#66ff99 face=Arial size=5>

    <B><INPUT name=add size=51 style='FONT-FAMILY: Arial; FONT-SIZE: 10pt'> </B></FONT></TD></TR>   

    <TD align=middle width='55%' height='23'>

    <FONT color=#ffffff face=Arial  size=4>E-mail</FONT></TD>

    <FONT color=#66ff99 size=5>   

        <TD width='50%' height='23'><B><FONT color=#66ff99 face=Arial size=5>

    <B><INPUT  name=mail size=55> </B></FONT></B></TD></TR></TBODY></TABLE></FONT>   

    </FORM></BODY></HTML>   

    Khi chọn trong Drop-Down Menu, ví dụ như Briney Spear thì  ảnh Briney Spear hiện lên  kèm theo các thông tin liên quan hiện lên ở các ô Text Box. Tương tự với các nhân vật khác. Xem hình 2

    Nguyễn Anh Phong
    E-mail: phongna208@yahoo.com

     

     

     

    ID: A0310_107