Hallo ihr Profis,
kenne mich nicht ganz so gut aus, möchte aber unbedingt eine interaktive Wörter-Wolke auf meiner Seite haben (nicht in Sidebar).
Diese soll nicht automatisch aus Tags erstellt werden, sondern aus vorgegebenen Wörtern, die sich bewegen und jedes Wort auch einen Link hat.
Nach langem Suchen habe ich hier einen tollen Code gefunden (siehe unten), der funktioniert auch, sofern ich das Plugin "3D tag cloud" aktiviert habe.
Leider kann ich nun im - auf einer Seite eingefügten Code (siehe unten) - keine Änderungen vornehmen, noch nicht mal textColour ändern...
Dann habe ich probiert den Code ohne das Plugin ans Laufen zu bekommen. Dafür habe ich mir die Installationserklärung vom Entwickler des Codes angeschaut... aber irgendwie raff ichs nicht oder es klappt nicht.
Ich hab 2 Dateien erstellt (tagcanvas.min.js und tagcanvas.js) die auf meinem Server hinterlegt und im Code die Quellangabe (src) passend geändert.
Aber ich habe die Wolke nicht ans Laufen bekommen.
Was mache ich falsch?
Wer kann mir bitte helfen?
Vielen Dank!!!
Hier der Stand-alone-Code von goat1000.com (zur Installationserklärung)
<html>
<head>
<title>TagCanvas jQuery example</title>
<!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.tagcanvas.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if(!$('#myCanvas').tagcanvas({
textColour: '#ff0000',
outlineColour: '#ff00ff',
reverse: true,
depth: 0.8,
maxSpeed: 0.05
},'tags')) {
// something went wrong, hide the canvas container
$('#myCanvasContainer').hide();
}
});
</script>
</head>
<body>
<!-- <h1>TagCanvas jQuery example page</h1> -->
<div id="myCanvasContainer">
<canvas width="300" height="300" id="myCanvas">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div id="tags">
<ul>
<li><a href="http://beispiel1.de">Beispiel1</a></li>
<li><a href="http://beispiel2.de">Beispiel2</a></li>
<li><a href="http://beispiel3.de">Beispiel3</a></li>
<li><a href="http://beispiel4.de">Beispiel4</a></li>
</ul>
</div>
</body>
</html>