| | | | |
| |||||||
| HTML, Usability und Barrierefreiheit Themen rund um Textauszeichnung, Formatierung, Barrierefreiheit und Usability. |
 |
| | LinkBack | Themen-Optionen | Thema bewerten |
24.10.2004, 14:35
| |
| Gast
Beiträge: n/a
|  [Erledigt] Mauszeiger und Element Koordinaten (in Pixeln) Da ich ein bisschen mit div Elementen in 'Umgebung des Mauszeigers spielen möchte, habe ich mal im Internet gesucht, und gefunden, wie ich die Koordinaten des Mauszeigers bekomme (in Pixlen). Das war mir auch mit den Divs möglich (auch in Pixeln). Allerdings tat sich dabei ein Problem auf, dem ih bislang nicht Herr wurde: Die Mauszeigerkoordinaten werden relativ im Abstand der linken oberen Ecke des Ie angezeigt. Die Div Koordinaten werden aber absolut gemessen. D.h: Die Entfernung der linkeren oberen Ecke der Seite. Wenn ich also weder nach unten noch nach oben scrolle, stimmen die Werte überein. Ich würde von euch jetzt gerne wissen, wie ich entweder die absoluten Koordinaten des Mauszeiger oder die relativen Koordinaten der Divs bekomme, damit ich wieder eine Einheitszahl bekomme. Ich bitte um schnelle Hilfe. MfG Zorki Edit: Ich hab zwar etwas gefunden, as nutz mir aber überhauptnichts. Da das wohl irgentwie per Funktion übergeben wird und ich keine Ahnung habe, wo z.B. die Variable e herkommt, kann ich das ganze nicht einbinden und benutzen: Code: <HTML>
<HEAD>
<TITLE>Mauszeiger</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function init(){
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=anim
}
function anim(e){
document.mauszeiger.left = e.pageX
document.mauszeiger.top = e.pageY
}
//--></SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onLoad="init()">
<H1>Mauszeiger</H1>
<LAYER ID="mauszeiger" STYLE="position:absolute">
[img]logo.gif[/img]</LAYER>
</BODY>
</HTML>
Edit2: Ich hab auch gefunden, warum die Koordinaten der Elemente absolut angegeben werden: Ich hab im Css definiert: position: absolute; Wenn ich aber relative hinschreibe, stellt sich mir das Problem, dass mein Bildschirm wie Irre wackelt, und das Div sonstwo angezeigt wird. Der Grund: Das Div ist nicht mehr verschiebbar über dem anderen Text, sondern hat einen festen Ort. Was mach ich falsch? Vieleicht sollte ich einfach die absoluten Koordinaten des Mauszeigers nehmen. Aber da blcik ich nicht durch. Helft mir bitte. |
 |
 | |
| PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten | |
|
26.10.2004, 15:00
| |
| Gast
Beiträge: n/a
| Da ihr es anscheinend auch nicht wisst, hab ich mich im I-Net nochmal umgesehn, und habe zumindestens ein Script gefunden, dass mit den Koordinaten arbeitet. Da es allerdings ein ganzes Script ist, brauche ich lediglich den Teil, in dem die Mauszeigerkoordinaten ausgelesen werden. Da ich bei dem Script allerdings garnicht durchblicke, würde ich euch bitten, es euch einmal anzuschauen, und mir vieleicht zu sagen, wie die Koordinaten ausgelesen werden. Hier das Script: Code: <script>
/*********************** WURM-Skript Anfang *****************************/
/*** WWW.WerIstFelix.de *** Felix@Antifas.de ***/
var anzahl = 50; // Die Wirkung am besten einfach durch testen ausprobieren :-)
var groesse = 15; // Ist so aber schon ziemlich optimiert auf Darstellung
var abstand1 = 8; // Läuft auf meinem K6/2 500'er recht flüssig
var radius = 15; //radius der dreienn...
function erzeuge() //erzeugt die ausrichtbaren Grafiken
{
var a=1;
var text="";
document.body.innerHTML += "<span id='AAA' class='wurm'></span>";
while(a<=anzahl)
{
text +="<span id='wurmX"+a+"' style='{position:absolute; top:"+(-groesse)+"px; left:"+(-groesse)+"px; margin:0;}' class='wurm"+a+"'></span>";
text +="<span id='wurma"+a+"' style='{position:absolute; top:"+(-groesse)+"px; left:"+(-groesse)+"px; background-color:#FF0000; margin:0; height: "+groesse+"px; width: "+groesse+"px; filter:Alpha(style=2, opacity=50, finishopacity=0);}' class='wurm"+a+"'></span>";
text +="<span id='wurmb"+a+"' style='{position:absolute; top:"+(-groesse)+"px; left:"+(-groesse)+"px; background-color:#00FF00; margin:0; height: "+groesse+"px; width: "+groesse+"px; filter:Alpha(style=2, opacity=50, finishopacity=0);}' class='wurm"+a+"'></span>";
text +="<span id='wurmc"+a+"' style='{position:absolute; top:"+(-groesse)+"px; left:"+(-groesse)+"px; background-color:#0000FF; margin:0; height: "+groesse+"px; width: "+groesse+"px; filter:Alpha(style=2, opacity=50, finishopacity=0);}' class='wurm"+a+"'></span>";
a++;
}
document.all["AAA"].innerHTML = text;
laufen();
}
document.onload = setTimeout("erzeuge()",500);
var x=-groesse,y=-groesse; //linke obere Ecke außerhalb des Bildschirmes
function erfasse() //erfasst die Mauskordinaten
{
x = window.event.x + document.body.scrollLeft - groesse/2;
y = window.event.y + document.body.scrollTop - groesse/2;
}
document.onmousemove = erfasse;
var X=0,Y=0,winkel=0;
function neue_koordinaten(x1,y1) //richtet die letzte Grafik ganz nach vorne
{
X = abstand1 * Math.sin(Math.atan2(y-y1,x-x1));
Y = abstand1 * Math.sin(Math.atan2(x-x1,y-y1));
winkel = Math.atan2(x-x1,y-y1);
status = Math.round(winkel/Math.PI/2*360)
}
var b=anzahl-1;
var c=anzahl;
var d=anzahl-Math.ceil(anzahl/32*23);
var j=0;
function laufen() // diese Funktion sorgt dafür, dass es kontinuierlich funktioniert
{
neue_koordinaten(document.all["wurmX"+d].style.pixelLeft,document.all["wurmX"+d].style.pixelTop);
document.all["wurma"+b].style.pixelTop = document.all["wurmX"+c].style.pixelTop + X + Math.sin(j)*radius*Math.sin(winkel);
document.all["wurmb"+b].style.pixelTop = document.all["wurmX"+c].style.pixelTop + X + Math.sin(j + Math.PI/3*2)*radius*Math.sin(winkel);
document.all["wurmc"+b].style.pixelTop = document.all["wurmX"+c].style.pixelTop + X + Math.sin(j + Math.PI/3*4)*radius*Math.sin(winkel);
document.all["wurmX"+b].style.pixelTop = document.all["wurmX"+c].style.pixelTop + X;
neue_koordinaten(document.all["wurmX"+d].style.pixelLeft,document.all["wurmX"+d].style.pixelTop);
document.all["wurma"+b].style.pixelLeft =document.all["wurmX"+c].style.pixelLeft + Y +Math.cos(j)*radius*Math.cos(winkel);
document.all["wurmb"+b].style.pixelLeft =document.all["wurmX"+c].style.pixelLeft + Y +Math.cos(j + Math.PI/3*2)*radius*Math.cos(winkel);
document.all["wurmc"+b].style.pixelLeft =document.all["wurmX"+c].style.pixelLeft + Y +Math.cos(j + Math.PI/3*4)*radius*Math.cos(winkel);
document.all["wurmX"+b].style.pixelLeft =document.all["wurmX"+c].style.pixelLeft + Y;
j+=0.4;
b--; if(b<=0) b=anzahl;
c--; if(c<=0) c=anzahl;
d--; if(d<=0) d=anzahl;
setTimeout("laufen()",10);
}
/*********************** WURM-Skript Ende *******************************/
</script>
|
| |
| |
| Themen-Optionen | |
| Thema bewerten | |
|
|
Ähnliche Themen | ||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Welche Elemente B sind ähnlich dem Element A | Anwender27 | Scriptbörse | 7 | 01.05.2008 11:45 |
| Array Element vor und nach dem aktuellen Element ausgeben | NetLook | PHP Tipps 2006 | 2 | 09.05.2006 15:29 |
| [JS/CSS] Element erst onclick sichtbar machn script.aculo.us | StatischeEntladung | HTML, Usability und Barrierefreiheit | 1 | 06.04.2006 18:32 |
| [Erledigt] Element mit Zeitschalter | HTML, Usability und Barrierefreiheit | 1 | 04.10.2005 11:44 | |
| Memberkarte / Koordinaten | thrawn | PHP Tipps 2005-2 | 2 | 25.08.2005 11:38 |
| Besucher kamen über folgende Suchanfragen bei Google auf diese Seite |
| div koordinaten, pixel mauszeiger, mauszeiger pixel, mauszeiger koordinaten anzeigen php, pixel koordinaten maus, html koordinaten, img koordinaten maus, html koordinaten cod, element koordinaten, mauszeiger style, mauszeiger script, mauscursor style, mauscursor styles, mauszeiger koordinaten, mauscursor pixel, zeiger koordinaten, php elemente koordinaten, javascript elementkoordinaten, js koordinaten eines elements, div pixel koordinaten |
Dieser Inhalt ist unter einer Creative Commons-Lizenz lizenziert.
![[Erledigt] Mauszeiger und Element Koordinaten (in Pixeln)](http://www.php.de/iconimages/html-usability-und-barrierefreiheit/erledigt-mauszeiger-und-element-koordinaten-pixeln_ltr.gif){kind=tracking}
