自分の画像に矩形、円、多角形を描き、それぞれにリンクとaltテキストを設定して、従来のmapとareaのHTML、またはレスポンシブなSVG版をコピーできます。
イメージマップは、1枚の画像の各部分を別々のリンクにするものです。画像を読み込み、ドラッグで矩形や円を描くか、クリックで点を置いて多角形を作り、各領域にリンクとaltテキストを入力します。従来のmapとareaのHTMLか、スマートフォンで画像と一緒に領域も縮むレスポンシブなSVG版をコピーしましょう。
areaの形状とcoords
間取り図、製品図、チーム写真、地図などでは、1枚の画像の中に複数のリンクが必要になることがよくあります。ピクセルを測るより目で見て領域を描くほうがずっと速く、画像がパソコンの外に出ることもありません。画像はブラウザー内で読み込まれ、コードに使われるのはそのサイズだけです。
mapに名前を付け、imgのusemapに先頭に#を付けた同じ名前を設定します。例：usemap="#site-map"とmap name="site-map"。ジェネレーターが両方を書き出します。
それだけではレスポンシブになりません。座標はCSSピクセルの数値なので、CSSでサイズが変わる画像には追従しません。SVG出力はviewBoxでこれを解決し、画像とリンクの形を一緒に拡大縮小します。
いいえ。ファイルはローカルのオブジェクトURLで開かれ、ブラウザーが表示して幅と高さを読み取るだけです。We.Incにも他の誰にも何も送信されません。
重ねられます。2つの領域が重なる部分では、map内で先に書かれた領域がクリックを受け取ります。そのため、小さい領域は、それを囲む大きい領域より前に置きましょう。
4つのサンプル領域に対してジェネレーターが書き出す2種類の出力です。
画像本来のサイズ、600×360ピクセルであればどこでも動作します。
viewBoxが画像サイズと一致しているので、すべてのリンクの形が画像と一緒に拡大縮小します。
領域{n}
サンプルの間取り図か自分の画像に矩形、円、多角形を描き、各領域にリンクとaltテキストを設定します。
自分の画像
描画ツール
矩形
円
多角形
多角形を完成
キャンセル
画像サイズ：{w} × {h} ピクセル。
各頂点をクリックしてから「多角形を完成」を押します。
画像上をドラッグして描きます。
描いた領域を表示した画像
形状
リンク（href）
altテキスト
座標
（未完成）
領域{n}を上へ移動
領域{n}を下へ移動
領域{n}を削除
上へ
下へ
削除
座標で領域を追加
出力
従来のmap
レスポンシブSVG
HTMLをコピー
無料で始める · クレジットカード不要