необходимо отобразить изображение при наведении курсора - карта изображения с использованием Raphaeljs

Question

необходимо отобразить изображение при наведении курсора - карта изображения с использованием Raphaeljs

0

Я пытаюсь создать imagemap, где пользователь может нависнуть над определенным объектом, и появится всплывающее окно. Я использую 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, и я ценю любую помощь, которую вы, ребята, можете мне дать. Спасибо!

user2801217 21 сен. 2013, в 05:13

Источник

Теги:

javascript

jquery

html

hover

raphael

1 ответ

Ещё вопросы

Adam Moszczyński · Accepted Answer · 2013-09-21T08-23-00.000Z

Я создал модель 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);
            }



        }

Если это помогает, отметьте его в качестве ответа или увеличьте его на единицу. Благодарю!