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
Es gibt zwei eine Möglichkeiten. Du schaust dir den Code an und baust es bei dir nach oder du bindest einfach meine Variante ein.
Selbst machen
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.
Das Snippet sollte wie folgt aussehen (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() {
$("a[class='imagesnap']").append("<img src='http://www.vogel-nest.de/magnify.png' \
border='0' />");
$("a[class='imagesnap']").hover(function(e) {
trgt = $(e.target).is("a") ? $(e.target) : $(e.target).parents("a");
html = "<div id='ttimagesnap' class='ttimagesnap_style'><img src='"
+ trgt.attr("href")
+ "' border='0' /><br /><i>WebImageSnap</i> - www.vogel-nest.de</div>";
$(html).appendTo("body");
$('#ttimagesnap').css({
left: (e.pageX + 10) + 'px',
top: (e.pageY + 10) + 'px'});
$('#ttimagesnap').show();
},function(e) {
$('#ttimagesnap').remove();
});
});
// --></script>
</head>
Die Zeile
$("a[class='imagesnap']").append("<img src='http://www.vogel-nest.de/magnify.png' border='0' />");
dient nur dazu die “Bild”-Links mit einem Icon zu verzieren, so dass der Benutzer auch bemerkt,
dass hier ein Bild hinterliegt.
Bitte das Bild magnify.png auf den lokalen Server kopieren und von dort einbinden. Das Bild liegt nicht mehr unter der oben angegebenen Url. Ich erwarte schon so viel Transferleistung, die Bild-Url auf das eigenen lokale Bild umzusetzen.
Wenn du WebImageSnap verwendest und es dir gefällt, bau doch bitte einen Link auf diese Seite (http://www.vogel-nest.de/wiki/Main/ImageSnap) bei dir ein.
Fertig nutzen
Diese Variante steht nicht mehr zur Verfügung (s. Nachtrag 2).
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:
Obiges Beispiel sieht 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.
In WordPress würde das z.B. über den Reiter “Code” geschehen:
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 05. September 2007)
Da offensichtlich nur dubiose Seiten dieses Script nutzen und inbesondere das “magnify”-Bild direkt verlinken (dieses Bild habe ich übrigens aus Wikipedia kopiert – somit dürfte es allen anderen auch nicht allzu schwer fallen das Bild bei sich lokal auf den Server abzulegen) habe ich beschlossen das Image und das Javascript zu entfernen.
Es steht weiterhin jedem frei, die oben genannten Codezeilen zu nutzen und auf dem eigenen Server die entsprechende Javascript-Datei einzurichten.
Ich stelle das Script nicht mehr über meine Domain zur Verfügung!
Nachtrag 3 (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.
Krasse Idee … und so einfach. Aber der “Bildlink” (gibt es dafür nicht schon eine Bezeichnung?) müsste wohl deutlicher gekennzeichnet sein.
Hallo Stefan, das gefällt mir und vor allem ist der Code sehr schlank.
@Daniel
Hallo Daniel, das hat mich auch ein wenig Zeit gekostet bis ich alles so kompakt (und trotzdem funktional hatte)
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.
Vielen Dank!
Nicht nur das es genau das ist, was ich gesucht habe, sondern auch das es so verständlich erklärt ist.
Spitze!
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.
Hallo Stephan,
das Beispiel funktioniert nicht mehr mit jQuery 1.3.2…
Hallo Dieter, danke für den Hinweis. Das muss ich mir mal anschauen. … Ist oben im Text geklärt und gefixt.
Hi Stefan,
das Beispiel funktioniert leider nicht im FF3.5 und Opera10.
Schöne Grüße
@Verve, du hast recht. Ist mir noch gar nicht aufgefallen.
Muss ich mal schauen, was da wieder los ist.
@Verve,
sorry, bei der Umstellung von PmWiki auf WordPress (s. http://www.vogel-nest.de/blog/2009/alter-wein-in-neuen-schlaeuchen/) habe ich tatsächlich irgendwie die alte Version wieder geladen und außerdem nicht berücksichtigt, dass in WordPress jQuery ja schon enthalten ist.
Jetzt geht es wieder auf dieser Seite. Die aufgelisteten Beispiele auf dieser Seite funktionieren aber nach wie vor.
Danke für’s Bescheid-geben.
ich danke auchmal für den hinweis, hier wurde mir geholfen
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.
@admin: danke
good job!