这个替代方法如何突出图像之间的联系(如果您的设计允许):
- 添加足够宽/高的背景画布,以适应所有 html img。
- 将您的 html img 添加到画布顶部(而不是画布的一部分)。
- 悬停时,在画布上绘制连接线并在连接的图像周围放置高亮边框。
- 离开时,清除画布连接线并移除 img 边框。


这是代码和小提琴:http: //jsfiddle.net/m1erickson/4n9GK/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
#img1{position:absolute; left:30px; top:30px; }
#img2{position:absolute; left:200px; top:180px; }
#img3{position:absolute; left:30px; top:330px; }
#img4{position:absolute; left:200px; top:30px; }
#img5{position:absolute; left:30px; top:180px; }
#img6{position:absolute; left:200px; top:330px; }
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="skyblue";
ctx.fillRect(0,0,canvas.width,canvas.height);
$(".connectable").hover(
function(){connectGroup(this);},
function(){unconnectGroup(this);}
);
function connectGroup(element){
var $element=$(element);
var hubId=$element.attr("id");
var p=$element.position();
var hubX=p.left;
var hubY=p.top;
var hubW=$element.width();
var hubH=$element.height();
ctx.fillStyle="green";
ctx.fillRect(hubX-3,hubY-3,hubW+6,hubH+6);
var group=$element.attr("data-group");
var g="img[data-group='"+group+"']"
var $group=$(g);
var notG="img:not("+g+")";
var $hidden=$(notG);
$hidden.fadeOut();
$group.each(function(){
var $groupMember=$(this);
var id=$groupMember.attr("id");
if(id!=hubId){
var p=$groupMember.position();
var x=p.left;
var y=p.top;
var w=$groupMember.width();
var h=$groupMember.height();
ctx.fillStyle="green";
ctx.strokeStyle="green";
ctx.beginPath();
ctx.moveTo(hubX+hubW/2,hubY+hubH/2);
ctx.lineTo(x+w/2,y+h/2);
ctx.stroke();
ctx.fillRect(x-3,y-3,w+6,h+6);
}
});
}
function unconnectGroup(element){
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// show the hidden images
$("img").show();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=330 height=450></canvas>
<img id="img1" class="connectable" data-group="1" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png" width=100 height=100/>
<img id="img2" class="connectable" data-group="1" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png" width=100 height=100/>
<img id="img3" class="connectable" data-group="1" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png" width=100 height=100/>
<img id="img4" class="connectable" data-group="2" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png" width=100 height=100/>
<img id="img5" class="connectable" data-group="2" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png" width=100 height=100/>
<img id="img6" class="connectable" data-group="2" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png" width=100 height=100/>
<h3>Hover over image to show connections</h3>
</body>
</html>