Sprachflaggen-Sprites

So erstellen Sie CSS und HTML für einen Hyperlink mit Sprite-Bild für mehrere Sprachflaggen in Visual Studio.

Einführung

Ein wesentlicher Bestandteil von Ousia CMS ist die mehrsprachige Verwaltungsseite, auf der alle Elemente automatisch generiert und verknüpft werden. Es steht dann ein Steuerelement zur Verfügung, mit dem Sie eine Dropdown-Liste haben können, die Links zu den Inhalten in den anderen Sprachen anzeigt, oder eine Reihe von Hyperlinks mit Flaggenbildern (entweder in 32 Pixel oder 64 Pixel), um die Sprache anzugeben.

Wir verwenden das folgende Element auf der rechten Seite als Hintergrund und dann etwas CSS, um die Position des Elements gemäß der Dropdown-Liste unten zu steuern.

Bitte zögern Sie nicht, das Sprite-Bild und CSS zu verwenden, verwenden Sie es jedoch bitte von Ihrem eigenen Server! Alle Assets stehen unten zum Download zur Verfügung.

Erstellen der Struktur

Lassen Sie uns zunächst die Struktur erstellen. Wenn Sie nur für das CSS hier sind, überspringen Sie diesen Schritt.

Erstellen Sie ein neues leeres Projekt namens Flags.
Fügen Sie eine neue CSS-Datei namens flags.css hinzu
Fügen Sie eine neue HTML-Datei namens flags.htm hinzu
Fügen Sie ein vorhandenes Element namens FlagSprite_32_22.png hinzu
Fügen Sie ein vorhandenes Element namens FlagSprite_64_45.png hinzu

Wir haben jetzt alle benötigten Assets, also öffnen wir die Datei flags.css (falls noch nicht geschehen) und kopieren das folgende CSS.

CSS

body a{margin:10px;float:left;}/*22 high by 32 wide*/.ouFlgCS32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px   -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgDE32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px  -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgEN32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px  -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgES32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px  -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgFR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgHI32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgIT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px  -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgPL32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgPT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgRU32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px  -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgTR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgZH32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}/*44 high by 64 wide*/.ouFlgCS64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px     -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgDE64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px    -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgEN64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px   -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgES64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px    -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgFR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px   -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgHI64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px  -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgIT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px    -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgPL64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px   -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgPT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px  -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgRU64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px   -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgTR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px  -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgZH64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}

Erstellen der Struktur

Dadurch wurden 12 verschiedene CSS-Klassen sowohl für 32x22- als auch für 64x44-Pixel-Varianten des Bildes erstellt. Innerhalb jeder Klasse haben wir das relevante Hintergrundbild, die relevante Höhe und Breite und den Anzeigestil auf blockieren gesetzt.

Der wichtigste Teil ist, wo die Position geändert wird, wodurch dann nur der relevante Ausschnitt des Bildes angezeigt wird, wie im Dropdown unten gezeigt.

Zusätzliches CSS fügt einen Box-Schatten und einen Randradius für Browser ein, die dies unterstützen.

Als nächstes fügen wir die Links zur Testseite hinzu, kopieren Sie also den HTML-Code unten in Flags.htm

HTML

<div>32 Pixels Wide</div><a href="/Ousia.css" class="ouFlgCS32"></a><a href="/Ousia.css" class="ouFlgDE32"></a><a href="/Ousia.css" class="ouFlgEN32"></a><a href="/Ousia.css" class="ouFlgES32"></a><a href="/Ousia.css" class="ouFlgFR32"></a><a href="/Ousia.css" class="ouFlgHI32"></a><a href="/Ousia.css" class="ouFlgIT32"></a><a href="/Ousia.css" class="ouFlgPL32"></a><a href="/Ousia.css" class="ouFlgPT32"></a><a href="/Ousia.css" class="ouFlgRU32"></a><a href="/Ousia.css" class="ouFlgTR32"></a><a href="/Ousia.css" class="ouFlgZH32"></a></div><div style="clear:both"><div>64 Pixels Wide</div><a href="/Ousia.css" class="ouFlgCS64"></a><a href="/Ousia.css" class="ouFlgDE64"></a><a href="/Ousia.css" class="ouFlgEN64"></a><a href="/Ousia.css" class="ouFlgES64"></a><a href="/Ousia.css" class="ouFlgFR64"></a><a href="/Ousia.css" class="ouFlgHI64"></a><a href="/Ousia.css" class="ouFlgIT64"></a><a href="/Ousia.css" class="ouFlgPL64"></a><a href="/Ousia.css" class="ouFlgPT64"></a><a href="/Ousia.css" class="ouFlgRU64"></a><a href="/Ousia.css" class="ouFlgTR64"></a><a href="/Ousia.css" class="ouFlgZH64"></a></div>

Debug flags.htm in your browser and you should have 24 separate flags.

Website-Design von Claytabase

Dies ist ein Codeabschnitt, der aus dem Code des Ousia Content Management System modifiziert wurde, einem der schnellsten und am besten optimierten Systeme auf dem Markt, Teil unserer Website-Design-Services.

Diese sind mit Websites ab etwa 500 £ erhältlich.

mehr: Reaktionsschnell und schnell. Webentwicklung, Design und Hosting mit Content Management System