CSSを使用してイメージマップを作成する方法

オプション

「オタク」なものが欲しかったので、ブログのすべてのサブスクリプション方法を保持する「ポケット」グラフィックを決定しました。

Web 1.0の時代には、このようなリンクのコレクションは、各グラフィックのリンクで画像をつなぎ合わせてから、テーブルですべてを縫い合わせることによって構築できました。 それはまた利用することによって達成することができます イメージマップ しかし、それは通常、座標系を構築するためのツールを必要とします。 カスケードスタイルシートを利用すると、これが非常に簡単になります。画像をつなぎ合わせたり、座標系を構築するためのツールを見つけようとしたりする必要がありません。

  1. 使用したいイメージを作成します。 以下のこのグラフィックを利用できます(右クリックしてダウンロード用に保存):
    オプション
  2. CSSに関連するディレクトリに画像をアップロードします。 WordPressでは、テーマディレクトリのimagesフォルダに配置することでこれを最も簡単に行うことができます。
  3. HTMLを追加します。 それは素晴らしくてシンプルです…XNUMXつのリンクがあるdiv:
    > div id = "subscribe" >> a id = "rss" href = "[your feed link]" title = "Subscribe with RSS" >> span class = "hide"> RSS> / span >> / a >> a id = "email" href = "[your email subscribe link]" title = "Subscribe with Email" >> spanclass = "hide">メール> / span >> / a >> a id = "mobile" href = "[モバイルリンク]" title = "モバイルバージョンを表示" >> spanclass = "hide">モバイル> / span >> / a >> / div>
    
  4. カスケードスタイルシートを編集します。 6つの異なるスタイルを追加します。 div全体に1つのスタイル、テキスト装飾を表示しないタグに1つのスタイル、テキストを非表示にする1つのスタイル(アクセシビリティに使用)、および各リンクに1つのスタイル仕様:
    #subscribe {/ *背景画像ブロック* / display:block; 幅:215px; 高さ:60px; 背景:url(images / options.png)繰り返しなし; マージントップ:0px; } #subscribe a {text-decoration:none; } .hide {visibility:hidden; } #rss {/ * RSSリンク* / float:left; 位置:絶対; 幅:50px; 高さ:50px; マージン左:20px; マージントップ:5px; } #email {/ *メールリンク* / float:left; 位置:絶対; 幅:50px; 高さ:50px; マージン左:70px; マージントップ:5px; } #mobile {/ *モバイルリンク* / float:left; 位置:絶対; 幅:50px; 高さ:50px; マージン左:130px; マージントップ:5px; }

配置は素晴らしくシンプルです…高さと幅を追加してから、画像の左側から左マージンを設定し、画像の上側から上マージンを設定します。

この「ハウツー」投稿は、 オタクはセクシーな究極の「ハウツー」コンテストです! 確かに、画像マップにはもっと複雑なポリゴンを含めることができますが、それが必要な場所はあまり多くありません。 オタクの古いRSS画像がセクシーなサイドバーであることに気づきました…それはリンクに適した場所です。 😉

10年3月2007日更新、 フィル!

スポンサー: あなたがウェブデザインの初心者なら、HTMLとCSSを使ってあなた自身のウェブサイトを正しい方法で構築してください。第2版は必需品です。 このわかりやすいガイドでは、Webサイトを自分で作成することにより、可能な限り最良の方法で構築する方法を学びます。

41のコメント

  1. 1

    ダグ、それはいい方法のように思えますが、それは非常にアクセスしにくいです。

    スクリーンリーダーを使用している視覚障害のあるユーザー、テキストのみのブラウザを使用しているユーザー、またはCSSや画像を有効にせずにサイトにアクセスしているユーザー(モバイルユーザーがモバイルフレンドリーサイトへのリンクを探しているなど)を考えてみます。 テキストがないため、これらXNUMXつのリンクについては誰も知りません。 画像がオフの場合、ユーザーは背景画像であるため、そこに何があったかを説明する代替テキストも表示されません。

    画像をスライスしてリンクし、リストに入れて、並べて表示することをお勧めします。 または、リンクにテキストを使用し、標準の画像置換技術を使用してテキストを置換することもできます。 これは便利なように見えますが、標準のグラフィカルブラウザを使用していない人にとっては非常に困難/不可能になります。

    • 2

      フィル、私は穏やかに(あなたがより多くの専門知識を持っているので)同意しません、各リンクにはタイトルがあるので、それぞれが完全にアクセス可能です。 テキストタイトルの読み取りは、JAWSなどのアクセシビリティアプリケーションの機能です。 これが リンクのタイトルとそのア​​クセシビリティへの影響に関する良い投稿.

      • 3

        ダグ、

        JAWSはデフォルトではリンクタイトルを読み取りませんが、その通りです。 リンクのタイトルがそこにあることを知らなかったのに、なぜ探しているのでしょうか。たとえあったとしても、これは確かにユーザビリティの問題になります。つまり、能力の低いユーザーにサイトの使用経験を二流にすることになります。

        テキストブラウザの場合、Lynxに向けた記事では、リンクタイトルのリストを表示することもできますが、そもそもテキストがなかったため、そこにリンクがあることを知らなかった場合でも、私のポイントは変わりません。 、なぜタイトルテキストを探すのですか?

        最後に、リンクタイトル属性は、画像が有効になっていない、またはCSSが有効になっていない閲覧者には表示されません。

        そうです、タイトルのあるリンクはないリンクよりも優れていますが、この場合はごくわずかです。

        これが、代替テキストを読み取れるように画像を使用するか、テキストがそこにあるように画像を置き換えることが、はるかに安全で、アクセスしやすく、使いやすいオプションである理由です。

        • 4

          良い情報、フィル。 これをテキストで強化しようとしますが、単にテキストを非表示にします。そうすれば、JAWSのようなアクセシブルな製品がリンクテキストを読み取り、CSSまたは画像が無効になっている場合にテキストが表示されます。

          ただし、アクセス可能な唯一の解決策がリンク付きの画像を配置することであることに同意しません。

  2. 5
    • 6
      • 7

        それは私たちがしばしば注意を払わないものです、フィル! 同様に、アプリケーションをアクセス可能にすることで、検索エンジンの結果も良好になることがよくあります。

        私は専門知識とフィードバックに本当に感謝しています!

  3. 8

    私はそれを盗んだ。 そこで、私はそれを言いました。

    ダグ、グラフィックは素晴らしく、コーディングはとてもシンプルなので怖いです(CSSで遊んでいて、ついに「手に入れました」)。

    私のニーズを満たすためにコードを微調整し、HTMLビットをどこにドロップするかを考えました。率直に言って、それは見栄えがよく、私をINSANEに駆り立てているサイドバーの上部をクリーンアップしました。

    私はあなたにそのコーヒーをまだ買わなければならないかもしれません!

    • 9

      かっこいい! ウィリアムはそこまで素晴らしく見えます。 誰かが私の投稿のXNUMXつを利用するとき、それは究極の褒め言葉です。 ありがとう!

  4. 10

    ダグ、

    私の経験を例にとると、私は反対意見になります。 自宅のメールが変更されたときのメールを覚えていますが、新しいメールでオプトインする必要があるとのことでした。 もう一度オプトインするために、サイトの新機能を「発見」するのにかなりの時間がかかったことを認めなければなりません。 これの一部は、元のリンクがもう少し伝統的であり、ぼんやりとそれを覚えていたためです。 もう5つは、横向きの半分の封筒が最初は封筒のように見えなかったためです。 約XNUMX分以上後、すべての画像の上にマウスを置き始め、「Subscribe with Email」というタイトルが表示されたとき、私は仕事をしていることがわかりました。 私の脳はまた、リンク画像が何であるかを理解しました。

    しかし、少なくとも私にとっては、横向きの封筒は、電子メール通知を購読する場所として私には直感的ではありませんでした。 そして(私はいつも何かいいもので終わるように言われたので)私は上記のフィルに同意します。 方法は本当に簡単で、アイテム全体がうまく機能します。 私はあなたのデザインツールがあなたに3つのセクションの正確な寸法を与えるのを助けたと思います。 それは正しい仮定ですか? たとえば、400ピクセル幅の画像がある場合は、適切な設定などを知る必要があるため、そう想定する必要があります。

    • 11

      ボブ、

      それは素晴らしいフィードバックです! 私は、人々を少し良く導くのに役立つ画像の上に少しメモを追加しました。

      ありがとうございます!
      ダグ

  5. 12
    • 13

      ウィリアム、

      コメントのクラス名とサイドバーのグラフィックのクラス名が競合している可能性があります。 競合を解消するために、別の名前を付けることができます。 手が必要な場合はお知らせください。

      ダグ

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

    いいアプローチですが、地形図に何かが必要なので、長方形の領域を使用できません…座標付きの古いスタイルのイメージマップを使用する必要があると思いますが、おそらくもう少し深く掘り下げます…

  11. 19

    この情報をありがとう、ダグ。 私は以前ここにいたことがあり、どうやってそれをしたのか疑問に思いました。 投稿の後に挿入するようなマップを作成したかったのですが、手段ができたので、それを実行できます。 ブラボー!

  12. 20

    WordPressで作業するとき、どこに「HTMLをドロップ」しますか。 私が持っているのはCSSとphpページだけです。

  13. 21

    こんにちはダグ、
    以前のコメントを残しましたが、自分のジレンマについての洞察はほとんど提供されていないことに気づきました。 私たちはここでオンラインコメディを立ち上げるのを助けるためにワードプレスのテーマを適応させてきました:

    http://www.phaylen.com/blog/

    これで、上部にナビゲーションバナーが表示されます。これは、以前の数十回のようにマッピングする予定の画像です。 / palmforehad。 私たちの誰もがCSSを本当に理解していませんが、私たちは十分につまずき、これまでのところ、これまでは大丈夫でした。 提供された数十のうちのXNUMXつだけのあなたの記事は、CSSでイメージマッピングを簡単に利用する方法についての本当の洞察です。 私はあなたの指示に従ってスタイルシートを作成しましたが、HTMLをどこに配置するかわかりません。 あなたが言ったのは「あなたのhtmlを追加してください…それは素晴らしくて単純です」そしてそれから私は思ったので泣きました..「私にとって十分に単純ではありません!」 テーマエディタでこれらのphpページのいずれかにhtmlを追加できるとは知りませんでした。 ヘッダーにhtmlを配置しますか? メインインデックステンプレート? 機能? 私はすべてのワードプレスユーザーがダッシュボードエディターでテーマを編集するオプションを持っていると思います。これは機能的にはかなり普遍的なようです。 HTMLを配置する場所を提案していただければ、ナビゲーションバーにoruコードを適合させたいと思います。

    コミュニティと知識を共有していただきありがとうございます。 コーヒーをいただければ幸いです。

    • 22

      こんにちはファイ!

      ブログのテーマのすべてのファイルは、管理パネルから編集できます。 [プレゼンテーション]、[テーマエディター]の順にクリックすると、右側にファイルのリストが表示され、左側にエディターが表示されます。

      これをサイドバーに表示したい場合は、おそらくサイドバーページがあります。 クリックして編集し、提供されたHTMLをページ内の目的の場所に配置します。

      注:スタイルシートの編集はページに関連しているため、テーマ内の他の画像と同じように参照する場合は、画像をテーマ画像ディレクトリにアップロードする必要があります。

      その情報がお役に立てば幸いです!

    • 23

      フェイ、
      私は今日このサイトに出くわし、あなたと同じジレンマを抱えていました。 また、ヘッダー画像にイメージマップを追加したいと思いました。 しばらく遊んだ後、正解しました。 divHTMLをheader.phpファイルに配置します。 との間に入れます。 テンプレートにその正確なコーディングがあるかどうかはわかりませんが、header.phpファイルでそれを試してみてください。

      Paul Cairns

  14. 24

    迅速な対応に感謝します!

    いいえ、サイドバーに表示したくありませんでした。ページの上部にあります(提供したリンクで確認できます。ピンクのナビゲーションバーには、ショーなどについて「contant」と表示されています)。

    私は午前中ずっとダッシュボードで作業していますが、残念ながら、上記のように、どのファイルにhtmlを配置するかわかりません。いくつか、header.php、main index.php、functions.php、footer.phpがあります。 HTMLコードをどこに挿入すればよいかわかりません。 (あなたが提供した最初の部分、私はすでに残りを私のスタイルシートに挿入しました)私はウェブサイトに私の画像を持っています、すべては準備ができています、私は適応するためにコードのhtml部分をどこに追加するかを知る必要があります。

    お時間を割いて、初心者からの質問に答えてくれてありがとう。

    フェイ

  15. 25

    …あるいは、コードのhtml部分をどのファイルに配置するかについて、誰かがコメントに投稿する可能性があります。いくつかの投稿をした紳士は、それを理解したと述べました。 私はそれほど幸運ではありませんでした。

    ファイレン

  16. 26
  17. 27

    クリック可能なイメージマップをワードプレスに埋め込む方法を見つけるのは大変な時間です。HTMLマップタグが削除されるからです。 あなたのやり方はうまくいくでしょうが、米国の地図は明らかにこのやり方を台無しにする複雑な方法です。 道に迷いました。

    ヘルプ。

    フラッシュが私の唯一の選択肢のようですか?

    • 28

      デイブ、

      テンプレートに画像を入れれば大丈夫です。 イメージマップを実際のコンテンツに配置すると、フィルターの問題が発生する可能性があります。 私がこれを回避した方法はひどいですが、時々私はiframeを利用しました。

      ダグ

  18. 29

    こんにちは、

    イメージマップとリンクはXNUMXつの異なるもののようですが、htmlのイメージマップのように連携することはありません。

    イメージマップの背景の配置(中央左)を含めると、リンクの配置がフォローアップされません。

    これを回避する方法はありますか? 私は非常にアマチュアです。 ありがとうございました。

  19. 31

    私が使おうとしているような、より大きくてより複雑なイメージマップにも、同様のアプローチが使用されますか?

    私のサイトを表示している場合は、左側のリンクをクリックすると、イメージマップとして使用しようとしている画像が表示されます(テキストのアルファベットの下)。

    基本的に、画像を使用してこのリストの各セクションに文字で移動しようとします。

    明らかに、私はGIMPを使用して地図を作成するのに20分を費やし、その後WPが地図タグを削除したので、それがあなたのサイトを見つけた方法です。

    ただし、Flashの使用を検討する場合があります

    ありがとうございます。

  20. 33

    私は現在、テンプレートレイアウトを使用しており、自分のもので編集しています。 イメージマップを追加したいのですが、CSSのどこに配置すればいいのかわかりません。 地図を作りたい画像はヘッダー部分にあります。

  21. 34

    こんにちは、私はjoomlaで私のウェブサイトを構築しました…私は私のページのロゴを家へのリンクにするためにこの方法を使いたいです、私はあなたがjoomlaでこれをすることができないと言われました、しかしこの記事は私に希望を与えます! 電子メールによる助けをいただければ幸いです…。ありがとう

  22. 35

    こんにちはダグ–私はリモートロールオーバーもあるかなり複雑なCSSベースのイメージマップを構築しています(この場合、画像のホットスポットのXNUMXつにカーソルを合わせると、ページの他の場所にテキストが表示されます)。 とにかく、私はそれを研究しているときにここであなたの例に出くわしました…そして私は次のインプットを共有したいと思いました:

    1.アクセシビリティのために、visibility:none(またはそれを考慮した場合はdisplay:none)を使用してここのテキストを非表示にしないでください。visibility:hiddenはスクリーンリーダー(仕様に従うもの)によって読み取られません。 。

    代わりに、より堅牢な画像置換技術を使用してください。 私はPharkメソッドまたはGilder / Levinのいずれかを提案します-これらは、基本的なテクニックを見つけるためにグーグルにとってより良い文書化された名前です。 CSSを有効にしても機能するので、G / Lが好きですが、画像はオフになっています。

    2.(FF3を使用して)それが壊れているとは思いませんが、ポジショニングの実装にも固有のリスクがあります。 絶対配置された要素は、最も近くに配置された親を基準にして配置されます。 基本的に、「position:relative」を#subscriptionに適用して、ポジショニングコンテキストを明示的に設定する必要があります。 次に、子(配置されたリンク)をその親内に配置できます。 この方法は、ブラウザー間でより信頼性の高い結果を保証するのに役立ちます。

    また、その配置を処理するには、マージンではなく、「top:x」と「left:x」(xはオフセット値、たとえばpx)の配置宣言を使用する必要があります。 繰り返しになりますが、私は必ずしもそれがあなたのやり方を壊しているとは思いませんが、上と左はこれのためのものなので、なぜそれらを使用しないのですか? さらに、同じ要素にフロートとマージンが設定されているため、特定の条件下でIE6で「ダブルマージン」バグが発生します(これをそこでテストしましたか?)–修正はありますが、topを使用することでこの問題を完全に回避できます。この場合、配置のマージンの代わりに左に移動します。

    3.最後に、意味のないdivの代わりに、これらのリンクに意味的に適切な順序なしリストを使用してみませんか?

    申し訳ありませんが…共有したいのですが、b / c経験から、CSSを使用して目的の結果を得るにはさまざまな方法があることを知っていますが、確かにいくつかの方法が他の方法よりもうまく機能します(信頼性が高く、クロスブラウザー) 。 HTH。

  23. 36
  24. 37
  25. 38

    どうもありがとうございます!! あなたの指示は私に何時間もの仕事を節約しました…私はウェブ開発に不慣れで、私はちょうど私の最初の大きなプロジェクトを通して苦しみました。 私はそれを作りました…クライアントは実際に幸せで、恍惚です、そして私もそうです!

  26. 39

    こんにちは、これを投稿してくれてありがとう! 数年後、それはまだ助けになっています…いいですね! イメージマップを適切な場所にリンクするのに苦労しています。 バナーがあり、バナーの右上にあるソーシャルアイコンを、指定したコードを使用してリンクしたいと思います。 リンクが画面の左上に表示され、ソーシャルアイコンではなくロゴの上に表示されているため、何か問題が発生していることを除けば、うまく機能します。 簡単なことだと思いますが、理解できません。 何か洞察があれば、ここで共有したいと思います。 これを投稿してくれてありがとう!

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.