Bilder in Javascript einbinden

K

KrisOtine

Grünschnabel
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: 
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
 
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.
 
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=BakJN1vQPFY&feature=related (das ganze soll am Ende wie im 5.Teil aussehen: http://www.youtube.com/watch?v=fegtw64kdm8&feature=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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück