jquery ツールチップで問題に直面しています。座標で5つの長方形部分に分割した単一の画像があります。ツールチップは機能していますが、必要な位置にツールチップが表示されません。すべてのツールチップが同じ場所に表示されます。
これは、単一の画像に複数のツールチップを表示するための私の html コードです。Firefox ではツールチップが表示されないか、Google Chrome ではすべてのツールチップが左上に表示されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ciclo</title>
<link rel='stylesheet' href='css/tooltips.css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<!--[if !IE | (gt IE 8)]>!-->
<script src="js/tooltips.js"></script>
<script>
$(function() {
$("#Map a[title]").tooltips();
});
</script>
<style type="text/css">
body{margin:0; padding:0;}
.ciclo_image{height:600px; width:600px; margin:100px auto}
</style>
</head>
<body>
<div class="ciclo_image">
<img src="img/ciclo2.jpg" width="600" height="600" border="0" usemap="#Map" />
<map name="Map" id="Map">
<a href="#" title="Market"><area shape="rect" coords="83,91,193,174" href="#" /></a>
<a href="#" title="Arising"><area shape="rect" coords="333,59,473,153" href="#" /></a>
<a href="#" title="Reprocessing"><area shape="rect" coords="5,318,141,385" href="#" /></a>
<a href="#" title="Collection"><area shape="rect" coords="480,302,578,373" href="#" /></a>
<a href="#" title="Shorting and Trading"><area shape="rect" coords="227,491,379,555" href="#" /></a>
</map>
</div>
</body>
</html>