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

Web デザインでは、ユーザーが画像をクリックすると指定のページまたはリンク アドレスにジャンプできるように、画像にリンクを追加することが必要になることがよくあります。この機能はHTML言語で実装するのが非常に簡単なので、今回はHTMLを使って画像クリックジャンプを記述する方法を紹介します。

まず、HTML の img タグを使用して画像を挿入します。サンプルコードは次のとおりです:

<img src="图片地址">

src 属性には、画像のパスまたはリンク アドレスを指定します。例:

<img src="https://picsum.photos/200">

これにより、picsum.photos から 200x200 のランダムな画像が Web ページに挿入されます。

次に、この画像へのリンクを追加する必要があります。 link機能はHTMLのaタグで実装できます imgタグにaタグを適用することができます サンプルコードは以下の通りです

<img src="图片地址">

このうち、href属性はリンクアドレスを指定しています。例:

<img src="https://picsum.photos/200">

これにより、画像へのリンクが追加され、画像をクリックすると百度のホームページにジャンプします。

しかし、このリンクを新しいウィンドウで開きたい場合はどうすればよいでしょうか?この機能はtarget属性を使用することで実現できます サンプルコードは以下の通りです:

<img src="图片地址">

このうちtarget属性はリンクを開くウィンドウを指定します ここで"_blank"はリンクを開くウィンドウを指定します新しいウィンドウでリンクを開きます。例:

<img src="https://picsum.photos/200">

これにより、画像へのリンクが追加され、Baidu ホームページが新しいウィンドウで開きます。

画像クリックジャンプを実現するには、aタグの中にimgタグを挿入するほか、CSSスタイルでも実現できます。 CSSのbackground-image属性を使用して要素の背景に画像を挿入し、aタグを適用してリンクを実装するサンプルコードは以下のとおりです。背景画像、幅、高さなどを含むリンクのスタイルを指定します。例:

<a href="链接地址" target="_blank" style="background-image: url(图片地址); display: block; width: 宽度; height: 高度;"></a>

これにより、Web ページに 200x200 のランダムな画像が挿入されます。クリックすると、Baidu のホームページが開きます新しいウィンドウで表示されます。

まとめると、画像クリックでジャンプを実現するには、HTMLのaタグとimgタグを使用してリンクアドレスとtarget属性を追加することでジャンプを実現する必要があります。これは、CSS のbackground-image プロパティを使用して実現することもできます。この機能は Web デザインにとって非常に重要です。この記事が Web デザインをより良く完成させるのに役立つことを願っています。

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