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! 

Bewegendes 3D Menü oder Tag-Cloud!

Auf meiner Reise in die unendlichen Weiten des WWW habe ich etwas interessantes gefunden, dass Schlagwort heisst „WP-Cumulus Tagcloud“, eine sich drehende Tag-Wolke mit Verlinkungsmöglichkeit.
Im Blog des Entwicklers Roy Tanck… bin ich fündig geworden und habe in mühevoller Kleinarbeit die Sache für iWeb ans Laufen bekommen. Die benötigten Dateien können hier… heruntergeladen werden. Die Datei „tagcloud.swf“ ist von mir so angepasst worden, dass die aufgerufene Seite im selben Browserfenster öffnet. In der Zip befindet sich auch eine Bilddatei, die Kugel ist von mir und kann frei verwendet werden.

Der HTML-Code (kopieren und in iWeb einfügen) für den Html-Baustein in iWeb lautet wie folgt:

<?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>WP-Cumulus example</title>
<meta http-equiv="Content-Type" content="text/html" />
<!– SWFObject embed by Geoff Stearns geoff@deconcept.com http://blog.deconcept.com/swfobject/ –>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
body { background-color: none; padding: 0px; }
</style>
</head>

<body>

<div id="flashcontent">This will be shown to users with no Flash or Javascript.</div>

<script type="text/javascript">
var so = new SWFObject("tagcloud.swf", "tagcloud", "200", "150", "7", "#ffffff");
// uncomment next line to enable transparency
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0×333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><a href='http://www.schoenwandt.info/ich/home.html' style='22' color='0xff0000' hicolor='0x00cc00'>Startseite</a><a href='http://www.schoenwandt.info/ich/fotoalben.html' style='12'>Fotoalben</a><a href='http://www.schoenwandt.info/ich/projekte.html' style='16'>Web Projekte</a><a href='http://www.schoenwandt.info/ich/newsticker/newsticker.html' style='14'>Newsticker</a><a href='http://www.schoenwandt.info/ich/ich.html' style='12'>Ich</a><a href='http://www.schoenwandt.info/ich/kontakt.html' style='12'>Kontakt</a><a href='http://www.schoenwandt.info/ich/impressum.html' style='9'>Impressum</a><a href='http://www.schoenwandt.info/ich/gaestebuch.html' style='10'>Gaestebuch</a><a href='http://www.schoenwandt.info/ich/stammbaum.html' style='10'>Stammbaum</a><a href='http://www.schoenwandt.info/ich/ahnengalerie.html' style='12'>Ahnengalerie</a><a href='http://www.iweb-forum.de/board/' style='12'>iWeb-Forum</a><a href='http://www.apple.com/de/' style='12'>Apple</a></tags>");
so.write("flashcontent");
</script>

</body>

</html>
Anpassen der Tag Wolke:

1. var so = new SWFObject(„tagcloud.swf“, „tagcloud“, „200„, „150„, „7“, „#ffffff“);  –  (Grösse der Wolke) – 200 Breite in Pixel, 150 Höhe in Pixel

2. <a href=‘http://www.schoenwandt.info/ich/home.html‚ style=‘22‚ color=‘0xff0000‚ hicolor=‘0x00cc00‚>Startseite</a>  –  (Tag und Link deffinieren)  – href=‘http://www.schoenwandt.info/ich/home.html‚ gibt den Link zur Seite an, style=‘22‚ gibt die Textgrösse an, color=‘0xff0000‚ deffiniert die normale Linkfarbe (0xff0000 die ersten zwei Ziffern „ox“ lassen und der Rest ist der Hexadezimal-Code der Farbe), hicolor=‘0x00cc00‚ deffiniert die Mouseover Farbe und zuletzt >Startseite<, dies ist der eigentliche Tag (das Wort welches angezeigt wird).

3. Damit die Wolke läuft, müsst ihr die zwei Dateien „tagcloud.swf“ und „swfobject.js“, welche ihr bereits heruntergeladen habt in das Seitenverzeichnis kopieren. Beipiel: Wenn die Seite „test.html“ heisst, dann heisst der Ordner „test_files“. In diesen Ordner gehören die zwei Dateien! Also entweder Seite in Ordner veröffentlichen und Dateien in den/die Ordner kopieren, dann könnt ihr die Sache offline testen, oder nach dem hochladen in die Ordner kopieren.

Na dann, gutes gelingen!

2 Comments

  1. iWeb - 3D Tag-Wolke! - [...] habe ich eine neue Beschreibung in der Rubrik iWeb online gestellt. Hierbei handelt es sich um eine Tag-Wolke, welche…
  2. Tag Cloud Skript oder Tutorial gesucht - XHTMLforum - [...] [...]

Leave a Reply