Jeg har for nogen tid siden eksperimenteret med et gruppebillede, hvor jeg prøvede dette som måske kan inspirere:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Familietræf - Påsken 2007</title>
<script type="text/javascript">
function showDbg(strTxt){
var dst = document.getElementById('dbgDisp');
dst.replaceChild(document.createTextNode(strTxt), dst.firstChild);
dst.style.display='block';
}
function showInfo(idx){
var dst = document.getElementById('infoDisp');
dst.replaceChild(document.createTextNode("Info "+idx), dst.firstChild);
dst.style.display='block';
}
function hideInfo(){
document.getElementById('infoDisp').style.display='none';
}
function editInfo(idx){
alert('edit'+idx)
}
var hh,ww,trkImg;
function overImg(evt){
evt = evt || event;
var trkStyle = trkImg.style;
showDbg(evt.clientX+','+evt.clientY+' - '+trkStyle+','+typeof trkStyle.height);
trkImg.scrollLeft = evt.clientX * ww - parseInt(trkStyle.width)/2;
trkImg.scrollTop = evt.clientY * hh - parseInt(trkStyle.height)/2;
//trkStyle.left = (evt.clientX - parseInt(trkStyle.width)/2)+'px';
//trkStyle.top = (evt.clientY - parseInt(trkStyle.height)/2)+'px';
}
window.onload = function(){
var mainImg = document.getElementById('mainImg');
var inset = document.getElementById('inset');
trkImg = document.getElementById('trkImg');
hh = inset.height/mainImg.height;
ww = inset.width/mainImg.width;
mainImg.onmousemove=overImg;
trkImg.onmousemove=overImg;
var areas = document.getElementsByTagName('area');
for (var ii=0, nn=areas.length; ii<nn; ii++) {
areas[ii].onmousemove=overImg;
var showII=new Function('','showInfo('+ii+')');
areas[ii].onmouseover=showII;
areas[ii].onfocus=showII;
areas[ii].onmouseout=hideInfo;
areas[ii].onclick=new Function('','editInfo('+ii+')');
}
}
</script>
<style type='text/css'>
#mainImg {
position: absolute; top: 0px; left: 0px; z-index: 0
}
#trkImg{
position:absolute; z-index:1; overflow:hidden; border:3px solid #CCCBC8
}
#infoDisp{
position:absolute; display:none; color:#FFFFFF; background-color:#000000; z-index:2
}
#dbgDisp{
position:absolute; top:680px; left:400px; z-index:3
}
</style>
</head>
<body>
<div><map name="FPMap0">
<area shape="circle" coords="160, 367, 35" href='#' alt='Klik = Edit'>
<area shape="circle" coords="360, 367, 35" href='#' alt='Klik = Edit'>
</map><img id='mainImg' border="0" src="påsken%202007%20+%20Familietræf%20040.jpg" width="1024" height="680" usemap="#FPMap0" alt='Klik = Edit'></div>
<div id='trkImg' style="top:494px; left:0px; height:180px; width:180px;"><img
id='inset' src="påsken%202007%20+%20Familietræf%20040.jpg" width="3008" height="2000" alt='Klik = Edit'></div>
<div id='infoDisp' style='top:654px'>info</div>
<div id='dbgDisp'>debug</div>
</body>
</html>
