Image position wechseln

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

12:26, 9.5.2011

Hallo liebe Limanianer,
ich habe heute mal damit angefangen mit Java-Script zu basteln, aber ich komme nicht darauf, wie ich ein Bild anhand der aktuellen Mausposition ausrichten lassen kann. Dieser Vorgang soll permanent geschehen, wenn sich die Positione der Maus verändert.

<SCRIPT LANGUAGE="JavaScript"><!--
var x, y;
var liste; 
var menu;

function initialize(){
	liste = new Array(
		createImage("Background",0,104,0,0),
		createImage("Newsfeed",100,170,0,0),
		createImage("Newsfeed",100,350,0,0),
		createImage("Menu",700,158,0,0),
		createImage("FrameUp",0,0,0,0),
		createImage("FrameDown",0,577,0,0)
	);
	
	draw();
}

function createImage(sImage, iX, iY, iW, iH){
	var img = new Image();
	img.src = sImage+".png";
}

function draw(){
	var ctx = canvas.getContext('2d');
	for (var i = 0; i < liste.length; ++i){
		var image = liste[i];
		document.write(""+image.src);
  		ctx.drawImage(image,0,0);
	}
}

function evMousemove (ev) {
	  // Get the mouse position relative to the canvas element.
	  if (ev.layerX || ev.layerX == 0) { // Firefox
		    x = ev.layerX;
		    y = ev.layerY;
	  } else if (ev.offsetX || ev.offsetX == 0) { // Opera
		    x = ev.offsetX;
		    y = ev.offsetY;
	  }
}

//--></SCRIPT>
</HEAD>
<BODY onload="initialize();">
	<script type="text/javascript">
		var canvas = document.createElement( 'canvas' );
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		canvas.style.display = 'block';
		canvas.addEventListener("mousemove", evMousemove, false);
		document.body.appendChild( canvas );
	</script>
</BODY>

Das Problem derzeit ist, dass die Bilder nicht gezeichnet werden bzw. abgerufen werden, obwohl das Array befüllt ist.

Beitrag zuletzt geändert: 9.5.2011 12:27:46 von pantherstyle

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
simuliertes

simuliertes hat kostenlosen Webspace.

5:30, 10.5.2011

function createImage(sImage, iX, iY, iW, iH){
var img = new Image();
img.src = sImage+".gif";
return img;
}

Die Funktion muss auch was wiedergeben damit die Bilder im Array landen.
Dir ist hoffentlich bewusst das teile des Codes nur von html-5 fähigen Browsern verstanden werden?
Autor dieses Themas
pantherstyle

pantherstyle hat kostenlosen Webspace.

21:49, 10.5.2011
Stimmt ohne das return hat es wenig Sinn ergeben, zusammen mit den anderen Fehlern, welche jetzt behoben sind funktioniert das Ganze jetzt so wie es soll. Das HTML5 Canvas Objekt soll auch nur als beste Version der Homepage dienen. Es gibt insgesamt 4 Fallbacks zu einfacheren Darstellungen.
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city