Zwei Grafiken klickbar machen

[Achot]

Hallo,

eine Frage, wie würdet ihr diese Grafik klickbar machen? Diese Grafik teilen und als <img> einbinden, oder einem Link eine Hintergrund-Grafik verpassen, sollte dieses erlaubt sein?

[Gunnar Bittersmann]

@@Achot

eine Frage, wie würdet ihr diese Grafik klickbar machen? Diese Grafik teilen und als <img> einbinden, oder einem Link eine Hintergrund-Grafik verpassen, sollte dieses erlaubt sein?

Weder noch. Sondern:

<svg hidden>
  <defs>
    <symbol id="kacheln"> … </symbol>
    <symbol id="liste"> … </symbol>
  </defs>
</svg>

<a href="…">
  <svg role="img">
    <title>Kachelansicht</title>
    <use xlink:href="#kacheln"/>
  </svg>
</a>

<a href="…">
  <svg role="img">
    <title>Listenansicht</title>
    <use xlink:href="#liste"/>
  </svg>
</a>

Bist du sicher, dass das Links sind? Sieht mir eher nach Buttons aus.

LLAP 🖖

[Achot]

Hallo,

danke für den Code. Und wie bekomme ich aus den beiden Grafiken einen SVG Code um diesen bei den ... einfügen zu können?

Button oder Links, gute Frage. Ich bin für ein Link, denn ich möchte nur eine Ansicht wechseln, hierbei wird ein Update in der Datenbank durchgeführt. Daher ist es egal ob ein Button oder Link ist?

[Gunnar Bittersmann]

@@Achot

danke für den Code. Und wie bekomme ich aus den beiden Grafiken einen SVG Code um diesen bei den ... einfügen zu können?

Aus dem Vektorgrafikprogramm deiner Wahl. Oder bei einfachen Grafiken wie hier aus dem Texteditor deiner Wahl.

Button oder Links, gute Frage. Ich bin für ein Link, denn ich möchte nur eine Ansicht wechseln, hierbei wird ein Update in der Datenbank durchgeführt. Daher ist es egal ob ein Button oder Link ist?

Nein, das ist nie egal.

Links führen zu anderen Stellen im Web: zu anderen Seiten oder zu anderen Abschnitten auf derselben Seite.

Buttons lösen Aktionen aus: Abschicken eines Formulars, irgendeine JavaScript-Funktion aufrufen, …

Ein Wechsel der Ansicht dürfte eher in die zweite Kategorie gehören.

Wann immer sowas wie <a href="#"> oder <a href="javascript:…"> auftaucht, ist es mit ziemlicher Sicherheit falsch; da sind Buttons angesagt.

LLAP 🖖

[Achot]

Hallo,

Aus dem Vektorgrafikprogramm deiner Wahl. Oder bei einfachen Grafiken wie hier aus dem Texteditor deiner Wahl.

mit einem Texteditor? Kannst du ein Bild auswendig auswendig in einem Texteditor schreiben? 😱

Wann immer sowas wie <a href="#"> oder <a href="javascript:…"> auftaucht, ist es mit ziemlicher Sicherheit falsch; da sind Buttons angesagt.

Derzeit habe ich es so

<?php if($object->layout == "raster"): ?>
  
  <a class="aktuell" href="<?php echo $_SERVER['PHP_SELF']; ?>?l=raster">Raster</a> - 
  <a href="<?php echo $_SERVER['PHP_SELF']; ?>?l=liste">Liste</a>

<?php else: ?>

  <a href="<?php echo $_SERVER['PHP_SELF']; ?>?l=raster">Raster</a> - 
  <a class="aktuell" href="<?php echo $_SERVER['PHP_SELF']; ?>?l=liste">Liste</a>

<?php endif; ?>

[Julius]

Hallo Achot,

Aus dem Vektorgrafikprogramm deiner Wahl. Oder bei einfachen Grafiken wie hier aus dem Texteditor deiner Wahl.

mit einem Texteditor? Kannst du ein Bild auswendig auswendig in einem Texteditor schreiben? 😱

Du kannst das auch:

<svg viewbox="0 0 80 65">
 <rect x="5" y="5" width="20" height="25" fill="#323232"/>
 <rect x="30" y="5" width="20" height="25" fill="#323232"/>
 <rect x="55" y="5" width="20" height="25" fill="#323232"/>
 <rect x="5" y="35" width="20" height="25" fill="#323232"/>
 <rect x="30" y="35" width="20" height="25" fill="#323232"/>
 <rect x="55" y="35" width="20" height="25" fill="#323232"/>
</svg>

ergibt:

Erfordert nur einen kurzen Blick ins Wiki.

Gruß
Julius

[Gunnar Bittersmann]

@@Achot

Aus dem Vektorgrafikprogramm deiner Wahl. Oder bei einfachen Grafiken wie hier aus dem Texteditor deiner Wahl.

mit einem Texteditor? Kannst du ein Bild auswendig auswendig in einem Texteditor schreiben? 😱

Na logo. 😏

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Na logo. 😏

Oops, ich wollte direkt auf Logo und handgeschriebenen SVG-Quelltext verweisen. Link geändert.

LLAP 🖖

[Gunnar Bittersmann]

@@Achot

Derzeit habe ich es so

<?php if($object->layout == "raster"): ?>
  
  <a class="aktuell" href="<?php echo $_SERVER['PHP_SELF']; ?>?l=raster">Raster</a> - 
  <a href="<?php echo $_SERVER['PHP_SELF']; ?>?l=liste">Liste</a>

<?php else: ?>

  <a href="<?php echo $_SERVER['PHP_SELF']; ?>?l=raster">Raster</a> - 
  <a class="aktuell" href="<?php echo $_SERVER['PHP_SELF']; ?>?l=liste">Liste</a>

<?php endif; ?>

Die aktuelle Seite solltest du mit dem ARIA-Attribut <a aria-current="page" href="…"> kennzeichnen, dann haben auch Screenreader-Nutzer was davon. Die Klasse "aktuell" brauchst du dann nicht mehr. Zum Stylen kannst du statt des Klassenselektors .aktuell den Attributselektor [aria-current="page"] verwenden.

Den Pfad zur aktuellen Seite $_SERVER['PHP_SELF'] musst du auch nicht reinschreiben; die Links kannst du relativ angeben: <a href="?l=liste"> bzw. <a href="?l=raster">.

Es macht auch wenig Sinn, die aktuelle Ansicht zu verlinken. Da einfach das href-Attribut weglassen. Sähe dann so aus:

<?php if($object->layout == "raster"): ?>
  
  <a aria-current="page">Raster</a> - 
  <a href="?l=liste">Liste</a>

<?php else: ?>

  <a href="?l=raster">Raster</a> - 
  <a aria-current="page">Liste</a>

<?php endif; ?>

Eine andere Möglichkeit, dasselbe HTML zu generieren:

  <a
<?php if($object->layout == "raster"): ?>
    aria-current="page"
<?php else: ?>
    href="?l=raster"
<?php endif; ?>
  >Raster</a> - 
  <a
<?php if($object->layout == "liste"): ?>
    aria-current="page"
<?php else: ?>
    href="?l=liste"
<?php endif; ?>
  >Liste</a>

(Kaputte Syntax-Highlighter sind kaputt.)

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Button oder Links, gute Frage. Ich bin für ein Link, denn ich möchte nur eine Ansicht wechseln, hierbei wird ein Update in der Datenbank durchgeführt.

Warum soll bei „nur eine Ansicht wechseln“ irgendwas in der Datanbank geändert werden?

Der Wechsel der Ansicht kann doch rein clientseitig erfolgen, ohne dass dazu der Server und ein Roundtrip involviert sein muss. Die angewählte Darstellungsart kann man auch in localStorage oder Cookie ablegen, damit der Nutzer beim nächsten Seitenaufruf wieder dieselbe Darstellungsart präsentiert bekommt.

Daher ist es egal ob ein Button oder Link ist?

Nein, das ist nie egal.

Links führen zu anderen Stellen im Web: zu anderen Seiten oder zu anderen Abschnitten auf derselben Seite.

Buttons lösen Aktionen aus: Abschicken eines Formulars, irgendeine JavaScript-Funktion aufrufen, …

Ein Wechsel der Ansicht dürfte eher in die zweite Kategorie gehören.

Man könnte auch argumentieren, dass Kachelansicht und Listenansicht verschiedene Seiten sind und ein Wechsel in der Browserhistory festgehalten werden sollte. Aber: nein …

Es sind zwei Darstellungsformen derselben Daten, d.h. derselben Seite. Und wenn die Daten schon beim Client sind, muss für eine andere Darstellung nichts vom Server neu geladen werden.

Den Wechsel der Darstellungsformen geschieht rein cleientseitig mit CSS. Dazu muss lediglich eine Klasse des Containerelements geändert werden. Dazu braucht man nur einen Button.

☞ CodePen 1

Das Stylen des Buttons überlasse ich mal dir. Denkbar ist auch eine unterschiedliche Darstellung des Button je nach aktueller Darstellungsform, d.h. je nach Klasse des Containerelements.

Anstatt eines Buttons zum Wechsel der Darstellungsformen können auch Radiobuttons verwendet werden, die visuell versteckt werden und über deren Labels geschaltet werden.

☞ CodePen 2

LLAP 🖖