Ich möchte hier ein Beispiel wiedergeben für eine Wörterwolke in HTML5 die für Handys und Tablets sowie auch für den alten Internet Explorer 8 .
Dazu verwende ich ein jQuery Skript von Canvas. Hier ist der Link dazu.
Was wir dazu benötigen ist das Plugin von jQuery (jquery.tagcanvas.min.js) das weiter unten zum Download angeboten wird. Einfach rechte Mousetaste draufklicken und speichern.
Um es in WSX5 einzubauen muss man es mit folgenden Befehl einbinden. Und zwar unter "1" - Erweitert - Vor dem </head> Tag
.
Allerdings muss man die Javaskriptdatei per Filezilla händisch auf den Server spielen. In diesem Fall ist es im Ordner "js". Falls ihr es in einem anderen Ordner hineinkopiert muss es beim Pfad geändert werden. "ordner/jquery.tagcanvas.min.js".
Danach erstellt ihr ein HTML-Objekt auf der gewünschten Seite.
Unter "2" der ausgewählten Seite geht ihr auf "Eigenschaften der Seite" und gebt folgenden Skriptcode unter "Vor dem </head> Tag" ein.
Hier könnt ihr die Farbe des Textes und der Hoverumrandung ändern. (textColor: '#111111', oder outlineColor: '#FFFFFF',)
Wer auf der TagCanvas Seite weiterstöbert und sich ein bisschen mit Javaskript auskennt kann sich andere Dinge hier auch einbauen.
Danach kommt der HTML Teil der in das HTML-Objekt kommt.
- <div
- id="myCanvasContainer">
- <canvas
- width="300"
- height="300"
- id="myCanvas">
- <p>Wörterwolke funktioniert nicht auf ihrem Browser</p>
- </canvas>
- </div>
- <div
- id="tags">
- <ul>
- <li>
- <a
- href="http://www.google.com"
- target="_blank">Google</a>
- </li>
- <li>
- <a
- href="">Webdesign</a>
- </li>
- <li>
- <a
- href="">Web-Visitkarten</a>
- </li>
- <li>
- <a
- href="">Mobile Websites</a>
- </li>
- <li>
- <a
- href="">Sozial Media</a>
- </li>
- <li>
- <a
- href="">HTML5 CSS3</a>
- </li>
- <li>
- <a
- href="">Redesign</a>
- </li>
- <li>
- <a
- href="">Online Marketing</a>
- </li>
- <li>
- <a
- href="">CMS-Systeme</a>
- </li>
- <li>
- <a
- href="">Responsive</a>
- </li>
- </ul>
- </div>
Bei width="300"
height="300" könnt ihr die größe der Wörterwolke einstellen. Allerdings müsst ihr auch die Größe des HTML-Objekt abstimmen z.B. 5 px mehr geben.
Ihr könnt ein <li> bis </li> kopieren und soviele reinstellen wie ihr wollt. Oder rauslöschen. Den Text ändern und auch wie beim ersten Link auf eine externe Seite verlinken.
Alles funkioniert nur wenn es auf dem Server liegt. (Nicht in der Vorschau).
Wenn ihr es auch auf dem veralterten Internet Explorer 8 haben wollt, müsst ihr ein zusätzliches Skript mit einbinden und auf den Server spielen, was ihr auch auf der Seite findet und zwar das "excanvas.js" (vorher Entpacken)
Einfach bei "1" Erweitert vor dem head tag.
im Ordner "js" hier z.B.