HTMLイメージマップ
Web画像にクリックできる領域を設定
ブラウザ上で動作。ファイルはデバイスの外に出ません。
ツールを読み込み中…
HTMLイメージマップの使い方
- クリックできるようにしたい画像を追加します。
- リンクにしたい部分の上に四角形、円、多角形を描き、各リンクと代替テキストを入力します。
- HTMLコードをコピーするか、できあがったHTMLページをダウンロードします。
このツールについて
画像の一部をクリックできるようにします。画像上に四角形、円、多角形を描き、各領域にリンク、代替テキスト、任意のツールチップを設定して、できあがったHTMLイメージマップをコピーできます。
イメージマップは固定のピクセル座標を使うため、ツールは画像のサイズが変わっても領域の位置がずれないよう、小さなスクリプトを追加できます。スクリプトなしで画像に合わせて拡大縮小される、パーセント指定のリンクとして書き出すこともできます。
- お使いのデバイス上で動作します。何もアップロードされません。
- 無料。登録もウォーターマークも不要です。
- ファイル数やサイズの制限はありません(お使いのデバイスの処理能力の範囲内)。
よくある質問
イメージマップはレスポンシブなサイトで動作しますか?
通常のイメージマップは拡大縮小されません。座標は元の画像のピクセル単位だからです。リサイズ用スクリプトをオンにするか、画像上にパーセント指定でリンクを配置する「パーセントリンク」を選んでください。
多角形を描くには?
「多角形」を選び、各頂点をクリックして、最初の頂点をクリックするか、ダブルクリックまたはEnterキーで完了します。Escでキャンセル、Backspaceで最後の頂点を削除できます。
代替テキストは必須ですか?
アクセシビリティのため、はい。スクリーンリーダーの利用者が使えるよう、クリックできる各領域には、リンク先を説明する代替テキストが必要です。
HTMLイメージマップは無料ですか?
はい。ImgImageのすべてのツールは無料で、登録もウォーターマークも不要です。処理できるファイル数にも制限はありません。
ファイルはどこかにアップロードされますか?
いいえ。ファイルはお使いのブラウザ内で処理され、デバイスの外に出ることはありません。ここで開いたものがサーバーに送信されることはありません。
スマートフォンでも使えますか?
はい。スマートフォン、タブレット、パソコンのどの最新ブラウザでも動作します。大きなファイルはパソコンのほうが速く処理できます。