Bilder in Javascript einbinden @ tutorials.de: Tutorials, Forum & Hilfe

KrisOtine · 25.11.11 00:09

Hallo Allerseits,

ich bin neu hier im Forum und auch in der Programmierwelt. Auf Grund meines Studiums der digitalen Medien möchte ich die Dinge nicht nur theoretisch behandeln, sondern auch selbst etwas lernen.

Dazu habe ich mir ein Tutorial auf youtube angesehen und versucht das nach zu machen und zu verstehen. Dabei ergab sich ein Problem, dass die Teilchen, die eigentlich beim Mauscklick erscheinen sollten nicht erscheinen, sondern nur ein schwarzer Hintergrund zu sehen ist. Ich vermute es liegt an der Einbindung des Objektes, welche irgendwie falsch ist.

Nun bin ich mir nicht sicher, ob ich hier den Quellcode, so wie ich ihn aus dem Tutorial verstanden habe, hier posten darf ? ? ?

Falls ich dies nicht darf, hat mir jemand ein Tipp wie man Bilder einbindet? Im Tutorial wurde das so versucht:

Code :

1	this.particle.style.background = "url(particle1.png)";

Mein Objekt liegt dabei im selben Ordner wie die .html Datei.

Ich wäre echt super happy, wenn mir jemand weiter helfen könnte, damit ich langsam verstehen lernen, wie das alles zusammen funktioniert.

Vielen Dank, Kristin

**sheel** · 25.11.11 00:25

Hi und Willkommen bei tutorials.de

Ja, Code posten ist erlaubt.
Ohne Code kann man sowieso in vielen Fällen nicht helfen...also zeig ihn ruhig.

Vielleicht wirds durch den Code klarer, aber zurzeit versteh ich auch noch nicht ganz,
was du eigentlich vorhast.

KrisOtine · 25.11.11 00:45

Hi und danke für den freundlichen Empfang! Dann poste ich das mal.

Das ganze stammt von der youtube Webseite: http://www.youtube.com/watch?v=BakJN...eature=related (das ganze soll am Ende wie im 5.Teil aussehen: http://www.youtube.com/watch?v=fegtw...eature=related)

Mein Ziel ist es eine animierte Maus zu erstellen, die wie hier beim Click Formen freisetzt. Ich dachte dieser Code ist ein gute Startpunkt um mit Elementen experimentieren zu können. Doch bisher zeigt sich mein "Particle" nicht.

Den Code habe ich bisher so nachschreiben und auch nachvollziehen können. Doch mir ist nicht klar, wie Bilder mit "url(particle1.png)"; eingebunden werden. Vielleicht liegt hier der Fehler...?

Code :

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Elements</title>
<script>
var fade = 0.05;
var updateInterval;
var updateDelay = 100;
var particles = new Array();
var maxParticles = 50;
var workspace;
var spread = 50;
var particlesPerClick = 10;
 
var degrees = 30;
var degreesD2 = degrees/2;
 
function particle()
{
    this.x = 0;
    this.y = 0;
    this.xSpeed = 0;
    this.ySpeed = 0;
    this.size = 100;
    this.opacity = 100;
    this.particle =document.createElement('div');
    this.particle.style.position = "absolute";
    this.particle.style.background = "url(circle1.png)";
    workspace.appendChild(this.particle);
}
 
function initiateParticles()
{
    for (var i = 0; i < maxParticles; i++)
    {
    particles[i] = new particle();
    }
}
function updateParticle(particle)
{
    var style = particle.particle.style;
    style.height = particle.size+"px";
    style.width = particle.size+"px";
    style.left = particle.x + "px";
    style.top = particle.y + "px";
    style.opacity = particle.opacity/100;
    style.filter = "alpha(opacity=" +particle.opacity+" )";
}
 
function addParticle(particle)
{
    particle.opacity = 100;
    particle.x = Math.floor(Math.random()*spread + mouseX - spread);
    particle.y = Math.floor(Math.random()*spread + mouseY - spread);
    particle.xSpeed = Math.floor(Math.random()*degrees - degreesD2);
    if(Math.round(Math.random()))
    {
        particle.ySpeed = degrees - Math.abs(particle.xSpeed);
    }
    else
    {
        particle.ySpeed = -(degrees - Math.abs(particle.xSpeed));
    }
}
 
function update()
{
    for(var i = 0; i < maxParticles; i++)
    {
        if(particles[i].opacity != 0)
        {
            processParticle(particles[i]);
            updateParticle(particles[i]);
        }
    }
}
 
function initialize()
{
    updateInterval = setInterval ('update()', updateDelay);
    document.onclick = mouseClick;
}
var mouseX, mouseY;
function mouseClick(e)
{
    mouseY=(e) ?e.pageY:event.y;
    mouseX=(e) ?e.pageX:event.x;
    var count = 0;
    for(var i = 0; i < maxParticles; i++)
    {
        if(particles[i].opacity = 0)
        {
            addParticle(particles[i]);
            count++;
        }
        if(particlesPerClick == count)
        {
            return;
        }
    }
}
</script>
    
</head>
 
<body style="background-color: black;overflow:hidden;">
<div id="workspace">
</div>
<script>
workspace = document.getElementById('workspace');
initiateParticles();
initialize();
 
</script>
</body>
</html>

Vielen Dank auf jeden Fall schonmal für deine schnelle Antwort.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

DLL einbinden mit JavaScript

Javascript mit php einbinden

Javascript einbinden

Javascript einbinden

Javascript einbinden ..

Stichworte

E-Mail:

Abonnieren Abbestellen