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).

Das Snippet sieht aus wie folgt (funktioniert für JQuery 1.2 und 1.3):

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // append the visual indicator to all links with class "imagesnap"
  $("a[class='imagesnap']").append(
    "<img src='http://yourdomain/magnify.png' border='0' />");
  // react when user hovers a link with class "imagesnap"
  $("a[class='imagesnap']").hover(function(e) {
    // find the real element: the "a"-tag
    trgt = $(e.target).is("a") ? $(e.target) : $(e.target).parents("a");
    // the html needed for displaying the image, get the image-link
    // from the above element-attribute "href"
    html = "<div id='ttimagesnap' class='ttimagesnap_style'><img src='"
        + trgt.attr("href")
        + "' border='0' /><br /><i>WebImageSnap</i> - www.vogel-nest.de</div>";
    // simply append the popup-image and do some styling
    $(html).appendTo("body");
    $('#ttimagesnap').css({
        left: (e.pageX + 10) + 'px',
        top: (e.pageY + 10) + 'px'});
    $('#ttimagesnap').show();
  },function(e) {
    // this is called when user "unhovers"
    $('#ttimagesnap').remove();
  });
});
// --></script>
</head>

Die Zeile

$("a[class='imagesnap']").append(
  "<img src='http://yourdomain/magnify.png' border='0' />");

dient nur dazu die “Bild”-Links mit einem Icon zu verzieren (ein visual Indicator), so dass der Benutzer auch bemerkt,
dass hier ein Bild hinterliegt.

Das Indikator-Bild (hier ist es magnify.png) suchst du dir natürlich selbst aus und legst es auf deinem Server ab.

Erzeugen eines Bild-Links

Ein Bild derart zu verlinken, dass es nur bei MouseOver geladen und angezeigt wird, ist nun mehr als einfach. Du verlinkst einfach das Bild:
Das beliebte Beispiel: Wilhelm Busch sieht also so aus:

<a href='http://upload.wikimedia.org/wikipedia/commons/3/3b/Wilhelm_busch.png'
class='imagesnap'>Wilhelm Busch</a>

Im href-Attribut gibst du einfach den Bild-Link an und nicht vergessen das class-Attribut mit imagesnap zu belegen. Fertig!

Nachtrag 1

Die erste Weiterentwicklung hat sich schon ergeben. Man kann nun auch die Höhen und Breiten angeben und damit die Größe des Bildes im Tooltip festlegen. Einfach:

<a href='http://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg'
class='imagesnap'
height='140'>Bild</a>

das Attribut height mit im a-Tag setzen und schon ist das Bild klein.

In WordPress RichText-Editor kannst du das z.B. über den Reiter “HTML” einfügen:
imagesnap_wp

Hast du eine gute Anleitung zum Einbinden von WebImageSnap in das CMS deiner Wahl geschrieben? Hinterlasse mir ein Kommentar, ich verlinke gerne auf dein Tutorial.

Nachtrag 2 (vom 24. März 2009)

Ich hatte im obigen Beispiel bereits die in JQuery 1.2 “deprecated” @style-Selektion (also z.B.

$("a[@class='imagesnap']").hover(function(e) { ...

genutzt (Danke an Dieter für den Hinweis).

Diese wird nun zu recht in JQuery 1.3 nicht mehr unterstützt.
Attribute können jetzt einfach so (ohne @) selektiert werden:

$("a[class='imagesnap']").hover(function(e) { ...

Die Beispiel oben sind jetzt auch für JQuery 1.3 lauffähig.
Nähere Hinweise unter s. http://docs.jquery.com/Selectors.

Recent Related Posts

36 Gedanken an “WebImageSnap für jQuery

  1. Krasse Idee … und so einfach. Aber der “Bildlink” (gibt es dafür nicht schon eine Bezeichnung?) müsste wohl deutlicher gekennzeichnet sein.

  2. Vielen Dank Stefan!

    Seit zwei Wochen suche ich schon soetwas.

    Das ich deinen Link gerade auf der jquery Homepage finde, war ein super Zufall.

    Nochmal Danke, und weiter so.

  3. Hallo Stephan,

    sehr gute Idee und sauber zum nachmachen erklärt, SUPER!!!
    Ein kleine Problem ergiebt sich jedoch, wenn eine Tabelle mit Bildern gefüllt und an letzter rechter Stelle steht, wird das Bild rechts vom Kurser und damit ausserhalb des Bildschirms angezeigt, vielleicht kann man da noch etwas nachbessern. z.B. wenn die Position zum rechten Rand kleiner ist wie die des Bildes in der Breite sollte die Vorschau links vom Kurser angezeigt werden.
    Hab da mal ein Beispiel gesetzt.

  4. Auch sehr interessant ist, wenn man für die Bild-URL bspw. das name-attribut verwendet damit man bspw. den Link dennoch auf eine HTML-Seite lenken kann, bspw. bei einem Shop in der Übersicht bekommt man die Preview und wenn man auf den Link klickt kommt man zum Artikel. Die meisten anderen Tooltips die Bilder unterstützen laden die Bilder bereits mit der ganzen Seite.

    • Ich mag das Kommentar über Coden und Poesie… und ich kann dem nur zustimmen…. programmieren kann jeder früher oder später lernen genau wie lesen und schreiben aber was man damit macht, wie man sich ausdrückt…. da wird die Grenze zu Kunst sehr schmal… Es sollt preise geben für sehr kreatives Programmieren oder gibt es die schon?

      LG

  5. Das ist wirklich eine super Lösung, genau danach habe ich gesucht. Coden ist wie Gedichte schreiben, manch einer kann es nunmal besser als andere, und auch hier gilt ebenso wie in der Lyrik: In der Kürze liegt die Würze! Danke!

  6. Hallo,
    gute Sache. Danke.
    Zwei Anmerkungen. Das Hovern klappt. Aber beim Klicken auf den Hoverauslöser (zum Beispiel der hervorgehobene Text “Wilhelm Busch”) landet man auf einer neuen Seite mit dem Bild/Foto, das man eigentlich nur als Snap Preview sehen wollte. Ließe sich dies deaktivieren, oder noch besser: könnte man nicht für den Mausklick einen anderen Href-Verweis ansteuern als beim Maushover?
    Zweitens: Der Hover-Bereich (also der Text “Wilhelm Busch”) darf sich nicht mit dem gehoverten (also dem Bild von W.B.) überlappen, sonst geht eine großes Geflacker los, wenn die Maus diesen gemeinsamen Bereich überfährt.
    Gruß – Hans

  7. Hallo Hans,
    danke für deinen Kommentar.
    Stimmt beim Anklicken gelangt man zum Bild.

    Vielleicht hast du dafür eine Lösung parat?
    Das Geflacker ist mir noch gar nicht aufgefallen. Aber das Bild sollte eh nicht über dem Linktext erscheinen, da er ansonsten verdeckt wird.

    • Ich habe es gerade mit dem Firefox 7.0.1 unter Windows XP getestet.
      Bei mir funktioniert es einwandfrei.
      Danke übrigens für die coole Lösung.

  8. Hi Gerhardt,

    danke für deinen Kommentar. Tut mir leid, dass es nicht funktioniert. Bei mit unter FF 8 und Win 7 geht es.
    Ich kann dir leider nicht sagen warum.

  9. Hi das ist mal ne echt gute Idee, dumm nur, das dies unter MediaWiki nicht funktioniert, ich schreibe eine Extension dafür und melde mich dann bei dir, damit das in Wikis auch funktioniert. Danke für die Erklährung und Anleitung!
    Super :)

  10. Das ist eigentlich recht schnell zu erklären. In einem Wiki wird aus Sicherheitsgründen keine reinen xHtml Deklarationen genutzt. Das bedeutet das eine Syntax dafür sorgt, das aus [http://link.de Das ist ein Link] => das wird => Das ist ein Link.

    Das bedeutet du kannst einem Link auch keine eigene Klasse geben! Damit das das ganze geschehen das du hier beschreibst leider nicht möglich.

    Ich habe aber eine Extension geschrieben die dann so funktioniert:

    http://link.de

    und schon geht’s ;)

    Grüße M.C.

  11. Sehr schön, habe schon viele Anleitungen gesehen aber bislang waren die entweder zu unvollständig oder funktionierten nicht. Jetzt klappt’s dank des super Tutorials.

    Danke nochmal.

  12. Zwei Anmerkungen. Das Hovern klappt. Aber beim Klicken auf den Hoverauslöser (zum Beispiel der hervorgehobene Text “Wilhelm Busch”) landet man auf einer neuen Seite mit dem Bild/Foto, das man eigentlich nur als Snap Preview sehen wollte. Ließe sich dies deaktivieren, oder noch besser: könnte man nicht für den Mausklick einen anderen Href-Verweis ansteuern als beim Maushover?
    Zweitens: Der Hover-Bereich (also der Text “Wilhelm Busch”) darf sich nicht mit dem gehoverten (also dem Bild von W.B.) überlappen, sonst geht eine großes Geflacker los, wenn die Maus diesen gemeinsamen Bereich überfährt.

    • Danke für deinen Kommentar.
      Du kannst natürlich ganz einfach die Funktionalität an ein anderes Element hängen.
      Anstatt an “a” z.B. an ein “span”. Du müsstest nur noch die “Image”-Url irgendwie mitgeben.

      Zweitens: Stimmt, sobald das Popup den “Hover”-Event wegnimmt, verschwindet das Popup und da die Maus noch über den Text steht, wird erneut der Hover-Event ausgelöst. Daher hatte ich die Verschiebung aufgebaut:
      $('#ttimagesnap').css({
      left: (e.pageX + 10) + 'px',
      top: (e.pageY + 10) + 'px'});

      Da gibt es sicherlich noch optimierte Möglichkeiten. Schön wäre es z.B. auch wenn das Popup stehen bliebe, bis man es wegklickt.
      Vielleicht hast du dafür eine Lösung griffbereit? Schick Sie mir und ich ergänze es hier (mit deiner Referenz).

  13. Läuft hier irgendwas schief, oder habe ich etwas nicht richtig verstanden?! Deine dargestellten Beispiele zeigen mir (auf tagesaktuellem Firefox und ohne besondere Sperr-Funktionen) leider gar nichts an.

    Auch wenn mir der Gedanke gefällt und ich ihn auf der Suche nach einer WebSnapr-ähnlichen Lösung für Linksammlungen durchaus übernehmenswert finde.

    Ich sitze gerade an einem WordPress-PlugIn, mit dem es möglich sein sollte ganze Listen von Links in Gruppen einzuteilen, diese dann mittels Auswahllink auswählen zu können, was dann erst den Link anzeigen, eine Beschreibung darstellen und einen Screenshot vorab anzeigen sollte. Wählt der Anwender dann aufrufen, soll er zur Linkseite wechseln, oder kann den nächsten ansehen – mit optionalem Radiobutton um es auch direkt anspringen zu können.

    Dafür würde ich mir das aber gerne erst mal “in Action” anschauen ;-)

    Also, wie schaut’s?!

    • Hallo Frederic,

      danke für deinen Hinweis. Jetzt sollte es wieder gehen. Ich nutze das WordPress-Plugin WP-Minify.
      Offenbar hat das irgendwie so minimiert, dass der Firefox damit nicht zurecht kam. Unter Chrome lief es einwandfrei.
      Jetzt geht’s mit dem Firefox, also bitte nochmal probieren und ggfs. kommentieren (falls es noch nicht geht … oder auch wenn es geht ;-)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *


+ 7 = 8

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>