Icon austauschen

[Bernd]

Hallo,

kurze Frage, macht man dieses so wenn man eine Datei einbindet diese aber auf Unterseiten anderes darstellen möchte oder mache ich es wieder viel zu kompliziert?

<ul>
	<li><a href="step-01.php">
			<?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?>
			<img src="img/icons/next-green.png">
			<?php else: ?>
			<img src="img/icons/next.png">	
			<?php endif ?>Grundinformationen</a></li>
			
	<li><a href="step-02.php">
			<?php if ($_SERVER['PHP_SELF'] == "/step-02.php"): ?>
			<img src="img/icons/next-green.png">
			<?php else: ?>
			<img src="img/icons/next.png">	
			<?php endif ?>Rechnungsdetails</a></li>
			
	<li><a href="step-03.php">
			<?php if ($_SERVER['PHP_SELF'] == "/step-03.php"): ?>
			<img src="img/icons/next-green.png">
			<?php else: ?>
			<img src="img/icons/next.png">	
			<?php endif ?>Ansprechpartner</a></li>
			
	<li><a href="step-04.php">
			<?php if ($_SERVER['PHP_SELF'] == "/step-04.php"): ?>
			<img src="img/icons/next-green.png">
			<?php else: ?>
			<img src="img/icons/next.png">	
			<?php endif ?>Sonstiges</a></li>
</ul>

[Rolf B]

Hallo Bernd,

ich würde es wieder mal mit einer Funktion lösen. Man könnte überlegen, eine Schleife zu programmieren und die Titel und Links in einem Array zu halten - das scheint mir hier aber übertrieben zu sein.

<ul>
   <li><?= createNavigationLink("Grundinformationen", "/step-01.php") ?><li>
   <li><?= createNavigationLink("Rechnungsdetails", "/step-02.php") ?><li>
   <li><?= createNavigationLink("Ansprechpartner", "/step-03.php") ?><li>
   <li><?= createNavigationLink("Sonstiges", "/step-04.php") ?><li>
</ul>

und in der Funktions-Sammlung steht ein kleiner Generator für HTML Fragmente als String.

function createNaviationLink($titel, $target)
{
   if ($_SERVER['PHP_SELF'] == $target) 
      $image = "next-green";
   else
      $image = "next";

   return "<a href='$target'><img src='img/icons/$image.png'>" .
          htmlspecialchars($titel) .
          "</a></li>";
}

Das Code-Highlighting im ersten Teil ist irgendwie falsch - ich sehe aber keinen Tippfehler von mir.

Wenn Du zwei Links in der Navigation hast, die mit Query-Parametern arbeiten und sich nur im Query-Parameter unterscheiden ("step-01.php?view=x" und ("step-01.php?view=y"), dann kommst Du mit PHP_SELF nicht weiter, dann musst Du ggf. REQUEST_URI verwenden. Es kann dann kompliziert werden 😉

Rolf

[ursus contionabundo]

Kann man so machen oder mit der Funktion von Rolf B. Je mehr Teile es werden um so mehr würde ich Dir den Vorschlag von Rolf B. nahelegen. Spart Dir später (bei Änderungen) Arbeit.

Allerdings ist es wohl "moderner", ein großes Formular zu bauen und Teile desselben aus- bzw. einzublenden.

Also (ich zeige modellhaft das Resultat in html)

<style>
div.parts {
   display:none;
}
div.parts:target {
   display:block;
}
</style>

<form ...>
  <div class="parts" id="part1">
  …
    <a class="wbtn" href="#part2">weiter</a>
  </div>
  <div  class="parts" id="part2">
  …
    <a class="bbtn" href="#part1">zurück</a>
  </div>
  …
</form>

Die "Buttons" kannst Du mit einem "onload" mit Javascript versorgen, welches den "href" entfernt, die "browserlokale" Prüfung der Antwort ausführt und im positive Fall dann das "Weitergehen", am Ende den Submit veranlasst.

Das erspart Dir serverseitig Stress, denn Du hast dann nur noch eine Antwort mit den Formulardaten von allen vier Teilen des Formulars. Und es z.B. spätestens dann leichter, wenn irgend wann ein schlauer Kopf auf die Idee kommt, dass der Part mit dem Ansprechpartner mit der Liefer- oder Rechnungsadresse zusammen gezeigt werden soll...

Das muss man aber nicht - man kann es in Erwägung ziehen. Vorliegendes "seitenweise" zu machen hat ja auch seine Freuden.

[Matthias Apsel]

Hallo Bernd,

ich würde mit verschiedenen Hintergrundbildern im CSS arbeiten.

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Bernd,

es geht Dir offensichtlich um eine URL-sensitive Bebilderung/Icon-Auswahl. Daher würde ich ähnlich wie @Rolf B eine Funktion benutzen, aber nicht nur innerhalb der <li>, sondern für die gesamte Liste.

Desweiteren würde ich dafür überhaupt keine img-Elemente verwenden (Du vergisst bei ihnen jedes Mal das zwingend erforderliche alt-Attribut!), sondern nur Klassennamen vergeben, die mithilfe von passenden Gestaltungsregeln mit CSS dann die Icons verpasst bekommen:

<ul id="next">
  <li><a href="step-01.php">Grundinformationen</a></li>
  <li><a class="current" href="step-02.php">Rechnungsdetails</a></li>
  <li><a href="step-03.php">Ansprechpartner</a></li>
  <li><a href="step-04.php">Sonstiges</a></li>
</ul>

Damit das mit PHP erreicht werden kann, bietet sich etwas in dieser Art an:

function create_navi_list () {
  $html = '';
  $pages = array(
    'Grundinformationen',
    'Rechnungsdetails',
    'Ansprechpartner',
    'Sonstiges'
  );

  for ($i = 0; $i < count($pages); $i++) {
    $step = sprintf('step-%02d.php', $i +1);

    $html .= sprintf(
      '<li><a %1$Shref="%2$s">%3$s</a></li>',
      ($_SERVER['PHP_SELF'] == $step ? 'class="current" ' : ''),
      $step,
      $pages[$i]
    );
  }

  return sprintf('<ul id="next">1$s</ul>', $html);
}

In Deinem CSS-Code steht dann etwas in dieser Art:

#next a {
  background: url(img/icons/next.png) left center no-repeat;
  padding-left: 1em;
}

#next a.current {
  background-image: url(img/icons/next-green.png);
}

oder mache ich es wieder viel zu kompliziert?

Wie ich finde, machst Du es noch nicht kompliziert genug. Warum verwendest Du PHP-Scriptdateien mit den Namen "step-0n.php"? Warum verwendest Du nicht nur eine, in der die Logik für alle Schritte enthalten ist? Und wenn Du mehrere Dateien haben willst, um z.B. besseren Überblick zu behalten, warum werden die dann nicht von einem zusätzlichen Script verwaltet, das dann "weiß", was die jeweiligen Scripte leisten, um die Variable $pages in meinem Beispiel automatisch zu befüllen?

Man kann ein PHP-Script so aufrufen: /path/to/my/script.php.
Das geht aber auch auf diese Art: /path/to/my/script.php/und/noch/Quatsch/mit/Soße,
wobei der Zusatz "/und/noch/Quatsch/mit/Soße" nicht stört. Das kann man sich zunutze machen und in einem PHP-Script auswerten. Deine Links könnten so aussehen:

• /index.php/info
• /index.php/details
• /index.php/contact
• /index.php/more

Was bisher Deine Scripte "step-01.php" usw. waren, sind nun passende include-Anweisungen:

// reduce "/path/to/index.php/step-01" to "step-01"
$step = preg_replace('~.*/~', '', $_SERVER['REQUEST_URI']);

if (is_file(__DIR__."/$step.php")) {
  include(__DIR__."/$step.php");
}

Ein grundsätzlich blöder Nachteil ist, dass man ja die einzelnen PHP-Scripte noch immer direkt aufrufen kann, anstatt über das zentrale Script "index.php". Da wäre es dann tatsächlich besser, wenn die einzelnen Scripte in "index.php" integriert wären. Das geht, indem man das, was in einer externen Script-Datei stand, in eine jeweilige Funktion packt:

function info () {
  $html = "";

  ...

  return $html;
}

function details () {
  $html = "";

  ...

  return $html;
}

function contact () {
  ...
}

function more () {
  ...
}

// don't allow any other functions!
$allowed = array('info', 'details', 'contact', 'more');

// default HTML code
$html = file_get_contents(__DIR__.'/start.html');

// what is requested?
$page = preg_replace('~.*/index\.php/~', '', $_SERVER['REQUEST_URI']);

if (in_array($page, $allowed)) {
  $html = {$page}();
}

echo $html;

Vielleicht ist ja etwas für Dich dabei, von dem Du findest, dass es Dir das Leben leichter macht?

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Bernd

			<img src="img/icons/next-green.png">

Da fehlt was! img-Elemente brauchen alt-Attribute, ansonsten lesen Screenreader den Dateinamen vor. Wenn kein Alternativtext vorhanden ist, dann alt="" setzen.

Die Icons scheinen hier aber doch eher schmückendes Beiwerk zu sein, das man per CSS als Hintergrundbild einbinden sollte.

	<li><a href="step-01.php">
			<?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?>
			<img src="img/icons/next-green.png">
			<?php else: ?>
			<img src="img/icons/next.png">	
			<?php endif ?>Grundinformationen</a></li>

Der aktuelle Menüpunkt sollte nicht nur per Icon als solcher gekennzeichnet sein; das a-Element sollte ein Attribut aria-current="page" verpasst bekommen.

Das lässt sich dann auch zur Anzeige das Icons nutzen:

nav a { background-image: url(img/icons/next.png) }
nav a[aria-current="page"]  { background-image: url(img/icons/next-green.png) }

Außerdem sollte die aktuelle Seite nicht verlinkt sein. Entweder gar kein href-Attribut (dann aber tabindex="0") oder den Menüpunkt zum Hauptinhalt der Seite (bspw. <main id="main">) verlinken:

<li>
	<a
		<?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?>
			aria-current="page" tabindex="0"
		<?php else: ?>
			href="step-01.php"
		<?php endif; ?>
	>
		Grundinformationen
	</a>
</li>

bzw.

<li>
	<a
		<?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?>
			aria-current="page" href="#main"
		<?php else: ?>
			href="step-01.php"
		<?php endif; ?>
	>
		Grundinformationen
	</a>
</li>

Wenn das Icon doch im Markup eingebunden wird (was auch bei SVG-Icons der Fall wäre ☞ Teil 1 • Teil 2), sähe da so aus:

<li>
<?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?>
	<a aria-current="page" tabindex="0">
		<svg><use xlink:href="img/icons.svg#next-green"/></svg>
<?php else: ?>
	<a href="step-01.php">
		<svg><use xlink:href="img/icons.svg#next"/></svg>
<?php endif; ?>
		Grundinformationen
	</a>
</li>

Wenn sich aber die Icons next-green und next lediglich in der Farbe unterscheiden sollen, braucht man nur ein Icon und die Farbe wäre ein Fall für CSS:

<li>
	<a
		<?php if ($_SERVER['PHP_SELF'] == "/step-01.php"): ?>
			aria-current="page" tabindex="0"
		<?php else: ?>
			href="step-01.php"
		<?php endif; ?>
	>
		<svg><use xlink:href="img/icons.svg#next"/></svg>
		Grundinformationen
	</a>
</li>

Icon in der Schriftfarbe des jeweiligen Links:

nav svg { fill: currentColor }

LLAP 🖖

[beatovich]

hallo

Außerdem sollte die aktuelle Seite nicht verlinkt sein. Entweder gar kein href-Attribut (dann aber tabindex="0") oder den Menüpunkt zum Hauptinhalt der Seite (bspw. <main id="main">) verlinken:

So nebenbei, ich bin für einen html feature Request. Browser haben Links, die die aktuelle präsentieren, autmatisch mit dem aria-current="page" Attribut zu versehen.

[Matthias Apsel]

Hallo beatovich,

So nebenbei, ich bin für einen html feature Request. Browser haben Links, die die aktuelle präsentieren, autmatisch mit dem aria-current="page" Attribut zu versehen.

Hm. Zumindest innerhalb von Navigationen wäre der Vorschlag überdenkenswert. Und im Browser-JavaScript dann

linkstocurrentpage = querySelectorAll('[arria-current="page"]not([href*="#"])');
for(i = 0; i < linkstocurrentpage; i++) {
  linkstocurrentpage[i].removeAttribute('href');
}

Bis demnächst
Matthias

[beatovich]

hallo

Hallo beatovich,

So nebenbei, ich bin für einen html feature Request. Browser haben Links, die die aktuelle präsentieren, autmatisch mit dem aria-current="page" Attribut zu versehen.

Hm. Zumindest innerhalb von Navigationen wäre der Vorschlag überdenkenswert.

überall!

Und im Browser-JavaScript dann

linkstocurrentpage = querySelectorAll('[arria-current="page"][href*="#"]');
for(i = 0; i < linkstocurrentpage; i++) {
  linkstocurrentpage[i].removeAttribute('href');
}

Warum soll ein Link entfernt werden?

Da kannst du ja gleich den Link zu Beginn vermeiden.

Die Idee meines Vorschlags ist, dass es einen Grund weniger gibt, Javascript anzuwerfen.

[Matthias Apsel]

Hallo beatovich,

Warum soll ein Link entfernt werden?

Damit man nicht draufklickt und sich wundert.

Natürlich kann man Links auf die aktuelle Seite verhindern.

Bis demnächst
Matthias

[Felix Riesterer]

Lieber beatovich,

So nebenbei, ich bin für einen html feature Request. Browser haben Links, die die aktuelle präsentieren, autmatisch mit dem aria-current="page" Attribut zu versehen.

spricht da nicht die reine Bequemlichkeit des Seitenautors? Eine solche Implementierung verursacht sicher den ein oder anderen ungewollten Nebeneffekt!

Liebe Grüße,

Felix Riesterer.

[beatovich]

hallo

Lieber beatovich,

So nebenbei, ich bin für einen html feature Request. Browser haben Links, die die aktuelle präsentieren, autmatisch mit dem aria-current="page" Attribut zu versehen.

spricht da nicht die reine Bequemlichkeit des Seitenautors? Eine solche Implementierung verursacht sicher den ein oder anderen ungewollten Nebeneffekt!

Es spricht hier die Sparsamkeit des Resourcenverbrauchs. Es kostet weniger, Browserproduzenten zu überzeugen, als alle Contentdesigner zu erinnern, dass die unbedingt ihre eigene Logik anwerfen müssen.

[Felix Riesterer]

Lieber beatovich,

Es spricht hier die Sparsamkeit des Resourcenverbrauchs. Es kostet weniger, Browserproduzenten zu überzeugen, als alle Contentdesigner zu erinnern, dass die unbedingt ihre eigene Logik anwerfen müssen.

das unterzeugt mich sehr. Insbesondere die Tatsache, dass solche "Features" zu unerwartetem Verhalten führen...

Liebe Grüße,

Felix Riesterer.