JavaScript實現更換圖片的小例子

最後更新：2018-12-03 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

開始學習JavaScript指令碼語言了，經過了幾天專門的學習。我瞭解到了JavaScript是一種基於原型的開發語言。具體怎樣基於原型呢？儘管查了很多資料，我還是不是很清楚它的概念。

今天我們先不討論基於原型的問題，我們用JavaScript語言實現一個更換圖片的小例子。

下面開始：

一、設計介面：

首先，準備兩張圖片：

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

二、代碼展示：

<!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();" />  </span></td>    <td width="300">今天六月七號，祝高考的學習考出自己的真實水平，取得優異的成績！！</td>  </tr></table></body></html>

三、效果驗收：通過單擊中間的圖片，可以切換圖片。

四、知識要點：

1、span標籤：它是被用來組合文檔中的行內元素。沒有固定的格式表現，當對它應用樣式時，它才會產生視覺上的變化。

在本例子，在初始圖片中加上span標記，通過設定span標籤的id來控製圖片id。

2、innerHTML 屬性：幾乎所有的元素都有innerHTML 屬性，它是一個字串，用來設定或擷取位於對象起始和結束標籤內的HTML。

這裡用innerHTML 屬性擷取圖片的src，並設定圖片的下一個單擊事件。

3、document：HTML語言中的一類對象。

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

在本例中，通過document對象的getElementById的方法，來設定對象的引用。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More