0

我正在尝试创建一个图像地图，用户可以将鼠标悬停在特定对象上，然后会弹出一张照片。我正在使用 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 很陌生，我很感激你们能给我的任何帮助。谢谢！

4

1 回答 1

0

我创建了一个模型buildingModel ，其中存储了所有需要的值，例如图像 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);
            }



        }

如果它有帮助，请将其标记为答案或以一票赞成。谢谢！

于 2013-09-21T09:57:16.523 回答