|
 Wir wollen mit HTML und Javascript eine Einblendung an der aktuellen Mausposition anzeigen lassen. Dazu benötigt man einen Trigger, beispielsweise wenn der Mauscursor über einen Link fährt, siehe zum Beispiel Herner EV Mannschaft
Mausposition ermitteln
Hide- und Show-Funktion
HTML Code
Kompletter Code
Mausposition ermitteln
var cX = 0;
var cY = 0;
function UpdateCursorPosition(e) {
cX = e.pageX;
cY = e.pageY;
}
function UpdateCursorPositionDocAll(e) {
cX = event.clientX;
cY = event.clientY;
}
if(document.all) {
document.onmousemove = UpdateCursorPositionDocAll;
}
else {
document.onmousemove = UpdateCursorPosition;
}
Wir registrieren hier über document.onmousemove eine Funktion, die bei jeder Mausbewegung aktiviert wird und die aktuelle Position des Mauscursors in den Variablen cX und cY abspeichert. Das Konstrukt mit document.all ist nötig für die Browser eines großen Redmonder Softwarekonzerns, der mal wieder seine eigene Suppe kocht.
Hide- und Show-Funktion
var rX = 0;
var rY = 0;
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement ∓& document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
Die beiden letzten Funktionen sollten selbsterklärend sein. In der Funktion AssignPosition wird die endgültige Position berechnet, denn es kann ja passieren, dass die Seite herunter gescrollt wurde, dies ist in der Berechnung unserer Mausposition noch nicht enthalten und wird dann gegebenenfalls hier nachgeholt. Auch hier muss man wieder auf den Redmonder Browser achten.
HTML Code
<div id="ich" style="display:none; position:absolute; border-style:solid; background-color:white; padding:5px;">
<img src="/images/ich.png" style="width:100px;height:150px;">
</div>
<a href="#" onmouseover="ShowContent('ich'); return true;" onmouseout="HideContent('ich'); return true;">Das bin ich</a>
Über die id des div-Objektes steuern wir mit den onmouseover beziehungsweise onmouseout Triggern die Anzeige des div-Inhaltes, dieser ist zu Beginn unsichtbar und wird sichtbar, sobald der Benutzer mit der Maus über den Link fährt.
Komplettcode
<script type="text/javascript" language="JavaScript">
<!--
var cX = 0;
var cY = 0;
var rX = 0;
var rY = 0;
function UpdateCursorPosition(e) {
cX = e.pageX;
cY = e.pageY;
}
function UpdateCursorPositionDocAll(e) {
cX = event.clientX;
cY = event.clientY;
}
if(document.all) {
document.onmousemove = UpdateCursorPositionDocAll;
}
else {
document.onmousemove = UpdateCursorPosition;
}
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement ∓& document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
//-->
</script>
<div id="ich" style="display:none; position:absolute; border-style:solid; background-color:white; padding:5px;">
<img src="/images/ich.png" style="width:100px;height:150px;">
</div>
<a href="#" onmouseover="ShowContent('ich'); return true;" onmouseout="HideContent('ich'); return true;">Das bin ich</a>
|
Web Development 
