HINWEIS: Diese Technik basiert auf Adobe Flash und ist im Zeitalter der mobilen Endgerät und der immer grösser werdenden Bedrohungen durch Sicherheitslücken im Flash Player überholt. Zur allgemeinen Information wurde dieser Beitrag jedoch nicht gelöscht!

Nach der 3D Tag-Wolke hat der Entwickler Roy Tanck… noch 2 andere Widgets zur Verfügung gestellt. Hierbei handelt es sich ebenfalls um rotierende Wolken, jedoch nicht mit Text sondern mit Bildern. Das Flickr-Widget benötigt einen Flickr Account und holt sich über den RRS-Feed des Accounts die letzten hochgeladenen Fotos und lässt diese dann fleißig rotieren. Vorteil – einmal eingestellt brauche ich keine Veränderung vornehmen, Nachteil – die Verlinkung der Bilder führt immer zum Flickraccount und dem angeklickten Foto. Das Foto-Widget erfordert etwas mehr Arbeit, hier bin ich aber wesentlich flexibler. Vorteil – ich kann die Fotos bestimmen, welche angezeigt werden und kann den Link auf eine gewünschte Seite führen. Nachteil – ich muss die Fotos im Vorfeld bearbeiten und bei jeder Änderung müssen Dateien überarbeitet und hochgeladen werden.

Flickr-Widget

Das Handling ist recht einfach und das Resultat sieht etwa so aus – Demo…

Voraussetzung ist ein Flickr… Account. Den Html-Code für das Webwidget kann hier… erstellt werden. Hier muss der erstellte Code lediglich in einen Html-Baustein in iWeb kopiert werden, fertig.

Foto-Widget

Beim Foto-Widget heisst es Ärmel hochkrempeln und ran an die Arbeit. Das Resultat könnte dann so… aussehen.

Jetzt zur Beschreibung:

Benötigte Dateien:
Natürlich eure Bilder, hier empfehle ich quadratische Ausschnitte zu machen (ich verwende 250×250 Pixel), da das Widget die Bilder automatisch quadratisch zurechtschneidet. Die Bilder können im Gif, Png oder Jpg Format vorliegen. Die Datei photowidget.swf und photowidget.xml. Die Xml-Datei muss angepasst werden, hier kommen Link und Bildname rein, dazu später mehr. – Alle benötigte Dateien können hier… heruntergeladen werden –
Der Code für den Html-Baustein in iWeb:
<?xml version=“1.0″ encoding=“utf-8″?>
<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“ „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=“http://www.w3.org/1999/xhtml“>
<head>
<title>Photowidget example</title>
<meta http-equiv=“Content-Type“ content=“text/html“ />
<style type=“text/css“>
body { background-color: none; padding: 0px; }
</style>
</head>
<body>
<div style=“width:500px;“>
<object type=“application/x-shockwave-flash“ data=“photowidget.swf“ width=“500″ height=“500″>
<param name=“wmode“ value=“transparent“ />
<param name=“movie“ value=“photowidget.swf“ />
<param name=“bgcolor“ value=“#ffffff“ />
<param name=“AllowScriptAccess“ value=“always“ />
<param name=“flashvars“ value=“feed=photowidget.xml“ />
<p>Die Fotoalben benötigen den Adobe Flash Player 9 oder höher</p>
</object>
</div>
</body>
</html>

Der Code erzeugt ein Größe von 500 x 500 Pixeln. Die Größe kann über die Parameter „width“ und „height“ eingestellt werden. Den Code kopieren und in iWeb in einen Html-Baustein einfügen. Die eigentliche Steuerdatei, in welcher ich die Links und die angezeigten Bilder angeben kann ist „photowidget.xml“. Es können MAXIMAL 20 Bilder angezeigt und verlinkt werden. Die Datei liegt dem Download bei und kann geändert werden.

Der Code sieht wie folgt aus:
<images>
<image href=“http://www.roytanck.com“ target=“_blank“>test.jpg</image>
<image href=“http://www.roytanck.com“ target=“_top“>test.jpg</image>
</images>
target= „_blank“ öffnet den Link in einem neuen Fenster und target=“_top“ im momentan geöffneten Browserfenster. Eure Entscheidung welche Methode für euch besser ist. Und unter href=“LINKADRESSE“ tragt ihr die gewünschte Linkadresse und unter „>test.jpg<“ den Namen der Bilddatei ein. Das warʻs auch schon! – Die Dateien (Bilder, photowidget.swf und photowidget.xml) in den Seitenordner kopieren und fertig ist die Geschichte.

Viel Spass beim Tüffteln!

1 Comment

  1. Foto-Widgets für iWeb! - [...] verlängerten Wochenende ein weiteres Highlite für die eigene Homepage mit iWeb. In der Rubrik… iWeb stehen ab sofort Anleitungen…

Leave a Reply