WebImageSnap für jQuery

Mit ”WebImageSnap” lassen sich Bilder auf Webseiten als Links einbinden. Als
kleines Beispiel dient
Wilhelm Busch (durch Mouseover öffnet sich das Bild).

Das Prinzip ist ähnlich wie bei Snap Preview Anywhere (oder WebSnapr) allerdings wird bei ”WebImageSnap” nur das verlinkte Bild dynamisch per Ajax dargestellt.

Hierdurch ergeben sich folgende Vorteile:

  • fairerweise kann man, da ja nur ein Link, die Quelle des Bildes erkennen (erscheint wie üblich unten in der Statuszeile)
  • durch Anklicken des Links landet man direkt auf der referenzierten Site
  • der gefürchtete bandwidth theft bleibt fast aus, da das Bild nur geladen wird, wenn der Leser (oder besser ”Schauer”) es explizit sehen will (und nicht bei jedem Pageload)

Die Grundidee dahinter steht in meine Blog.

Grundlage

WebImageSnap ist nur eine kleine Erweiterung der jquery-Bibliothek. Es wird beim MouseOver-Event der angegebene Link als Bild geholt und quasi als Tooltip eingeblendet.

Installation

Dies ist doch ein Tutorial. Du musst dich schon ein wenig mühen und die Sache bei dir selbst einbauen!

So geht’s

Zuerst legen wir mal den Style für das Popup fest. Hierzu nimmst du dein Standard-Stylesheet (in WordPress z.B.style.css) und fügst folgenden Style für den Tooltip hinzu:

.ttimagesnap_style {
  text-align: center;
  font: 10px Arial,Helvetica,sans-serif;
  border: solid 1px #666666;
  background-color: #ffffff;
  padding: 1px;
  position: absolute;
  z-index: 100;
}

Du kannst den Style natürlich deinen Wünschen und deiner Site entsprechend anpassen.

Dann musst du natürlich (wenn nicht schon geschehen)
jquery-Download als “jquery.js” auf deinen Server hochladen, an zentraler Stelle einbinden und noch ein bisschen Javascript-Code hinzufügen.

Bei WordPress z.B. im Theme deiner Wahl in header.php (Bei WordPress brauchst du jQuery selbst nicht mehr einbinden – das gibt es schon frei Haus dazu).
Weiterlesen