1 圖片屬性應用,從頁面上找到元素,
document.images[0]
2 預加載圖像
οnlοad="document.images[1].src=pic.src,pic是Image的對象,所以賦值->pic.src
html 圖像src賦值 -> src="../image/2.jpg"
3 點擊事件 改變圖像
4 link 與 anchor錨點
link :顧名思義 :鏈接
anchor錨點:它方便訪問者在頁面的不同位置快速跳轉,直接找到自己感興趣的內容,如果說 RSS 是整個網站的摘要,那錨點就是一個頁面的摘要,通常一個頁面內容很多的時候,都會用錨點來定位。錨點的具體說明:http://blog.csdn.net/jessie_j_wang/article/details/73101851
5 返回上一頁面,瀏覽器上一般都會有回退,這裏就用到window.history.go()
具體代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Js6.aspx.cs" Inherits="Javascript_Js6" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Javascript學習筆錄8(學會用Object對象、屬性、方法-image的應用)</title>
</head>
<body οnlοad="document.images[1].src=pic.src">,<img src="../image/2.jpg" />
<%-- pic是Image的一個對象,是一個js對象。而不是html對象,所以document.images是有2個元素Image--%>
<form id="form1" runat="server">
<div>
<br />
<img src="../image/2.jpg" alt="tips..." border=10 />
<img src ="../image/1.jpg" alt="bottle" border=10 />
<br />
<input type="button" name="btn1" value="點擊改變圖片" οnclick="document.images[0].src='../image/3.jpg'" /><%--src ="../image/1.jpg",在雙引號裏面,所以用單引號--%>
<script>
document.write("圖片提示是"+document.images[0].alt+"</br>");
document.write("圖片邊框大小是"+document.images[0].border+"</br>");
document.write("圖片提示是"+document.images[1].alt+"</br>");
pic=new Image();
pic.src="../image/3.jpg"
</script>
<br />
<a name="anchor1">錨點</a><br />
<a href=http://www.google.com>google</a><br />
<a href=http://www.baidu.com>BaiDu</a><br />
<a href=http://www.microsoft.com>Microsoft</a><br />
<input type="button" value="點擊改變鏈接" οnclick="document.links[0].href='http://www.newegg.com.cn'" /><br />
<input type="button" value="點擊返回上一頁" οnclick="window.history.go(-1)" /><br />
<script>
document.write("本頁面共有"+document.links.length+"鏈接"+"</br>");
document.write("本頁面共有"+document.anchors.length+"鏈接"+"</br>");
document.write("第一個鏈接協議"+document.links[0].protocol+"</br>");
</script>
</div>
</form>
</body>
</html>