Was tun mit nicht funktionierenden Links?

Ich bin momentan immer noch dabei, meine alten Artikel, die ich aus meinem Serendipity Blog übernommen habe, zu korrigieren, damit alles korrekt angezeigt wird. Dabei muss ich alle möglichen Sachen fixen: alte Links die noch aus uralten Wordpress-Zeiten stammen, alte interne Links, die noch auf den Serendipity-Pfad verweisen, Smilie-Grafik-Links in Text-Smilies zurückverwandeln und nicht zuletzt auch tote externe Links korrigieren.

Für letztere Aufgabe bin ich heute über das sehr nützliche Plugin Broken Link Checker gestolpert. Satte 98 Links wurden mir als nicht funktionsfähig angezeigt. Ein Großteil besteht aus Links auf eine Menge privater Fotos, die ich vor längerem leider aus Versehen gelöscht habe und die ich nicht wiederherstellen kann. Allerdings sind auch viele externe Links tot: sei es weil die Domain nicht mehr existiert oder sei es weil der Betreiber seine Website umstrukturiert hat.

Manches kann ich korrigieren, indem ich per Hand den neuen Link raussuche, manches lässt sich aber einfach nicht mehr wiederherstellen. Kein Wunder bei bis zu 5 Jahre alten Artikeln. Den Link ganz zu löschen, möchte ich aber auch nicht, weil ich ungern Geschichtsfälschung betreibe, der Artikel wurde vor 5 Jahren nunmal mit Link geschrieben, warum sollte ich den Artikel ändern nur weil der Link tot ist? Ausserdem beruht der Artikel zu einem Großteil auf einem Link, der Sinn des Artikels wäre nicht mehr nachvollziehbar, wenn der Link entfernt würde. Dann könnte ich auch gleich den Artikel ganz löschen. Die Links müssten also irgendwie gesondert markiert werden.

Zum Glück markiert der Broken Link Checker schon im Auslieferungszustand diese Links in Artikeln selbständig mit einer eigenen CSS-Klasse und formatiert die Links auf diese Weise automatisch als durchgestrichenen Text. So weiss der informierte Leser was los ist.

Da aber die wenigsten Leser so informiert sind, wäre es natürlich am schönsten, wenn noch zusätzlich ein kleiner Informationstext angezeigt würde. Für so etwas bieten sich Tooltips am besten an. Mit dem Broken Link Checker ist dies aber nicht direkt möglich, sondern erfordert etwas Zusatzarbeit.

Zuerst ist eine Änderung in der broken-link-checker.php des Plugins notwendig. In Zeile 124 muss folgender Text geändert werden:

return $matches[1].$matches[2].$matches[3].' class="broken_link"'.$matches[4].

Daran hängt man den Text als String in HTML-Schreibweise, der als Tooltip erscheinen soll und schliesst diesen mit einem Punkt ab (wichtig!):

"<span><h3>Nicht funktionsfähiger Link</h3>Dieser Link funktioniert nicht.</span>".

Die Zeile muss dann also so aussehen (alles direkt hintereinander in einer Zeile):

return $matches[1].$matches[2].$matches[3].' class="broken_link"'.$matches[4]."<span><h3>Nicht funktionsfähiger Link</h3>Dieser Link funktioniert nicht.</span>".

Der Code sorgt dafür, dass in den Link (<a>) ein <span>-Element eingefügt wird. Dies alleine würde aber nicht zum gewünschten Ziel führen einen Tooltip anzuzeigen. Dazu ist noch ein wenig CSS notwendig, das sich einfach in das dafür vorgesehene Feld in den Link Checker Optionen eingeben lässt:

a.broken_link, a.broken_link:link, a.broken_link:visited, a.broken_link:active  {
  position: relative;
  text-decoration: line-through;
  font-style: italic;
  color: #0000ff;
  }

a.broken_link:hover {
  color: #0000ff;
  background: transparent;
  }

a.broken_link span {
  display: none;
  text-decoration: none;
}

a.broken_link:hover span {
  display: block;
  position: absolute;
  top: 20px;
  left: 0;
  width: 300px;
  z-index: 100;
  color: #000000;
  border:1px solid #000000;
  background: #FFFFCC;
  font: 12px Verdana, sans-serif;
  text-align: left;
  }

a.broken_link span h3 {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weigth: bold;
  color: yellow;
  background-color: gray;
  border: 0px;
  border-bottom: 1px solid black;
}

Danach sollte es sofort funktionieren. Wenn der Benutzer mit der Maus über den weiterhin durchgestrichenen Text fährt, wird der Tooltip mit der Information angezeigt unter dem Mauszeiger angezeigt. Der Text des Tooltips kann natürlich beliebig angepasst werden, ebenso das Design des Tooltips selbst.

Quelle des Tooltips: webbe.de

Das Ende des Internets ?

… wurde bisher noch nicht gefunden, aber ich bin gerade dem Anfang näher gekommen. Wer sich schon immer gefragt hat, wo dieses ominöse CSS her kommt, von dem so viele HTML-Gurus faseln und was man alles grossartiges damit machen kann, sollte sich unbedingt an Microsoft wenden. Dort ist man von den Vorteilen von CSS wohl sehr überzeugt und zeigt eindrucksvoll was man damit machen kann!

Wer wirklich wissen will, wie mächtig CSS ist, sollte sich mal den CSS Zen Garden anschauen oder wie man mit CSS HTML-Listen zähmt.