htmlvisitor
Neues Mitglied
Hallo,
Beim folgenden Code wird das image1.jpg grösser dargestellt, sobald die Maus auf das Bild zeigt.
Wenn ich das Bild an anderer Stelle platziere (zB. in div mit padding-top: 200px; padding-left: 200px), wird die vergrösserte Version weiterhin nur dargestellt, wenn die Maus an der ursprünglichen Stelle des Bildes platziert wird.
Wie erreiche ich es, dass der Effekt immer beim tatsächlichen Berühren des Bildes (unabhängig von seiner Position) sichtbar ist?
Patrick
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><img id="image11" src="image1.jpg" alt="" onmouseover="XandY();" /></TD>
<TD><div id="testdiv" align="center" style="position:absolute; left: 201px; top: 151px; background-color: #CC6633; layer-background-color: #CC6633; border: 5px solid #000000;display:none;"></TD>
</TR>
</TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function XandY()
{
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
var returnX;
function getMouseXY(e)
{
if (IE)
{
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else
{
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < document.getElementById("image11").width)
{
var w=tempX+document.getElementById("image11").width;
var h=tempY+document.getElementById("image11").height;
document.getElementById("testdiv").style.left=w;
document.getElementById("testdiv").style.top=h;
document.getElementById("testdiv").style.display="inline";
var width=(document.getElementById("image11").width)*2;
var height=(document.getElementById("image11").height)*2;
document.getElementById("testdiv").innerHTML="<img src='image1.jpg' alt='' width='"+width+"'height='"+height+"' />";
}
if (tempX > 172)
{
document.getElementById("testdiv").innerHTML="";
document.getElementById("testdiv").style.display="none";
}
if (tempY > document.getElementById("image11").height)
{
document.getElementById("testdiv").innerHTML="";
document.getElementById("testdiv").style.display="none";
}
}
}
//-->
</SCRIPT>
</BODY>
</HTML>
Beim folgenden Code wird das image1.jpg grösser dargestellt, sobald die Maus auf das Bild zeigt.
Wenn ich das Bild an anderer Stelle platziere (zB. in div mit padding-top: 200px; padding-left: 200px), wird die vergrösserte Version weiterhin nur dargestellt, wenn die Maus an der ursprünglichen Stelle des Bildes platziert wird.
Wie erreiche ich es, dass der Effekt immer beim tatsächlichen Berühren des Bildes (unabhängig von seiner Position) sichtbar ist?
Patrick
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><img id="image11" src="image1.jpg" alt="" onmouseover="XandY();" /></TD>
<TD><div id="testdiv" align="center" style="position:absolute; left: 201px; top: 151px; background-color: #CC6633; layer-background-color: #CC6633; border: 5px solid #000000;display:none;"></TD>
</TR>
</TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function XandY()
{
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
var returnX;
function getMouseXY(e)
{
if (IE)
{
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else
{
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < document.getElementById("image11").width)
{
var w=tempX+document.getElementById("image11").width;
var h=tempY+document.getElementById("image11").height;
document.getElementById("testdiv").style.left=w;
document.getElementById("testdiv").style.top=h;
document.getElementById("testdiv").style.display="inline";
var width=(document.getElementById("image11").width)*2;
var height=(document.getElementById("image11").height)*2;
document.getElementById("testdiv").innerHTML="<img src='image1.jpg' alt='' width='"+width+"'height='"+height+"' />";
}
if (tempX > 172)
{
document.getElementById("testdiv").innerHTML="";
document.getElementById("testdiv").style.display="none";
}
if (tempY > document.getElementById("image11").height)
{
document.getElementById("testdiv").innerHTML="";
document.getElementById("testdiv").style.display="none";
}
}
}
//-->
</SCRIPT>
</BODY>
</HTML>