用記事本寫html插入圖片后 ？
時間：2024-01-28 14:35:01 | 來源：網(wǎng)站運營
時間：2024-01-28 14:35:01 來源：網(wǎng)站運營
用記事本寫html插入圖片后 ？：在很多的網(wǎng)頁中我們經(jīng)常會遇到點擊一個圖片就跳轉到另一個頁面的情況。那么這種效果到底是怎么來做的呢？其實原理是很簡單的。和點擊文字產(chǎn)生跳轉是一樣的原理。點擊文字跳轉是將文字設置成超鏈接也就是錨點，那么點擊圖片跳轉就是將圖片設置成超鏈接即可。
而在html中超鏈接的標簽就是<a></a>標簽。所以要點擊圖片實現(xiàn)跳轉的功能，也是要依賴于<a></a>標簽來實現(xiàn)的。將圖片放在<a></a>標簽里面即可。而圖片又要依賴于<img/>標簽。所以在html的標簽結構上就涉及到<a></a>和<img/>標簽的嵌套。
假設我點擊圖片跳轉到百度，那么用兩種非常簡單的方式實現(xiàn)以下這個效果，適合初學者參考。
（一）html實現(xiàn)點擊圖片跳轉1、html代碼<a href="http://www.baidu.com"><img src="../image/01.png" alt=""></a>2、代碼分析- <a></a>標簽中有一個href屬性，這個屬性里面寫的是跳轉的路徑，就是你點擊圖片的時候需要跳轉到哪個地方去，就寫跳轉的目標路徑，比如我這個案例中需要跳轉到百度首頁，而百度的首頁路徑網(wǎng)址為：“http://www.baidu.com”；所以我寫的就是這個路徑。
- <img/>標簽中有一個src屬性，這個屬性里面寫的是你引入圖片的路徑。我的圖片通常是放在我的項目的image的文件夾中，所以我的圖片路徑為：“../image/01.png”；這個路徑根據(jù)你具體的項目結構來寫，如果不清楚可以去學習一下相對路徑和絕對路徑的知識點，這里不再贅述。
點擊圖片跳轉（二）使用JavaScript實現(xiàn)點擊圖片跳轉使用JavaScript來實現(xiàn)點擊跳轉的本質還是離不開<a></a>標簽，html的代碼結構和第一種方法一樣。只是通過js獲取這個元素后在對其的相關屬性進行操作而已。然后綁定有個點擊事件即可。
1、html代碼<a href=""><img src="../image/01.png" alt=""></a>2、JavaScript代碼 document.querySelector("a").onclick = function() { this.href = "http://www.baidu.com"; }3、代碼分析- document.querySelector("a")是獲取dom元素的方式之一，括號里面寫“a”表示的查找的是a標簽，這是JavaScript中固定的語法結構
- onclick是JavaScript中的點擊事件，獲取到a標簽后給a標簽綁定一個點擊事件。
- 將點擊事件添加一個匿名執(zhí)行函數(shù)，函數(shù)中寫需要執(zhí)行的操作。當點擊事件觸發(fā)后就會執(zhí)行這個函數(shù)。
- this在這個案例中表示的是當前對象，而獲取到的a標簽在被點擊的時候會調用這個匿名函數(shù)，所以this表示的就是a標簽。this.src=“http://www.baidu.com”。就是在當點擊圖片的時候將a標簽中的href屬性的值設置為百度首頁的路徑。從而實現(xiàn)頁面跳轉的功能。
（三）總結以上兩種方式本質上還是給a標簽中的href屬性設置屬性值，只是通過兩種不同的代碼來實現(xiàn)而已。只要理解了超鏈接的本質，實際上都是非常的簡單的。實現(xiàn)一個功能的方法有很多，根據(jù)具體的需求使用最合適的就好了。關于實現(xiàn)這個功能的其他的方法，有興趣的可以自行去探究學習一下。
在線咨詢
