Chúng ta thử đăng nhập vào trang yahoo hỏi đáp và thử tạo ra một trang dao diện như sau:
Ô nhập liệu trên khi bạn nhập vào ít hơn 20 kí tự và nhấn vào nút “ tiếp tục” thì ngay lập tức một cảnh báo hiện ra như trên,và nhập tối đa là 110 kí tự(bên dưới ô nhập liệu sẽ luôn hiện ra thông báo số kí tự còn lại).
Code tham khảo như sau:
<head>
<title>Untitled Document</title> <style>
h5{color:#999999}
.style3 {font-size: 18px}
</style>
<script language="javascript">
function ham1()
{
document.getElementById("modau").value=""; }
function ham2()
{
document.getElementById("note").width=0; document.getElementById("note").height=0; }
function ham3()
{
document.getElementById("note").width=250; document.getElementById("note").height=73; }
function ham5()
{
if(document.getElementById("modau").value.length>110) alert("câu hỏi của bạn quá dài");
else {
if(document.getElementById("modau").value.length<20) ham3();
else {
window.open("http://dantri.com.vn"); document.getElementById("note").width=0; document.getElementById("note").height=0; }
} } }
function ham6()
document.getElementById("2").innerHTML=110- document.getElementById("modau").value.length; }
</script> </head> <body>
<div style="width:383px; position:absolute; height: 40px;">
<img src="tuade.gif" width="371" height="39" /></div><br /><br /> <div style="width:700px; position:absolute; left: 9px; top: 85px;"> <img src="nen.gif" width="649" height="311" /></div> (adsbygoogle = window.adsbygoogle || []).push({});
<div style="width:625px; position:absolute; left: 18px; top: 95px; height: 38px;"> <input id="modau" type="text" style="width:608px; position:absolute; left: 7px;
top: 7px; height: 28px;" value='bạn muốn hỏi gì ?' onfocus="ham1();"
onkeyup="ham6();" /> </div><br />
<div id="1" style="width:190px; position:absolute; left: 26px; top: 121px; height: 27px;">
<h5>Bạn còn <b id="2">110 </b>kí tự</h5> </div><br /><br />
<div style="width:auto; position:absolute; left: 24px; top: 177px;"> <b><span class="style3">Thêm vài chi tiết nữa</span></b></div> <br /> <div style="width:auto; position:absolute">
<textarea style="position:absolute; left: 16px; top: 87px; width: 613px; height:
80px;"> </textarea> </div><br />
<div style="width:auto; position:absolute; left: 24px; top: 307px;"> Bạn nhớ đảm bảo câu hỏi của bạn đã tuân theo các <a href="#"><b><font
color="#3366CC">Nguyên tắc cộng đồng</font></b></a></div><br /><br /> <div style="width:auto; position:absolute">
<div style="width:auto; position:absolute; height: 66px; left: 653px; top: -
97px;">
<img src="canhbao.gif" width="0" height="0" id="note" /></div> <a href="#" onclick="ham5();">
<img src="nut.jpg" width="107" height="35" style="position:absolute; left: 15px; top: 171px; width: 99px; height: 29px;" border="0" /></div>
</a > </body> </html>
Bình luận :
Qua những bài thực hành này chúng ta hiểu rõ hơn về đối tượng image,các kĩ thuật can thiệp vào đối tượng image,chú ý tới 3 cách như sau:
Document.getElementById(“ id “).property Document[“ name”].property
Document.images[ ].property
Trên đây là các cách tương tác với đối tượng Image.
Chúng ta cũng biết rõ hơn về cách tạo ra các button hình ảnh:
Với các button bình thường chúng ta có thể tạo button ảnh bằng cách sử dụng cú pháp:
<button > <img src=”URL” > </button>
Nhưng nếu như button lại lại là nút submit của form thì phải dùng cú pháp sau:
<input type=”image” src=”URL”>
Lúc này ảnh có tác dụng như một nút submit của form.