画像とデザインツール

イメージマップ生成

画像を選び、ラベルと安全なURLを持つ矩形を追加してレスポンシブHTMLをコピーします。

ブラウザ内で処理登録不要プライバシーの説明 ↗

元画像のピクセル座標で、最大50個の長方形領域を追加できます。

使い方

使い方

  1. 画像を選び、代替テキストを入力します。
  2. 矩形の座標、ラベル、リンク先を追加します。
  3. 名前付きのアクセシブルなマップを確認し、HTMLをコピーします。

元画像ピクセルの矩形

各領域は元画像の左、上、幅、高さをピクセル座標で指定します。CSSで画像を拡大縮小しても、HTMLイメージマップ座標は表示サイズに合わせて縮尺されます。

安全でアクセシブルな出力

ラベルはareaの代替テキストになります。画像には空でない代替テキストが必要です。URLはhttp(s)または同一ページ内の相対URLに限り、出力前にHTMLをエスケープします。

上限のあるローカル処理

画像はブラウザー内で読み込みます。上限は画像20 MB、領域50個、出力10,000文字です。

よくある質問

あわせて知りたいこと

画像はアップロードされますか?

いいえ。画像データと生成HTMLはブラウザー内にとどまります。

どの形状に対応しますか?

このバージョンでは矩形領域のみ出力します。

なぜ座標はピクセル単位ですか?

元画像に基づいて位置を再現できます。レスポンシブ表示ではブラウザーが座標も縮尺します。