画像をクリックして新しいページにジャンプする HTML を実装するにはどうすればよいですか? （例）-htmlチュートリアル-php.cn

画像をクリックして新しいページにジャンプする HTML を実装するにはどうすればよいですか? （例）

藏色散人

リリース： 2018-09-03 16:56:10

オリジナル

103931 人が閲覧しました

私たちのウェブデザインと開発プロセスでは、「ジャンプリンク」の必要性が最も一般的です。 HTML をある程度理解している友人であれば、要素をクリックして新しいリンクや新しいページにジャンプする機能を認識するのは非常に簡単だと思います。たとえば、ボタンをクリックしてジャンプしたり、テキストにハイパーリンクを追加したりすることができます。

そのため、初心者でもテキストにハイパーリンクを追加する機能、つまりテキストの特定の段落に a タグを追加する機能に精通しています。次に、ジャンプ先の新しいアドレスを a タグに追加するだけです。よく理解できていなくても、ひょうたんを追ってスコップを引けば簡単に使えます。

しかし、テキストの書き方を知っている初心者の中には、HTML 画像をクリックして新しいページにジャンプする 機能を実装する方法を尋ねるかもしれません。実際、これはテキストにハイパーリンクを追加することに似ています。この記事では、画像をクリックして新しいページにジャンプするHTML関数を実装する方法を紹介します。

以下では、簡単な HTML コードの例を使用します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>HTML点击图片跳转页面示例</title>
    <style>
img{width: 80px  ;
height: 80px
;}
     </style>
</head>
<body>
<a href="http://www.php.cn"><img  src="/test/img/2.png" alt="画像をクリックして新しいページにジャンプする HTML を実装するにはどうすればよいですか? （例）" > </a>
</body>
</html>

ログイン後にコピー

上記のコードは、ローカルテスト用に直接コピーして貼り付けることができます。ローカルテストの効果は次のとおりです。

画像をクリックして新しいページにジャンプする HTML を実装するにはどうすればよいですか? （例）

これはスクリーンショットであるため、実行できません。ページをクリックするとジャンプしますが、私は個人的にローカルでテストしました。上の画像をクリックするだけです。私が指定した新しいリンクアドレス「php Chinese website」にジャンプするだけです。 a タグの herf の後に指定される新しいアドレス。画像をクリックしてページにジャンプする効果を実現したい場合は、a タグと img タグをマスターするだけで済みます。ここで注意してください: img 画像のパスは正しい必要があります。

次に、上記の記事を通じて、HTML 内の画像をクリックして新しいページにジャンプすることに関する関連情報を紹介します。お役に立てれば幸いです。

以上が画像をクリックして新しいページにジャンプする HTML を実装するにはどうすればよいですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。