2. Hand code a javascript that loads an image from Internet based on
the DOM model.
3. Take a look at the sample code that shows how window.onload to load the image.
4. Use a button to load the image. Try how onclick works.
=============================
lab14
The image will show on bottom of this web page.
<html>
<head>
<title>lab14</title>
<p><b>The image will show on bottom of this web page.</b></p>
<form action="javascript:void(0);" id="exampleForm">
<button onclick="build()">I am image button</button>
<br />
</form>
<script>
function build()
{
myImg=document.createElement("IMG")
myImg.setAttribute("id","imageOne")
myImg.setAttribute
("src","http://i19.photobucket.com/albums/b158/shongle/CUTE%20PET/pipi08a.jpg")
docBody = document.getElementsByTagName("body").item(0)
var body = document.getElementById("exampleForm");
body.appendChild(myImg)
}
</script>
</head>
<body>
<br />
</body>
</html>
<html>
<head>
<title>lab14</title>
<p><b>The image will show on bottom of this web page.</b></p>
<form action="javascript:void(0);" id="exampleForm">
<button onclick="build()">I am image button</button>
<br />
</form>
<script>
function build()
{
myImg=document.createElement("IMG")
myImg.setAttribute("id","imageOne")
myImg.setAttribute
("src","http://i19.photobucket.com/albums/b158/shongle/CUTE%20PET/pipi08a.jpg")
docBody = document.getElementsByTagName("body").item(0)
var body = document.getElementById("exampleForm");
body.appendChild(myImg)
}
</script>
</head>
<body>
<br />
</body>
</html>
沒有留言:
張貼留言