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> </P>
<P align=center><FONT color=#66ff99 face=Arial
size=3> </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> </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> </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> </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
Không có nhận xét nào:
Đăng nhận xét
Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.