html點擊圖片跳轉圖片

HTML點擊圖片來跳轉圖片，是一種在網頁設計中常用的技巧，可以讓使用者透過點擊圖片來跳到其他網頁或圖片。本文將介紹如何使用HTML程式碼來實現這個效果。

一、使用超連結實現圖片跳轉

首先，在HTML中使用下列程式碼可以透過超連結的方式讓圖片跳到其他頁面：

<a href="链接地址"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html點擊圖片跳轉圖片" ></a>

其中，href 屬性用於指定要跳轉的連結位址，img 標籤中的src 屬性用於指定圖片的URL。

舉個例子，如下是一個跳到百度頁面的超連結圖片範例：

<a href="https://www.baidu.com"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html點擊圖片跳轉圖片" ></a>

要讓超連結圖片在新視窗打開，可以使用target="_blank " 屬性，如下所示：

<a href="https://www.baidu.com" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html點擊圖片跳轉圖片" ></a>

二、使用JavaScript實現圖片跳轉

除了使用超連結之外，還可以使用JavaScript來控制點擊圖片後跳到目標頁面。這需要透過JS程式碼來實現，在圖片上綁定一個 click 事件，當使用者點擊時，透過JS程式碼來進行頁面跳躍。

範例程式碼如下：

<script>
    function jumpToPage() {
        location.href = "目标页面地址";
    }
</script>
<img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" onclick="jumpToPage()" alt="html點擊圖片跳轉圖片" >

其中，JS程式碼中的 location.href 用於指定要跳到的目標頁面位址。

三、實作圖片跳到另一張圖片

如果想在圖片點擊後跳到另一張圖片，可以使用JavaScript來實現。

首先，需要在HTML中放置兩個圖片標籤，並設定它們的初始顯示狀態，如下所示：

<img  src="/static/imghwm/default1.png"  data-src="图片1地址"  class="lazy"  id="pic1" / alt="html點擊圖片跳轉圖片" >
<img  src="/static/imghwm/default1.png"  data-src="图片2地址"  class="lazy"  id="pic2"   style="max-width:90%" / alt="html點擊圖片跳轉圖片" >

然後，在JS程式碼中綁定一個click 事件，並在事件處理函數中切換這兩個圖片標籤的顯示狀態，如下所示：

<script>
    function jumpToImage() {
        var pic1 = document.getElementById("pic1");
        var pic2 = document.getElementById("pic2");
        if (pic1.style.display == "none") {
            pic1.style.display = "inline";
            pic2.style.display = "none";
        } else {
            pic1.style.display = "none";
            pic2.style.display = "inline";
        }
    }
</script>
<img  src="/static/imghwm/default1.png"  data-src="图片1地址"  class="lazy" onclick="jumpToImage()" alt="html點擊圖片跳轉圖片" >

運行以上程式碼，在圖片被點擊時，就會在兩個圖片標籤之間進行切換。

總結：

透過超連結和JavaScript可以實現網頁中的圖片跳轉，我們可以根據實際需求選擇最合適的方式來實現圖片的跳躍。無論是使用超連結還是JavaScript，都可以實現簡單而有效的圖片跳躍。

以上是html點擊圖片跳轉圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！