So erstellen Sie eine Imagemap mit CSS

Optionen

Ich wollte etwas "Geekiges", also entschied ich mich für eine "Taschen" -Grafik, die alle Abonnementmethoden für mein Blog enthält.

In den Tagen von Web 1.0 konnte eine Sammlung solcher Links erstellt werden, indem Sie Ihr Bild mit Links auf jeder Grafik zusammenfügen und dann versuchen, alles wieder mit einer Tabelle zusammenzunähen. Dies könnte auch durch Verwendung von a erreicht werden Imagemap Dies erfordert jedoch normalerweise ein Werkzeug, um das Koordinatensystem aufzubauen. Die Verwendung von Cascading Style Sheets erleichtert dies erheblich. Kein Spleißen von Bildern und kein Versuch, ein Werkzeug zum Erstellen Ihres Koordinatensystems zu finden!

  1. Erstellen Sie Ihr Bild, das Sie verwenden möchten. Sie können diese Grafik unten verwenden (klicken Sie mit der rechten Maustaste und speichern Sie sie zum Herunterladen):
    Options
  2. Laden Sie Ihr Bild in ein Verzeichnis hoch, das relativ zu Ihrem CSS ist. In WordPress können Sie dies am einfachsten tun, indem Sie es in einem Bilderordner in Ihrem Themenverzeichnis ablegen.
  3. Fügen Sie Ihren HTML-Code hinzu. Es ist schön und einfach ... ein Div mit drei Links:
    > div id = "subscribe" >> a id = "rss" href = "[Ihr Feed-Link]" title = "Mit RSS abonnieren" >> span class = "hide"> RSS> / span >> / a >> a id = "email" href = "[Ihr E-Mail-Abonnement-Link]" title = "Mit E-Mail abonnieren" >> span class = "hide"> E-Mail> / span >> / a >> a id = "mobile" href = "[Ihr mobiler Link]" title = "Mobile Version anzeigen" >> span class = "hide"> Mobil> / span >> / a >> / div>
    
  4. Bearbeiten Sie Ihr Cascading Style Sheet. Sie werden 6 verschiedene Stile hinzufügen. 1 Stil für das gesamte Div, 1 für das a-Tag, damit keine Textdekoration angezeigt wird, 1 Stil zum Ausblenden des Texts (für Barrierefreiheit verwendet) und 1 Stilspezifikation für jeden der Links:
    #subscribe {/ * Hintergrundbildblock * / display: block; Breite: 215px; Höhe: 60px; Hintergrund: URL (images / options.png) no-repeat; Rand oben: 0px; } #subscribe a {Textdekoration: keine; } .hide {Sichtbarkeit: versteckt; } #rss {/ * RSS Link * / float: left; Position: absolut; Breite: 50px; Höhe: 50px; Rand links: 20px; Rand oben: 5px; } #email {/ * Email Link * / float: left; Position: absolut; Breite: 50px; Höhe: 50px; Rand links: 70px; Rand oben: 5px; } #mobile {/ * Mobile Link * / float: left; Position: absolut; Breite: 50px; Höhe: 50px; Rand links: 130px; Rand oben: 5px; }}

Die Positionierung ist schön und einfach. Fügen Sie eine Höhe und Breite hinzu und setzen Sie dann den linken Rand von der linken Seite des Bildes und den oberen Rand von der oberen Seite des Bildes!

Dieser "How To" -Post ist für den Eintritt in die Geeks sind sexy ultimative "How To" -Wettbewerbe! Eine Anmerkung, es ist wahr, dass eine Imagemap viel komplexere Polygone haben kann, aber ich habe nicht wirklich zu viele Orte gesehen, an denen das ein Muss ist. Mir ist aufgefallen, dass das große alte RSS-Bild auf der Geeks Sexy-Seitenleiste ist… das ist ein guter Ort für einen Link. 😉

AKTUALISIERT 10 für bessere Zugänglichkeit mit dem Rat von Phil!

Sponsor: Wenn Sie ein Neuling im Bereich Webdesign sind, sollten Sie Ihre eigene Website mit HTML und CSS richtig erstellen. Die 2. Ausgabe ist ein Muss. In dieser leicht verständlichen Anleitung erfahren Sie, wie Sie eine Website bestmöglich erstellen - indem Sie es selbst tun!

41 Kommentare

  1. 1

    Doug, das scheint eine nette Methode zu sein, aber sie ist sehr unzugänglich.

    Stellen Sie sich einen blinden Benutzer mit einem Bildschirmleser, einen Benutzer mit einem Nur-Text-Browser oder jemanden vor, der die Website ohne aktiviertes CSS oder Bilder besucht (z. B. einen mobilen Benutzer, der nach dem Link zu Ihrer mobilfreundlichen Website sucht). Keiner von ihnen kennt diese drei Links, da sie keinen Text haben. Wenn Bilder deaktiviert sind, sieht ein Benutzer nicht einmal Alternativtext, um zu beschreiben, was dort gewesen wäre, da es sich um ein Hintergrundbild handelt.

    Besser wäre es, die Bilder zu schneiden, zu verknüpfen, in eine Liste aufzunehmen und nebeneinander zu schweben. Oder verwenden Sie sogar Text für die Links und ersetzen Sie den Text mithilfe einer Standardtechnik zum Ersetzen von Bildern. Dies scheint praktisch zu sein, macht es jedoch für diejenigen, die keinen grafischen Standardbrowser verwenden, viel schwieriger / unmöglich.

    • 2
      • 3

        Doug,

        JAWS liest standardmäßig keine Link-Titel, aber Sie haben Recht, das kann es. Warum sollten Sie nach Link-Titeln suchen, wenn Sie nicht wissen, dass sie vorhanden sind, und selbst wenn dies der Fall ist, führt dies sicherlich zu einem Usability-Problem, das bedeutet, dass Sie weniger fähigen Benutzern eine zweitklassige Erfahrung bei der Nutzung Ihrer Website bieten.

        Für Textbrowser können Sie in dem Artikel, auf den Sie mich hinweisen, auch eine Liste mit Link-Titeln aufrufen. Mein Punkt bleibt jedoch, dass, wenn Sie nicht wussten, dass dort ein Link vorhanden ist, da überhaupt kein Text vorhanden war , warum sollten Sie nach Titeltext suchen?

        Schließlich werden Linktitelattribute für niemanden angezeigt, der ohne aktivierte Bilder oder ohne aktiviertes CSS surft.

        Also ja, Links mit Titeln sind besser als solche ohne, aber in diesem Fall ist es nur marginal.

        Aus diesem Grund ist die Verwendung eines Bildes, damit Alternativtext gelesen werden kann, oder das Ersetzen von Bildern, damit der Text vorhanden ist, eine viel sicherere, zugänglichere und benutzerfreundlichere Option.

        • 4

          Gute Info, Phil. Ich werde versuchen, dies mit Text zu verbessern, aber den Text einfach ausblenden – auf diese Weise liest ein barrierefreies Produkt wie JAWS den Linktext und der Text wird angezeigt, wenn CSS oder Bilder deaktiviert sind.

          Ich bin nicht der Meinung, dass die einzig zugängliche Lösung darin besteht, ein Bild mit einem Link zu versehen.

  2. 5
  3. 8

    Ich habe es gestohlen. Dort habe ich es gesagt.

    Doug, die Grafik ist fantastisch und die Codierung ist so unglaublich einfach, dass es mir Angst macht (ich habe mit CSS gespielt und jetzt verstehe ich es endlich).

    Ich habe den Code an meine Bedürfnisse angepasst, herausgefunden, wo das HTML-Bit abgelegt werden soll, und ehrlich gesagt sieht es großartig aus und hat den oberen Teil meiner Seitenleiste aufgeräumt, der mich wahnsinnig gemacht hat.

    Vielleicht muss ich dir den Kaffee noch kaufen!

  4. 10

    Doug,

    Ich werde eine abweichende Stimme sein und meine Erfahrung als Beispiel nehmen. Ich erinnere mich an unsere E-Mails, als sich meine Privat-E-Mail geändert hat und Sie bemerkt haben, dass ich mich einfach für meine neue E-Mail entscheiden musste. Ich muss zugeben, dass ich verdammt viel Zeit hatte, die neue Funktion auf Ihrer Website zu „entdecken“, um mich erneut anzumelden. Ein Teil davon war, dass der ursprüngliche Link etwas traditioneller war und ich mich vage an diesen erinnerte. Der andere Grund war, dass der seitliche halbe Umschlag für mich anfangs einfach nicht wie ein Umschlag aussah. Nach ungefähr 5 oder mehr Minuten fuhr ich mit der Maus über jedes Bild und als der Titel "Mit E-Mail abonnieren" angezeigt wurde, wusste ich, dass ich im Geschäft war. Mein Gehirn hat auch herausgefunden, was das Linkbild ist.

    Aber zumindest für mich war ein seitlicher Umschlag für mich als Ort zum Abonnieren von E-Mail-Benachrichtigungen einfach nicht intuitiv. Und (weil mir gesagt wurde, ich solle immer mit etwas Schönem enden) stimme ich Phil oben zu; Die Methode ist wirklich einfach und der ganze Artikel funktioniert großartig. Ich nehme an, Ihr Entwurfswerkzeug hat Ihnen geholfen, die genauen Abmessungen für die drei Abschnitte zu ermitteln. Ist das eine richtige Annahme? Ich muss davon ausgehen, denn wenn ich beispielsweise ein 3 Pixel breites Bild hätte, müsste ich die richtigen Einstellungen usw. kennen.

  5. 12
    • 13

      Wilhelm,

      Anscheinend besteht ein Konflikt zwischen Ihren Kommentarklassennamen und den Klassennamen in der Seitenleistengrafik. Sie können sie anders benennen, um den Konflikt aufzuklären. Sag Bescheid, wenn du Hilfe brauchst!

      Doug

  6. 14

    Alles scheint sowohl in FF als auch in IE zu funktionieren… Ich glaube, Sie waren möglicherweise auf der Website, als ich versuchte, ein Plugin zu optimieren, das nicht ganz funktioniert hat… 😉

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

    Netter Ansatz, aber ich brauche etwas für eine topografische Karte, daher kann ich keine rechteckigen Bereiche verwenden. Ich denke, ich muss die Imagemap im alten Stil mit Koordinaten verwenden, aber ich werde wahrscheinlich etwas tiefer graben.

  11. 19

    Danke für diese Info, Doug. Ich war schon einmal hier und habe mich gefragt, wie du es gemacht hast. Wir wollten eine solche Karte erstellen, um sie nach unseren Posts einzufügen, und jetzt, wo wir die Mittel haben, können wir es tun. Bravo!

  12. 20
  13. 21

    Hallo Doug,
    Ich habe einen vorherigen Kommentar hinterlassen, aber festgestellt, dass ich kaum einen Einblick in mein Dilemma gegeben habe. Wir haben ein WordPress-Thema angepasst, um unsere Online-Sitcom hier zu starten:

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

    Jetzt sehen Sie, dass wir oben ein Navigationsbanner haben, ein Bild, das wir wie schon Dutzende Male zuvor kartieren wollten. /Handfläche. Keiner von uns versteht CSS wirklich, aber wir stolpern ausreichend rum und sind bisher gut gefahren. Ihr Artikel im EINZIGEN von Dutzenden, die bereitgestellt wurden, sind echte Einblicke in die einfache Verwendung von Imagemapping in CSS. Ich habe das Stylesheet nach Ihren Anweisungen erstellt, habe aber keine Ahnung, wo ich den HTML-Code platzieren soll. Alles, was Sie gesagt haben, ist "Html hinzufügen ... Es ist schön und einfach" und dann zuckte ich zusammen, weil ich dachte ... "nicht einfach genug für mich!" Ich wusste nicht, dass ich im Theme-Editor HTML zu einer dieser PHP-Seiten hinzufügen kann. Platziere ich den HTML-Code in der Kopfzeile? Die Hauptindexvorlage? Die Funktionen? Ich gehe davon aus, dass alle WordPress-Benutzer die Möglichkeit haben, ihr Thema im Dashboard-Editor zu bearbeiten, der in seiner Funktionalität ziemlich universell zu sein scheint. Wenn Sie vorschlagen könnten, wo der HTML-Code platziert werden soll, würde ich gerne Oru-Code für meine Navigationsleiste anpassen.

    Vielen Dank, dass Sie Ihr Wissen mit der Community teilen. Ich freue mich, Ihnen einen Kaffee zu bringen.

    • 22

      Hallo Phay!

      Alle Dateien für das Thema Ihres Blogs stehen über das Admin-Panel zur Bearbeitung zur Verfügung. Wenn Sie auf Präsentation und dann auf Themeneditor klicken, sollten Sie rechts eine Liste Ihrer Dateien und links einen Editor sehen können.

      Wenn Sie möchten, dass dies in Ihrer Seitenleiste angezeigt wird, haben Sie wahrscheinlich eine Seitenleistenseite. Klicken Sie auf , um es zu bearbeiten, und fügen Sie dann den bereitgestellten HTML-Code an die gewünschte Stelle auf der Seite ein.

      Ein Hinweis: Die Stylesheet-Bearbeitung bezieht sich auf Ihre Seite. Sie müssen das Bild daher in das Verzeichnis der Themenbilder hochladen, wenn Sie es wie andere Bilder in Ihrem Thema referenzieren.

      Hoffe das hilft!

    • 23

      Phay,
      Ich bin heute auf diese Seite gestoßen und hatte das gleiche Dilemma wie du. Ich wollte auch eine Imagemap zum Header-Bild hinzufügen. Nachdem ich eine Weile damit herumgespielt hatte, habe ich es richtig verstanden. Fügen Sie den div-HTML-Code in die Datei header.php ein. Ich habe es zwischen und gesetzt. Ich bin mir nicht sicher, ob Ihre Vorlage genau diese Codierung hat, aber spielen Sie damit in der Datei header.php herum und Sie werden es herausfinden.
      -
      Paul

  14. 24

    Danke für die schnelle Antwort!

    Nein, ich wollte nicht, dass es in der Seitenleiste angezeigt wird, es befindet sich oben auf der Seite (Sie können es in dem von mir bereitgestellten Link sehen - der rosa Navigationsleiste mit der Aufschrift "Contant" über die Show usw.).

    Ich habe den ganzen Morgen im Dashboard gearbeitet, leider bin ich mir nicht sicher, in welcher Datei ich das HTML ablege, wie oben angegeben. Ich habe mehrere, header.php, main index.php, functions.php, footer.php. Ich bin nicht sicher, wo ich den HTML-Code einfügen soll. (Der erste Teil, den Sie bereitgestellt haben, ich habe den Rest bereits in mein Stylesheet eingefügt.) Ich habe mein Bild dort auf der Website, alles ist fertig, ich muss nur wissen, wo ich den HTML-Teil des Codes zum Anpassen hinzufügen kann.

    Vielen Dank für Ihre Zeit und die Beantwortung von Fragen eines Anfängers.

    Phay

  15. 25

    … Oder vielleicht könnte jemand in den Kommentaren posten, in welcher Datei wir den HTML-Teil des Codes ablegen. Ein Gentleman, der ein paar Posts weiter oben stand, sagte, er habe es herausgefunden. Ich hatte nicht so viel Glück.

    Phaylen

  16. 26
  17. 27

    Ich habe eine höllische Zeit, einen Weg zu finden, eine anklickbare Imagemap in WordPress einzubetten, weil sie HTML-Map-Tags entfernt. Ihr Weg würde funktionieren, aber eine Karte der USA ist offensichtlich viel zu komplex, um sie auf diese Weise zu vermasseln. Ich bin verloren.

    Hilfe.

    Es scheint, als wäre Flash meine einzige Option?

    • 28

      Dave,

      Wenn Sie das Bild in Ihre Vorlage einfügen, ist alles in Ordnung. Wenn Sie die Imagemap in den eigentlichen Inhalt einfügen, können Filterprobleme auftreten. Die Art und Weise, wie ich damit umgegangen bin, ist schrecklich, aber manchmal habe ich einen iframe verwendet.

      Doug

  18. 29

    Hallo,

    Es scheint, dass die Imagemap und die Links zwei verschiedene Dinge sind. Sie arbeiten nicht zusammen wie eine Imagemap in HTML

    Wenn ich die Hintergrundpositionierung (Mitte links) für die Imagemap einbinde, folgt die Positionierung der Links nicht.

    Wie kann man das umgehen? Ich bin sehr Amateur. Vielen Dank.

  19. 31

    Würde ein ähnlicher Ansatz für eine größere und kompliziertere Imagemap verwendet, wie ich sie verwenden möchte?

    Wenn Sie meine Website anzeigen, klicken Sie auf die Links links und Sie sehen das Bild, das ich als Imagemap verwenden möchte (unter dem Textalphabet).

    Grundsätzlich versuchen Sie, das Bild zu verwenden, um zu jedem Abschnitt dieser Liste nach Buchstaben zu gelangen.

    Offensichtlich habe ich 20 Minuten damit verbracht, eine Karte mit GIMP zu erstellen, und dann hat WP die Karten-Tags entfernt. So habe ich Ihre Site gefunden.

    Möglicherweise wird jedoch die Verwendung von Flash in Betracht gezogen

    Vielen Dank.

  20. 33

    Ich verwende derzeit ein Vorlagenlayout und bearbeite es mit meinen eigenen Sachen. Ich möchte eine Imagemap hinzufügen, bin mir aber nicht sicher, wo ich sie im CSS platzieren soll. Das Bild, von dem ich eine Karte erstellen möchte, befindet sich im Header-Teil.

  21. 34

    Hallo, ich habe meine Website auf Joomla aufgebaut. Ich möchte diese Methode verwenden, um das Logo meiner Seite zu einem Link nach Hause zu machen. Mir wurde gesagt, dass Sie dies mit Joomla nicht tun können, aber dieser Artikel gibt mir Hoffnung! Hilfe per E-Mail wäre sehr dankbar ... Danke

  22. 35

    Hallo Doug, ich baue eine ziemlich komplexe CSS-basierte Imagemap auf, die auch Remote-Rollover enthält (in diesem Fall wird Text an anderer Stelle auf der Seite angezeigt, wenn Sie mit der Maus über einen der Image-Hotspots fahren). Wie auch immer, ich bin hier auf Ihr Beispiel gestoßen, als ich das untersucht habe… und ich dachte, ich würde den folgenden Input teilen:

    1. Für die Barrierefreiheit sollten Sie nicht Sichtbarkeit verwenden: keine (oder Anzeige: keine, wenn Sie dies berücksichtigt haben), um den Text hier als ein Element mit Sichtbarkeit auszublenden: Verborgen wird von Bildschirmleseprogrammen nicht gelesen (diejenigen, die den Spezifikationen folgen). .

    Verwenden Sie stattdessen eine robustere Bildersatztechnik. Ich schlage entweder die Phark-Methode oder Gilder / Levin vor - dies sind nur die besser dokumentierten Namen für Google, um die grundlegenden Techniken zu finden. Ich bevorzuge G / L, da es auch mit aktiviertem CSS funktioniert, aber Bilder deaktiviert sind.

    2. Ich sehe zwar keinen Bruch (mit FF3), aber Ihre Implementierung der Positionierung birgt auch Risiken. Ein absolut positioniertes Element wird relativ zu seinem am nächsten positionierten übergeordneten Element positioniert. Grundsätzlich möchten Sie einen Positionierungskontext explizit festlegen, indem Sie 'position: relative' auf #subscription anwenden. Dann können die untergeordneten Elemente (die positionierten Links) innerhalb dieses übergeordneten Elements positioniert werden. Diese Methode sorgt für zuverlässigere Ergebnisse in allen Browsern.

    Außerdem sollten Sie dann die Positionierungsdeklarationen "top: x" und "left: x" (wobei x der Versatzwert ist, z. B. in px) anstelle der Ränder verwenden, um diese Positionierung zu handhaben. Auch hier sehe ich nicht unbedingt, dass es so bricht, wie Sie es haben, aber oben und links sind dafür gedacht. Warum also nicht? Außerdem haben Sie Floats und Ränder für dasselbe Element festgelegt, was unter bestimmten Bedingungen den Fehler "doppelter Rand" in IE6 verursacht (haben Sie dies dort getestet?). Obwohl es eine Korrektur gibt, vermeiden Sie dieses Problem vollständig, indem Sie top verwenden und in diesem Fall anstelle der Ränder für die Positionierung übrig.

    3. Warum nicht eine semantisch einwandfreie, ungeordnete Liste für diese Links anstelle des bedeutungslosen Div verwenden?

    Entschuldigung für das Dröhnen… Ich möchte nur mitteilen, b / c Ich weiß aus Erfahrung, wie es viele verschiedene Möglichkeiten gibt, CSS zu verwenden, um das gewünschte Ergebnis zu erzielen, aber einige Möglichkeiten funktionieren sicherlich besser (zuverlässiger, browserübergreifender) als andere . HTH.

  23. 36
  24. 37
  25. 38

    Ich danke dir sehr!! Ihre Anweisungen haben mir STUNDEN Arbeit erspart… Ich bin neu in der Webentwicklung und habe gerade durch mein erstes großes Projekt gelitten. Ich habe es geschafft ... der Kunde ist glücklich, wirklich begeistert, und ich auch!

  26. 39

    Hallo, vielen Dank für die Veröffentlichung! Jahre später und es hilft immer noch ... schön! Ich habe Probleme, meine Imagemap an die richtige Stelle zu verlinken. Ich habe ein Banner und möchte, dass die sozialen Symbole oben rechts im Banner mit dem von Ihnen angegebenen Code verknüpft werden. Es funktioniert großartig, außer dass ich etwas falsch mache, weil meine Links ganz oben links auf dem Bildschirm angezeigt werden, nicht über den sozialen Symbolen, sondern über dem Logo. Ich bin sicher, es ist etwas Einfaches, aber ich kann es einfach nicht herausfinden. Ich dachte, ich würde es hier teilen, falls Sie irgendwelche Einsichten haben. Nochmals vielen Dank für die Veröffentlichung!

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.