ユーザーが特定のオブジェクトにカーソルを合わせると写真がポップアップするイメージマップを作成しようとしています。Raphaeljs を使用して、ホバーされるオブジェクトを作成し、すべてのオブジェクトが写真の上にオーバーレイされます。この部分は完了しましたが、ユーザーがオブジェクトにカーソルを合わせたときに画像がポップアップするようにしようとしています。私はJavaScriptに非常に慣れていないので、あなたが与えることができる助けに感謝します.
これまでの私のコードは次のとおりです。
<html>
<head>
<title>Raphael Play</title>
<script type="text/javascript" src="javascript/raphael.js"></script>
<script type="text/javascript" src="javascript/our_script.js"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
google.load("jquery", "1.6");
</script>
<style type="text/css">
#canvas_container {
width: 718px;
border: 1px solid #aaa;
position: absolute;
z-index: 1000;
}
</style>
</head>
<body>
<div id="canvas_container"></div>
<div id="imagePhoto">
<img src="photo/photoMap.jpg" alt="map" />
</div>
</body>
ここに私の実際のJavaScriptページがあります:
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 718, 454);
var building_left = paper.path("M102.262,272.369L86.617,170.243h-0.001l-1.628-10.632l-0.361-2.355l-0.772-5.045,c3.807-1.873,16.113-3.42,19.919-5.295c16.499-8.117,24.5-16.563,40.998-24.682l5.64,38.233l-44.377,6.801l15.644,102.126,L102.262,272.369L102.262,272.369z");
var building_right = paper.path("M 179.229,294.203 255.138,224.116 255.139,224.116 261.668,218.086 264.791,215.203 268.54,211.74 224.758,164.323 211.355,176.695 241.813,209.682 165.905,279.771 179.229,294.203 z");
var building_middle = paper.path("M 121.679,269.394 165.432,284.533 198.59,188.698 154.837,173.561 121.679,269.394 z");
var auditorium = paper.path("M 308.953,287.341 324.306,272.827 434.898,253.264 442.893,259.055 435.941,268.646 457.102,388.746 348.424,407.501 341.092,366.764 312.423,372.086 297.54,289.234 308.953,287.341 z");
var building_hall = paper.path("M 353.574,219.885 345.305,171.459 428.613,157.234 436.881,205.659 353.574,219.885 z");
var office = paper.path("M 476.971,200.559 436.881,172.165 487.543,100.641 527.631,129.036 476.971,200.559 z");
var gym = paper.path("M 649.042,118.306 631.356,121.326 629.096,108.077 606.631,111.913 605.041,102.605 547.34,112.458 551.19,135.015 548.429,135.487 540.914,136.771 537.715,137.316 540.338,152.688 543.537,152.142 544.654,158.681 541.456,159.227 549.459,206.092 548.493,206.258 547.088,206.497 547.491,208.867 548.896,208.627 549.589,212.683 553.197,212.066 553.504,213.863 556.034,213.432 555.727,211.635 555.56,210.661 661.717,192.533 649.042,118.306 z");
gym.attr({stroke: "none",
fill: "#f00",
"fill-opacity": 0});
//This was just me testing to see hover changes
gym.hover(function () {
gym.attr({"stroke": "#000"});
},
function () {
gym.attr({"stroke": "none"});
});
}
ホバー時に画像を表示するには、ここからどこに行けばよいかわかりません。前に言ったように、私は JavaScript に非常に慣れていません。ありがとうございました！