Hej coldgate !
Dette er den spæde start på en rutine som gør hvad du efterlyser. I hvert fald hvis jeg har læst dit spørgsmål rigtigt.
Kan finpudses på mange ledder - men virker i Internet Explorer, Netscape, Firefox og Opera.
Jeg har brugt et billede som hedder Havnefoto.jpg og som har højden 200px og bredden 300px.
Indsæt navnet på et af dine egne billeder.
Skal du bruge andre billed-dimensioner kan der laves nogle javascript-rutiner som gør programmet mere generelt.
- - -
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv = "imagetoolbar" content = "no">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.photosize { height:200px; width:300px; }
#bigphoto { position:absolute; top:140px; left:0px; z-index:3; }
#kvadrat { position:absolute; top:140px; height:60px; left:0px; width:60px; border:1px solid blue; z-index:4; }
#hidetop { position:absolute; top:0px; height:140px; left:320px; width:60px; z-index:2; background-color:white; }
#hideleft { position:absolute; top:0px; height:340px; left:80px; width:240px; z-index:2; background-color:white; }
#hideright { position:absolute; top:0px; height:340px; left:380px; width:240px; z-index:2; background-color:white; }
#hidebottom { position:absolute; top:200px; height:140px; left:320px; width:60px; z-index:2; background-color:white; }
#smallbit { position:absolute; top:120px; height:200px; left:320px; width:300px; z-index:1; }
</style>
<script type="text/javascript">
var Xmouse, Ymouse;
if (!document.all) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;
function getMouseXY(e)
{
if (!BringThumbnail) return false;
if (document.all)
{
Xmouse = event.clientX + document.body.scrollLeft;
Ymouse = event.clientY + document.body.scrollTop;
}
else {Xmouse = e.pageX; Ymouse = e.pageY};
MoveThumbnail();
return true;
}
function MoveThumbnail()
{
var Bigphoto=document.getElementById("bigphoto").style;
var Xbigphoto=Bigphoto.left; var Xdisplace=Xmouse-Xbigphoto-0;
var Ybigphoto=Bigphoto.top; var Ydisplace=Ymouse-Ybigphoto-140;
if ((Xdisplace > 240) || (Ydisplace > 140)) return false;
var Kvadrat=document.getElementById("kvadrat").style;
Kvadrat.left=Xmouse+"px"; Kvadrat.top=Ymouse+"px";
var Smallbit=document.getElementById("smallbit").style;
Smallbit.left=(320-Xdisplace)+"px"; Smallbit.top=(140-Ydisplace)+"px";
}
var BringThumbnail=false;
</script>
</head>
<body>
<img id="bigphoto" src="Havnefoto.jpg" class="photosize" onmouseover="BringThumbnail=true" onmouseout="BringThumbnail=false">
<img id="smallbit" src="Havnefoto.jpg" class="photosize">
<div id="hidetop"> </div>
<div id="hideleft"> </div>
<div id="hideright"> </div>
<div id="hidebottom"> </div>
<div id="kvadrat"> </div>
</body>
</html>
- Hilsen Per
