ホームページ >ウェブフロントエンド >htmlチュートリアル >画像をクリックして新しいページにジャンプする HTML を実装するにはどうすればよいですか? (例)
私たちのウェブデザインと開発プロセスでは、「ジャンプリンク」の必要性が最も一般的です。 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 サイトの他の関連記事を参照してください。