morgen,
ich möchte ein div mit einem kleinen text anzeigen lassen, sobald man über ein div mit einem bild fährt.
function pre_pop(event,nummer) {
if(window.navigator.userAgent.indexOf("MSIE") >=0) {
$("pre_mouseover" + nummer).style.visibility = "visible";
$("pre_mouseover" + nummer).style.left = window.event.clientX;
$("pre_mouseover" + nummer).style.top = window.event.clientY;
}
else {
$("pre_mouseover" + nummer).style.visibility = "visible";
$("pre_mouseover" + nummer).style.left = event.screenX;
$("pre_mouseover" + nummer).style.top = event.screenY;
}
}
function pre_collapse(nummer) {
$("pre_mouseover" + nummer).style.visibility = "hidden";
}
soweit mein JS. das HTML sieht wie folgt aus:
<div class="pre_img" onmouseover="pre_pop(event,1)" onmouseout="pre_collapse(1)">
<img src="img/pre_img1.jpg" alt="">
</div>
<div id="pre_mouseover1" style="visibility:hidden; position:absolute; top:0px; left:0px;">
BESCHREIBUNGSTEXT 1
</div>
<div class="pre_img" onmouseover="pre_pop(event,2)" onmouseout="pre_collapse(2)">
<img src="img/pre_img1.jpg" alt="">
</div>
<div id="pre_mouseover2" style="visibility:hidden; position:absolute;">
BESCHREIBUNGSTEXT 2
</div>
<div class="pre_img" onmouseover="pre_pop(event,3)" onmouseout="pre_collapse(3)">
<img src="img/pre_img1.jpg" alt="">
</div>
<div id="pre_mouseover3" style="visibility:hidden; position:absolute;">
BESCHREIBUNGSTEXT 3
</div>
css:
.pre_img { width:50px; height:50px; border:1px solid #000; float:left; margin:3px; vertical-align:middle; }
soweit klappts im IE wunderbar, der firefox fügt jedoch anscheinend den doppelten betrag von .top .left hinzu.
interessant ist, wenn ich folgende zeilen:
else {
$("pre_mouseover" + nummer).style.visibility = visible";
//$("pre_mouseover" + nummer).style.left = event.screenX;
//$("pre_mouseover" + nummer).style.top = event.screenY;
}
so auskommentiere, wird das jeweilige div wie gewünscht ganz oben links angezeigt.
freue mich über eure tipps :)
koko