我正在尝试创建一个图像映射，用户可以将鼠标悬停在特定对象上，然后会弹出照片。我正在使用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很新，我感谢你们给我的任何帮助。谢谢！
答案 0 :(得分：0)
我创建了一个模型buildingModel，其中存储了所有需要的值，如image src和在悬停时创建的临时图像。还有一个阵列可以容纳添加到纸张上的所有元素，以便于访问。随意尝试。
window.onload = function () {
var paper = new Raphael(document.getElementById('canvas_container'), 718, 454);
var buildingModel = function (name, raphaelEl, image) {
var self = this;
self.Name = name;
self.Render = raphaelEl
self.ImageSrc = image;
self.ImageRender = null;
self.Render.ParentModel = self;
};
var onObjectHoverIn = function () {
this.ImageRender = paper.image(this.ImageSrc, this.Render.getBBox().x + 100, this.Render.getBBox().y +100, 100, 100);
};
var onObjectHoverOut = function () {
if (this.ImageRender) {
this.ImageRender.remove();
}
};
var objects = new Array();
var building_left = new buildingModel('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"), 'http://www.julian-charriere.net/sites/default/files/styles/project_image/public/some_pigeons_are_more_equal_than_other_Charri%C3%A8re_Bismarck3.jpg');
var building_right = new buildingModel('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"), 'http://www.julian-charriere.net/sites/default/files/styles/project_image/public/some_pigeons_are_more_equal_than_other_Charri%C3%A8re_Bismarck3.jpg');
var building_middle = new buildingModel('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"), 'http://www.julian-charriere.net/sites/default/files/styles/project_image/public/some_pigeons_are_more_equal_than_other_Charri%C3%A8re_Bismarck3.jpg');
var auditorium = new buildingModel('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"), 'http://www.julian-charriere.net/sites/default/files/styles/project_image/public/some_pigeons_are_more_equal_than_other_Charri%C3%A8re_Bismarck3.jpg');
var building_hall = new buildingModel('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"), 'http://www.julian-charriere.net/sites/default/files/styles/project_image/public/some_pigeons_are_more_equal_than_other_Charri%C3%A8re_Bismarck3.jpg');
var office = new buildingModel('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"), 'http://www.julian-charriere.net/sites/default/files/styles/project_image/public/some_pigeons_are_more_equal_than_other_Charri%C3%A8re_Bismarck3.jpg');
var gym = new buildingModel('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"), 'http://www.julian-charriere.net/sites/default/files/styles/project_image/public/some_pigeons_are_more_equal_than_other_Charri%C3%A8re_Bismarck3.jpg');
objects.push(building_left);
objects.push(building_right);
objects.push(building_middle);
objects.push(auditorium);
objects.push(building_hall);
objects.push(office);
objects.push(gym);
for (var i = 0; i < objects.length; i++) {
var objMod = objects[i];
objMod.Render.attr({
stroke: "none",
fill: "#f00",
"fill-opacity": 1
});
objMod.Render.hover(onObjectHoverIn,onObjectHoverOut,objMod,objMod);
}
}
如果有帮助请将其标记为答案或由一个人提出。谢谢！