Autor: Torben Brodt
Ich habe ein JavaScript entwickelt, mit dem ihr die Thumbshots als Linkvorschau nutzen könnt. Das Script reagiert auf das Bewegen der Maus über externe Links und blendet daraufhin unter dem Link eine Vorschau des Screenshots an.
Hier könnt ein Beispiel dafür sehen.
Zuerst müsst ihr definieren bei welchen Links die Vorschau angezeigt werden sollen. Meistens will man die Linkvorschau nur bei externen Seiten verwenden. Dazu stattet ihr alle externen Links mit einer HTML Klasse aus. Im Beispiel verwende ich die Klasse “externalURL”.
Beispiel:
<a class="externalURL" href="http://www.easy-coding.de">easy-coding.de</a>
Bindet das JavaScript für die Vorschau auf keinen Fall direkt von diesem Pfad ein, sondern ladet es euch stattdessen hier herunter und speichert die Datei dann auf eurem Webspace.
Google, Yahoo & Co empfehlen aus Performancegründen alle JavaScripts erst am Ende der Seite einzubinden. Deswegen solltet ihr den nun folgenden Code direkt vor das schließende Tag einfügen:
<script type="text/javascript">
// <![CDATA[
Bubble.init("externalURL", function (D) {
return '<img style="width: 150px; height: 100px;" src="http://m-software.de/screenshot/Screenshot.png?url='+ escape(D.href) +'&commingsoonimg=http://fadeout.de/images/thumbshot.png" alt="" />';});
// ]]>
<script type="text/javascript">
Ich bin Webmaster von easy-coding.de und habe das Script unter der LGPL v3 veröffentlicht. Ihr könnt das Script also kostenlos auf kommerziellen, sowieso auf nicht kommerziellen Seiten verwenden. Wenn ihr selbst Programmierer seit, dann interessiert euch vielleicht auch der Aufbau des Codes. Weitere Informationen zur Programmierung findet ihr im easy-coding wiki unter Link Vorschau Bubble.
Zuletzte solltet ihr nicht vergessen, dass der super Service von Michael kostenlos ist, er aber auf unterstützende Links angewiesen ist. Deswegen lest die Thumbshots FAQ und vergesst nicht den Link zu seiner Seite.
<a class="externalURL" href="http://m-software.de/thumbshots-html">Thumbshots von M-Software.de</a>
Weiterführende Themen: