一、設計介面:
首先,準備兩張圖片,檔案下載:38895617
0915542Y4-0  

然後添加一個一行三列的Table,進行如下設計:

09155432X-1  

二、代碼展示:

<!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>
<meta HTTP-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>分欄例子</title>
</head>
<script language="javascript" type="text/javascript">
function yc(){

document.getElementById("lanmu").style.display="none";
document.getElementById("img").innerHTML="<img src='image/001.png' width='20' height='47' onclick='xs();' />"
}
function xs(){
document.getElementById("lanmu").style.display="";
document.getElementById("img").innerHTML="<img src='image/002.png' width='20' height='47' onclick='yc();' />";
}
</script>

<body>
<table width="521" height="148" border="1">
<tr>
<td id="lanmu" align="center" width="177">
<p><a href="HTTP://baike.baidu.com/view/7744517.htm"> 資訊技術提高班</a></p>
<p><a href="HTTP://baike.baidu.com/view/5185032.htm"> 米老師</a></p>
<p><a href="HTTP://liu765023051.blog.163.com/"> l63博客</a></p>
<p><a href="HTTP://blog.csdn.net/liu765023051"> CSDN博客</a></p>
<p><a href="HTTP://hi.baidu.com/liu765023051/"> 百度空間</a></p>
</td>
<td width="22">
<span id="img"><img id="img" src="image/002.png" width="20" height="88" onclick="yc();" />&nbsp; </span></td>
<td width="300">今天六月七號,祝高考的學習考出自己的真實水準,取得優異的成績!!</td>
</tr>
</table>
</body>
</html>
三、效果驗收:通過按一下中間的圖片,可以切換圖片。
0915543218-2  09155441S-3  





四、知識要點:

1、span標籤:它是被用來組合文檔中的行內元素。沒有固定的格式表現,當對它應用樣式時,它才會產生視覺上的變化。
在本例子,在初始圖片中加上span標記,通過設置span標籤的id來控制圖片id。

2、innerHTML屬性:幾乎所有的元素都有innerHTML屬性,它是一個字串,用來設置或獲取位於物件起始和結束標籤內的HTML。
這裡用innerHTML屬性獲取圖片的src,並設置圖片的下一個按一下事件。

3、document:HTML語言中的一類物件。

4、getElementById方法:返回對擁有指定id的第一個物件的引用。

在本例中,通過document物件的getElementById的方法,來設置物件的引用。
創作者介紹
創作者 shadow 的頭像
shadow

資訊園

shadow 發表在 痞客邦 留言(0) 人氣()