img 要素を使用すると、HTML ドキュメントに画像を埋め込むことができます。 画像を埋め込むには、以下に示すように src 属性と alt 属性を使用する必要があります。 < img src ="../img/example/img-map.jpg" alt ="製品画像" width ="580" height ="266" /> 表示効果: 1 ハイパーリンクに画像を埋め込む img 要素の一般的な使用法は、a 要素と組み合わせて画像ベースのハイパーリンクを作成することです。コードは次のとおりです。 XML/HTML コードコンテンツをクリップボードにコピー
ブラウザがこの画像を表示する方法に違いはありません。したがって、特定の画像がハイパーリンクを表しているという視覚的な手がかりをユーザーに提供することが重要です。具体的なアプローチとしては、CSS を使用することが考えられますが、画像コンテンツで表現できればさらに良いでしょう。 この画像をクリックすると、ブラウザは親要素 a の href 属性で指定された URL に移動します。 img 要素に ismap 属性を適用すると、サーバー側の部分的なレスポンシブ イメージが作成されます。つまり、イメージのクリック位置が URL に追加されます。たとえば、クリックが画像の上端から 8 ピクセル、左端から 10 ピクセルの場合、ブラウザは次の URL に移動します。 XML/HTML コードコンテンツをクリップボードにコピー
次のコードは、クリック位置の座標を表示する簡単なスクリプトを含む otherpage.html の内容を示しています。 XML/HTML コードコンテンツをクリップボードにコピー
マウスクリックの効果を確認できます。 サーバー側で分割された応答イメージは通常、ユーザーがイメージ上でクリックした領域に応じてサーバーが異なる応答を行い、異なる応答情報を返すことを意味します。 img 要素の ismap 属性を省略すると、マウスクリックの座標がリクエスト URL に含まれません。 2 クライアントパーティションレスポンスマップを作成する 画像のさまざまな領域をクリックすることでブラウザがさまざまな URL に移動できるようにする、クライアント側のレスポンシブ マップを作成できます。このプロセスはサーバーから指示される必要がないため、要素を使用して画像上のさまざまな領域とそれらが表す動作を定義します。クライアント側パーティション応答マップのキー要素はマップです。マップ要素には 1 つ以上のエリア要素が含まれており、各エリア要素は画像上のクリック可能な領域を表します。 area 要素の属性は 2 つのカテゴリに分けられます。最初のカテゴリは、ユーザーが area によって表される画像領域をクリックした後にブラウザーが移動する URL を扱います。次の図は、他の要素で見られる対応するプロパティに類似したこのプロパティのカテゴリを示しています。 2 番目のカテゴリには、より興味深い属性である、shape 属性と coords 属性が含まれます。これらの属性を使用して、ユーザーがクリックできる画像の個々の領域を示すことができます。 shape 属性と coords 属性は連携して機能します。 coords 属性の意味は、次の図に示すように、shape 属性の値によって異なります。 これらの要素を紹介した後、例を見てみましょう。コードは次のようになります。 XML/HTML コードコンテンツをクリップボードにコピー
効果を見るにはリンクをクリックしてください: http://yexiaochao.github.io/show4cnblogs/img-map.html 表示効果は同じですが、対応する製品画像をクリックすると、対応する製品名がポップアップ表示され、ジャンプ先の製品ページが示されます。 上記[HTML要素]画像埋め込み実装方法は、エディターが皆様に共有する内容の全てです。皆様の参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。 オリジナルURL: http://www.cnblogs.com/luka/archive/2016/07/23/5580949.html |
<<: Linux リモート管理と sshd サービス検証の知識ポイントの詳細な説明
>>: el-table カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装
概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...
1. はじめにCentOS8 システムの更新、新しいバージョンは人々に非常に快適に感じさせます。 こ...
目次1. インストールとインポート2. 手ぶれ補正機能を定義する3. チャートコードを描くinit ...
ビューポートとはモバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置し...
Dockerイメージ内のファイルを表示する方法1. すでに実行中の場合すでに実行中のイメージについて...
成果を達成する実装コードhtml <base href="https://s3-us...
設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...
最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、ス...
テーブル構造を編集するための MySQL の alter コマンドの使用。具体的な内容は以下のとおり...
この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してくださ...
サイト上のページを表示するためのリクエストがサーバーに送信されると(たとえば、ユーザーがブラウザでペ...
この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...
この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...
この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...
1. 問題の説明今日、システム ログ ファイルを確認する必要がありますが、/var/log/mess...