懸停時需要顯示圖像-使用raphaeljs的圖像地圖
[英]need to display image upon hover - image map using raphaeljs
問題描述
我正在嘗試創建一個圖像地圖，用戶可以將其懸停在特定對象上，然后將彈出照片。 我正在使用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非常陌生，非常感謝你們能為我提供的任何幫助。 謝謝！
1 個解決方案
解決方案1
0 已采納 2013-09-21 09:57:16
我創建了一個模型buildingModel ，其中存儲了所有必需的值，例如image src和在懸停時創建的臨時image。 還有一個數組，其中包含所有添加到紙張上的元素，以便於訪問。 隨時嘗試。
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);
}
}
如果有幫助，請將其標記為答案或將其評分為1。 謝謝！
使用jQuery和圖像映射在懸停時更改圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.