画像リンクと画像マップの作成

かもしれません 11, 2024

今週の回答は、読者の質問に対する回答です。「HTMLでページへの画像リンクを作成する方法を説明できますか」。リンクされた画像に使用できるテクニックはいくつかあります。 1つは画像全体をHTMLにリンクすることで、もう1つは画像マップを作成することです。同じ画像の異なる部分が異なる場所にリンクされます。

HTMLのリンク画像

小さな画像またはアイコンのリンクは非常に簡単です。あなたがしなければならないのは、ハイパーリンク内に画像リンクを配置することです：

ここで行ったのは、リンクのHTML内に画像を含めることだけです。これは小さな画像をリンクする最も簡単で効果的な方法であり、カスタムの箇条書きやアイコンなどでよく行われます。しかし、1つの大きな画像をいくつかの異なる場所にリンクしたい場合はどうでしょうか。これは、イメージスライスが便利な場所です。

Photoshopでの画像スライス

これはPhotoshopで簡単に実現できます。ユーザーが画像をクリックする場所を明確に確認できるようにするため、あまり複雑でない画像を使用する必要があります。また、ユーザーが画像内をクリックして移動先を取得する必要があることをユーザーに理解させる必要があります。ユーザーを念頭に置いて、イメージマップを慎重に作成してください。通常、画像マップはページ上のテキストほど検索エンジンに優しいものではありませんが、画像スライス内でaltタグを適切に使用すると役立つ場合があります。

画像が作成されたら、次のステップは画像を「スライス」することです。スライスツールアイコンは、小さなナイフのように見えます。ツールバーの上部近くにあり、トリミングツールの下にあります。「トリミング」アイコンをクリックすると、スライスおよびスライスセレクターツールが表示されます。

スライスツールを選択し、左マウスキーを押したまま、スライスを目的の場所に慎重にドラッグしてから離します。次に進み、画像全体のスライスを続けます。別のページにリンクする画像のすべての領域の周りにスライスがあるはずです。どんな大きな白い領域でも1つのスライスにすることができます。

画像が完全にスライスされたら、次のステップは「スライス選択」ツールを使用し、各スライスをクリックして、そこからスライスタイプ「画像」を選択することです。このスライスの下にある場所のURLを埋める下に、下部のaltタグフィールドが続きます。他のフィールドは、単純な画像マッピングには必要ありません。画像全体がマッピングされるまで、同じ方法で各スライスを移動します。

画像全体が完成したら、「Webおよびデバイス用に保存」オプションを使用します。上部の「ファイル」をクリックし、通常の保存オプションの下を見ると、Webおよびデバイス用に保存するオプションが表示されます。このオプションを選択すると、ダイアログボックスが開き、画像の外観をプレビューできます。満足したら、保存ボタンを押すと別のダイアログボックスが開きます。 2番目のオプションに「画像とHTMLを保存」と表示されていることを確認してから、作業内容を保存します。

HTMLドキュメントを保存したフォルダーに移動して開きます。このコードをコピーして、独自のHTMLファイルに貼り付けることができます。通常、このHTMLは少しずさんです。 HTMLに精通している場合は、好みに合わせてクリーンアップできますが、そのまま正常に機能するはずです。いつものように、画像ファイルなどが正しい場所にあることを確認してください。そうしないと、画像は表示されません。