[JavaScript] DIV bei mouseover an Mausposition anzeigen

Cubbi · 9. November 2008

DIV bei mouseover an Mausposition anzeigen

Hallo,

ich habe eine Seite, auf der viele kleine Bilder zu sehen sind. Fährt man nun mit der Maus über ein Bild, soll eine vergrößerte Version in einem div-container angezeigt werden.

Optimaler weise befindet sich dieser Container direkt neben der Maus, damit der User nicht verwirrt ist, wo denn auf einmal das Bild herkommt

Mein jetztiger Code ermöglicht es, bei mouseover einen Div-Container anzuzeigen und per alert x und y anzuzeigen. Diese Werte müssen nun im style-Bereich ersetzt werden.

Hier der Code:

HTML:

<html>
<head>
<script language="JavaScript">
 function show(el) {
 document.getElementById(el).style.display = "block";
 }
 function hide(el) {
 document.getElementById(el).style.display = "none";
 }
 
 function init_mousemove() {
document.onmouseover = maus;
}
 
 function maus(e)
{
x = e.pageX || window.event.x;
y = e.pageY || window.event.y;
alert(x);
alert(y);
}
</script>
</head>
<body>
 <div style="background:yellow; width:200px" onmouseover="show('item01'); maus(event);return false;" onmouseout="hide('item01');">&Uuml;berfahr mich!</div>
 <div id="item01" style="background:red; width:200px; display:none; height: 20; position: absolute; ">Hallo hier bin ich!</div>
</body>
</html>

Edit Wenn jemand das noch basteln könnte, wäre nice

Anzeige

myth2806 · 9. November 2008

AW: Div bei mouseover an Mausposition anzeigen *update*

das was du brauchst ist ja nur noch die positionierung der div-box. die entsprechenden eigenschaften eines objektes sind

Code:

objekt.style.top
objekt.style.left

also zB

Code:

document.getElementById("testdiv").style.top = "100px"

wobei ich die position-eigenschaft auf fixed setzten würde.
häufiger fehler: wenn du die mausposition ausliest dann hast du die reinen zahlenwerte in pixel. du musst also noch "px" hinten anhängen damit css was damit anfangen kann. also zB

Code:

document.getElementById("testdiv").style.left = window.event.x + "px";

greez myth

Cubbi · 9. November 2008

AW: Div bei mouseover an Mausposition anzeigen *update*

Hi, danke, funktioniert super und ist gut erklärt. Habe es aber leider noch nicht hingekriegt, dass die ID dynamisch übergeben wird (wird ja beim ersten Teil für

HTML:

display:none;

bzw.

HTML:

display:block;

mit el gemacht,

HTML:

function show(el) {
 document.getElementById(el).style.display = "block";
 }

meine Umschreibversuche für die Mausposition sind aber alle gescheitert ^^)

Momentaner Code:

HTML:

<html>
<head>
<script language="JavaScript">
 function show(el) {
 document.getElementById(el).style.display = "block";
 }
 function hide(el) {
 document.getElementById(el).style.display = "none";
 }
 
 function init_mousemove() {
document.onmouseover = maus;
}
 
 function maus(e)
{
x = e.pageX || window.event.x;
y = e.pageY || window.event.y;
document.getElementById("item01").style.left = window.event.x + "px";
document.getElementById("item01").style.top = window.event.y + "px";
}
</script>
</head>
<body>
 <div style="background:yellow; width:200px"></div><img onmouseover="show('item01'); maus(event);return false;" onmouseout="hide('item01');" src="http://images60.affili.net/968/4937968_1.jpg">
 <div id="item01" style="background:red; width:200px; display:none; height: 20; position: absolute; top: 0; left: 0;"><img src="http://images180.affili.net/968/4937968_1.jpg"></div>
</body>
</html>

Man müste als das item01 hier

HTML:

document.getElementById("item01").style.left = window.event.x + "px";
document.getElementById("item01").style.top = window.event.y + "px";

dynamisch gestalten können.

Telefonzelle · 9. November 2008

AW: Div bei mouseover an Mausposition anzeigen *update*

position:absolute;

und gibts nich auch document.onmousemove? blub.

Cubbi · 9. November 2008

AW: Div bei mouseover an Mausposition anzeigen *update*

danke, klappt :-D

Nützliche Suchen

[JavaScript] DIV bei mouseover an Mausposition anzeigen

Videos zum Themenbereich