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 カプセル化に基づくドラッグ可能な行と列、および選択列コンポーネントの実装
目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...
nginx で proxy_pass を設定するときに、^~ に従ってパスを一致させる場合は、pro...
目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...
目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...
伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...
「curl-config を実行できませんでした」の解決策 pycurl のダウンロード/解凍 (p...
序文最近、私は小さな個人ブログ プロジェクトを書くのに忙しくしています。 「グローバル検索」機能を実...
フォームのフロントエンド レイアウトでは、テキスト ボックスのプロンプト テキストを両端に揃える必要...
この記事では、ネイティブ JS で実装されたブラインドの特殊効果を紹介します。効果は次のとおりです。...
1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...
MYSQLの解凍バージョンがインストールされます1: 解凍後、my.ini ファイルをコピーし、バイ...
この記事では、Fedora 28 に i3 をインストールして簡単に設定する方法を説明します。 1....
現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...
ステップ準備した静的リソースファイルを指定されたフォルダに配置しますnginx 設定ファイルを変更す...
HTMLコード: <a onclick="goMessage();" st...