Bài thực hành với image:

Hãy tạo một button bằng javaScript và khi di chuột qua button đó thì màu của button sẽ thay đổi. Gợi ý là hãy tạo ảnh của một button với hai màu khác nhau,rồi dùng mã JS mà thay đổi hai ảnh ấy cho nhau sẽ tạo thành một button thay đổi màu.

Bài làm : <html> <head> <title> th?c hành JS </title>

function ham1() { document.anh.src="button/anh2.GIF"; } function ham2() { document.anh.src="button/anh1.GIF"; } </script> </head> <body>

<a href="#" onMouseOver="ham1();" onMouseOut="ham2();"> <img src="button/anh1.GIF"

name="anh" width="200" height="40" border="0"> </a>

</body> </html>

Như vậy là chúng ta đã có được 1 button với hiệu ứng chuyển màu đẹp mắt rồi.Nhưng bài tập này chỉ với 1 nút thôi bây giờ chúng thử làm 1 dãy button giống như menu của website vậy xem sao ?

Dao diện tham khảo:

Các bạn hãy nhìn vào dao diện sau khi chuột di qua các button thì màu tím của button sẽ bị thay thế bằng các màu khác. Sau đây là code nguồn:

function ham1(x,y) { document[x].src=y; } </script> </head> <body>

<img src="button/30160757_google- ldilbert1-0107.jpg"

border="0"></div>

<div style="width:200; position:absolute; left: 3px; top: 158px;" align="left"> <a href="http://dantri.com.vn/" onMouseOver="ham1('hieu9','button/hieu8.gif');"

onMouseOut="ham1('hieu9','button/hieu9.gif');"><img src="button/hieu9.gif"

name="hieu9" width="150" height="50"> </a></div>

<div style="width:200; position:absolute; left: 3px; top: 389px;" align="left"> <a href="http://www.vnexpress.net/GL/Home/"

onMouseOver="ham1('hieu','button/hieu1.gif');"

onMouseOut="ham1('hieu','button/hieu.gif');" ><img src="button/hieu.gif"

name="hieu" width="150" height="50"> </a></div>

<div style="width:200; position:absolute; left: 2px; top: 332px;" align="left"><a

href="http://vietnamnet.vn/" onMouseOver="ham1('hieu2','button/hieu3.gif');"

onMouseOut="ham1('hieu2','button/hieu2.gif');" ><img src="button/hieu2.gif"

name="hieu2" width="150" height="50"></a></div>

<div style="width:200; position:absolute; left: 2px; top: 274px;" align="left"> <a href="http://www.w3schools.com/"

onMouseOut="ham1('hieu5','button/hieu5.gif');"><img src="button/hieu5.gif"

name="hieu5" width="150" height="50"> </a></div>

<div style="width:200; position:absolute; left: 2px; top: 215px;" align="left"> <a href="http://www.khoidaumoi.com/"

onMouseOver="ham1('hieu6','button/hieu7.gif');"

onMouseOut="ham1('hieu6','button/hieu6.gif');"><img src="button/hieu6.gif"

name="hieu6" width="150" height="50"></a></div> </div>

</body> </html>

Đừng có hốt hoảng khi nhìn thấy đoạn code này nhé.

Kỹ thuật tạo button bằng JavaScript là rất quan trọng,bởi vì tạo trang web thì không thể không có các button,đôi khi button chúng ta tạo ra phải thật đẹp mắt,nhiều hiệu ứng.Phải thực hành nhiều về vấn đề này.

Bài thực hành tiếp theo như sau:

Hãy tạo một trang web có 2 bức ảnh ( do bạn chọn ) dùng JS để tạo hiệu ứng có hiệu ứng là khi rê chuột vào một bức ảnh nào đó thì một hộp thoại hiện ra nói về bức ảnh đó,và chuột ra khỏi ảnh thì hộp thoại đó biến mất.

Gợi ý các bước có thể làm như sau :

_ dùng CorelDraw để vẽ các hộp thông báo theo ý muốn _ chèn các ảnh vào trang web

_ sử dụng JS để tạo hiệu ứng cho trang web của bạn. Dao diện tham khảo:

Code nguồn như sau : <html> <head> <title> JS </title>

function ham1()

{

document.getElementById("hieu").width=200; document.getElementById("hieu").height=100; }

function ham2()

{

document.getElementById("hieu").width=0; document.getElementById("hieu").height=0; }

function ham3()

{

document["thuy"].width=200; document["thuy"].height=100; }

function ham4()

{

document["thuy"].width=0; document["thuy"].height=0; } </script> <style> b h2{background-color:#009966} </style> </head> <body>

<b><h2> thuc hanh JavaScript</h2></b><br>

<div style="width:100px; position:absolute; left: 26px; top: 159px;"><a href="#"> <img name="kim1" src="4a335826_69953354_b5a666a3f6dbf588cbefd00.jpg" width="100px"

height="100px" border="3" style="border-color:#006666" onMouseOver="ham1();"

onMouseOut="ham2();"></a></div>

<div style="width:100px; position:absolute; left: 25px; top: 276px;"><a href="#"> <img name="kim2" src="4b11291d_32c6ef2b_1ow3-1-.jpg" width="100px" height="100px"

border="3" style="border-color:#006666" onMouseOver="ham3();"

onMouseOut="ham4();"></a></div>

<div style="width:200px; position:absolute; left: 135px; top: 150px;"> <img name="anh1" src="Graphic2.gif" width="0 px" height="0 px" border="0"

id="hieu"></div>

<div style="width:200px; position:absolute; left: 134px; top: 269px;"> <img name="anh2" src="anh.gif" width="0px" height="0px" border="0"

id="thuy"></div> </body>

</html>

ở đoạn code này chúng ta đã dùng tới 4 hàm khá giống nhau,để tiết kiệm hơn chúng ta có thể chỉ cần xây dựng hai hàm mà thôi

function ham1(name) { document.getElementById(name).width=200; document.getElementById(name).height=100; } function ham2(name) { document.getElementById(name).width=0; document.getElementById(name).height=0; } </script> <body>

<b><h2> thuc hanh JavaScript</h2></b><br>

<div style="width:100px; position:absolute; left: 26px; top: 159px;"><a href="#"> <img name="kim1" src="4a335826_69953354_b5a666a3f6dbf588cbefd00.jpg" width="100px"

height="100px" border="3" style="border-color:#006666"

onMouseOver="ham1('hieu');" onMouseOut="ham2('hieu');"></a></div>

<div style="width:100px; position:absolute; left: 25px; top: 276px;"><a href="#"> <img name="kim2" src="4b11291d_32c6ef2b_1ow3-1-.jpg" width="100px" height="100px"

border="3" style="border-color:#006666" onMouseOver="ham1('thuy');"

<div style="width:200px; position:absolute; left: 135px; top: 150px;"> <img name="anh1" src="Graphic2.gif" width="0 px" height="0 px" border="0"

id="hieu"></div>

<div style="width:200px; position:absolute; left: 134px; top: 269px;"> <img name="anh2" src="anh.gif" width="0px" height="0px" border="0"

id="thuy"></div> </body>

Kết quả cũng tương tự.

Hoặc chúng ta có thể dùng cách truy cập sau:

function ham1(name) { document[name].width=200; document[name].height=100; } function ham2(name) { document[name].width=0; document[name].height=0; } </script>

This cũng có thể là that!

JavaScript và lập trình hướng đối tượng phần