Sie können in Ihrem Tumblr-Design einen Fotoeffekt erstellen, der ein Bild deutlich anzeigt, wenn die Maus über das Bild fährt. Wenn die Maus jedoch nicht über dem Bild schwebt, erscheint das Bild verschwommen. Bereiten Sie zunächst die Bilder vor, die Sie für den Effekt verwenden möchten. Fügen Sie dann zwei Codeschnipsel in Ihr Tumblr-Theme ein. Beachten Sie, dass der Code in Tumblr-Posts nicht unterstützt wird, sondern nur in Blog-Themen.
Bilder vorbereiten
Um die Aufgabe des verschwommenen Bildes zu erfüllen, benötigen Sie zwei nahezu identische Bilder: eine Kopie des ursprünglichen klaren Bildes und eine zweite Kopie desselben Bildes, nur verschwommen. Verwenden Sie den Unschärfe-Effekt in GIMP oder Photoshop, um das verschwommene Erscheinungsbild des zweiten Fotos zu erzeugen. Stellen Sie sicher, dass die Bilder genau die gleichen Abmessungen haben.
JavaScript-Code
Ein Snippet von JavaScript-Code wird zwischen den eingefügt
und Tags Ihres Tumblr-Blogs. Der JavaScript-Code enthält die Ereignisse MouseRollover und MouseOut. Das MouseRollover-Ereignis weist das klare Bild an, angezeigt zu werden, wenn die Maus über das Bild bewegt wird. Das MouseOut-Ereignis definiert, welches Bild angezeigt werden soll, wenn die Maus nicht über das Bild schwebt.Das für diesen Effekt zu verwendende JavaScript-Code-Snippet lautet:
Ändern Sie den Verweis „Picture1.jpg“ in die URL für das klare Originalbild. Ändern Sie den Verweis „Picture2.jpg“ auf die URL für das unscharfe Bild.
HTML Quelltext
Der HTML-Code, der dem Javascript-Snippet beigefügt ist, definiert die Größe, Position und das Layout des Bildes. Fügen Sie den HTML-Code in das Tumblr-Theme ein, wo die Fotoanzeige erscheinen soll. Der HTML-Code zum obigen Javascript-Snippet lautet:
Ersetzen Sie „Picture2.jpg“ durch die URL zum unscharfen Foto, das standardmäßig angezeigt wird. Ändern Sie die Variablen „width“ und „height“ auf die gewünschte Größe Ihres gerenderten Bildes.
Installationscode
Um den Code in Ihrem Tumblr-Theme zu installieren, öffnen Sie Ihr Tumblr-Dashboard und klicken Sie dann im Dashboard auf die Registerkarte „Anpassen“, damit der Blog geändert werden kann. Klicken Sie auf die Option „HTML bearbeiten“, um den Theme-Editor zu öffnen. Wählen Sie das Javascript-Code-Snippet aus, um den Code hervorzuheben, und drücken Sie dann "Strg-C", um den Code zu kopieren. Klicken Sie auf das Leerzeichen vor dem „“-Tag in Ihrem Theme-Code und drücken Sie dann „Strg-V“, um den Code einzufügen.
Kopieren Sie den HTML-Code und kehren Sie dann zum Tumblr-Theme-Editor zurück. Suchen Sie im Code die Stelle, an der der Fotoeffekt gerendert werden soll. Klicken Sie in die Position und drücken Sie dann "Strg-V", um das HTML-Snippet einzufügen. Klicken Sie auf „Vorschau aktualisieren“, um den Effekt im Vorschaufenster zu testen. Klicken Sie auf „Speichern“, um die Änderungen zu speichern.
