[phpBB2]"3D Schnellzugriff" - Bilder statt Textlinks

Günther schrieb:Hallo,

weil hier das Frei-Themenicon gesetzt ist und falls du mal eine neue, ebenfalls sehr elegante Tag-Cloud ausprobieren möchtest, möchte ich dir auch noch einen Tipp hinterlassen.

Ich habe eine schöne 3D-Tag-Cloud gefunden, die noch dazu sehr einfach anzupassen ist. Eine Demo kannst du dir hier ansehen:
http://word-cumulus-goog-vis.googlecode.com/svn/trunk/demo.html

Ich habe dir den Code schonmal soweit angepasst, dass du ihn direkt in ein Modul übernehmen kannst:

Code:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://word-cumulus-goog-vis.googlecode.com/svn/trunk/wordcumulus.js"></script>
<script type="text/javascript" src="http://word-cumulus-goog-vis.googlecode.com/svn/trunk/swfobject.js"></script>
<script type="text/javascript">
google.load("visualization", "1");
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {

// Create and populate a data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Tag');
        data.addColumn('string', 'URL');
        data.addRows(7);
        data.setCell(0, 0, 'Brazil');
        data.setCell(0, 1, 'http://www.youtube.com/results?search_query=brazil+fifa+world+cup');
        data.setCell(1, 0, 'Italy');
        data.setCell(1, 1, 'http://www.youtube.com/results?search_query=italy+fifa+world+cup');
        data.setCell(2, 0, 'Germany');
        data.setCell(2, 1, 'http://www.youtube.com/results?search_query=germany+fifa+world+cup');
        data.setCell(3, 0, 'Argentina');
        data.setCell(3, 1, 'http://www.youtube.com/results?search_query=argentina+fifa+world+cup');
        data.setCell(4, 0, 'Uruguay');
        data.setCell(4, 1, 'http://www.youtube.com/results?search_query=uruguay+fifa+world+cup');
        data.setCell(5, 0, 'France');
        data.setCell(5, 1, 'http://www.youtube.com/results?search_query=france+fifa+world+cup');
        data.setCell(6, 0, 'England');
        data.setCell(6, 1, 'http://www.youtube.com/results?search_query=england+fifa+world+cup');
        // Instantiate our table object.
        var vis = new gviz_word_cumulus.WordCumulus(document.getElementById('mydiv'));

        // Draw our table with the data we created locally.
        vis.draw(data, {text_color: '#00ff00', speed: 50, width:300, height:600});
      }
  </script>
<div id="mydiv"></div>

Personalisieren kannst du zuerst mal in diesem Bereich die Textfarbe, Geschwindigkeit und die Ausmaße der Cloud:

vis.draw(data, {text_color: '#00ff00', speed: 50, width:300, height:600});

Anschließend kannst du in diesen Bereichen jeweils eigene Tags einsetzen:

data.setCell(0, 0, 'Brazil');
data.setCell(0, 1, 'https://www.youtube.com/results?search_query=brazil+fifa+world+cup');

Beim rot markierten Bereich setzt du die Bezeichnung des Tags, beim blauen dessen URL ein. Möchtest du noch mehr Tags einsetzen, kannst du diesen Bereich jeweils wiederholen. Du musst dabei nur darauf achten, dass die Nummerierung fortlaufend sein muss:

...
data.setCell(7, 0, 'Bezechnung');
data.setCell(7, 1, 'https://www.youtube.com/results?search_query=brazil+fifa+world+cup');

data.setCell(8, 0, 'Brazil');
data.setCell(8, 1, 'https://www.youtube.com/results?search_query=brazil+fifa+world+cup');

Darauf solltest du besonders achten, dass die 1. Nummerierung eines Tags immer fortlaufend geschieht und nach dem Komma eine 0 folgt, und die 2. Nummerierung ebenfalls diese Zahl erhält, aber darauf eine 1 folgt. Ansonsten kannst du dabei nicht viel falsch machen.

Ich hoffe, das gefällt dir - zumindest, wenn die Technik dein Script nicht mehr wiederherstellen kann bzw. du Interesse an einer Abwechslung hast.

Liebe Grüße
Günther

JavaScript: