ホームページ > 記事 > ウェブフロントエンド > 画像をクリックして新しいページにジャンプする HTML を実装するにはどうすればよいですか? （例）
画像をクリックして新しいページにジャンプする HTML を実装するにはどうすればよいですか? （例）
- 藏色散人オリジナル
- 2018-09-03 16:56:10103941ブラウズ
私たちのウェブデザインと開発プロセスでは、「ジャンプリンク」の必要性が最も一般的です。 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>上記のコードは、ローカル テスト用に直接コピーして貼り付けることができます。ローカル テストの効果は次のとおりです。
これはスクリーンショットであるため、実行できません。ページをクリックするとジャンプしますが、私は個人的にローカルでテストしました。上の画像をクリックするだけです。私が指定した新しいリンクアドレス「php Chinese website」にジャンプするだけです。 a タグの herf の後に指定される新しいアドレス。画像をクリックしてページにジャンプする効果を実現したい場合は、a タグと img タグをマスターするだけで済みます。ここで注意してください: img 画像のパスは正しい必要があります。
次に、上記の記事を通じて、HTML 内の画像をクリックして新しいページにジャンプすることに関する関連情報を紹介します。お役に立てれば幸いです。
以上が画像をクリックして新しいページにジャンプする HTML を実装するにはどうすればよいですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。