html 画像をクリックすると画像にジャンプします

HTML 画像をクリックして画像にジャンプすることは、Web デザインで一般的に使用される手法であり、ユーザーは画像をクリックすると他の Web ページまたは画像にジャンプできます。この記事では、HTML コードを使用してこの効果を実現する方法を紹介します。

1. ハイパーリンクを使用して画像にジャンプします

まず、HTML で次のコードを使用して、ハイパーリンクを通じて他のページにジャンプします。 href

属性でジャンプ先のリンクアドレスを指定し、

imgタグのsrc属性で画像のURLを指定します。 たとえば、次は Baidu ページにジャンプするハイパーリンク画像の例です:

<a href="链接地址"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html 画像をクリックすると画像にジャンプします" ></a>

新しいウィンドウでハイパーリンク画像を開くには、

target= を使用できます。 "_blank "

属性。以下に示すように:

<a href="https://www.baidu.com"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html 画像をクリックすると画像にジャンプします" ></a>

2。JavaScript を使用して画像にジャンプします。

ハイパーリンクを使用するだけでなく、JavaScript を使用して画像へのジャンプを制御することもできます。画像をクリックすると対象ページが開きます。これは、JS コードを介して実装する必要があります。

click

イベントを画像にバインドします。ユーザーがクリックすると、ページは JS コードを介してジャンプします。

サンプルコードは以下のとおりです。

<a href="https://www.baidu.com" target="_blank"><img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" alt="html 画像をクリックすると画像にジャンプします" ></a>

このうち、JSコード内の

location.href

は、ジャンプ先のページアドレスを指定するために使用されます。

3. 画像から別の画像にジャンプする

画像をクリックした後に別の画像にジャンプしたい場合は、JavaScript を使用してこれを実現できます。

まず、以下に示すように、HTML に 2 つのイメージ タグを配置し、それらの初期表示状態を設定する必要があります。

<script>
    function jumpToPage() {
        location.href = "目标页面地址";
    }
</script>
<img  src="/static/imghwm/default1.png"  data-src="图片地址"  class="lazy" onclick="jumpToPage()" alt="html 画像をクリックすると画像にジャンプします" >

次に、JS コードで

click をバインドします。

<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 画像をクリックすると画像にジャンプします" >

上記のコードを実行すると、画像がクリックされると、画像が 2 つの画像タグの間に表示されます。間を切り替えます。 概要:

ハイパーリンクと JavaScript を使用すると、Web ページでの画像ジャンプを実現できます。実際のニーズに基づいて画像ジャンプを実現するための最も適切な方法を選択できます。ハイパーリンクを使用するか JavaScript を使用するかに関係なく、シンプルかつ効果的な画像ジャンプを実現できます。

以上がhtml 画像をクリックすると画像にジャンプしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。