我正在制作一个jQuery程序，当你点击一个图像地图的一部分时，它会将该部分的彩色版本直接放在你点击的部分上。它基本上就像一本着色书类型的工具。我终于完成了它的设计，并没有把它放到它的网站上，但遇到了一个非常严重的问题。
网站以800px的宽度为中心，着色工具位于导航栏下方的页面中间。当有人点击图片的某个部分时，需要直接点击他们点击的位置。当人们有不同的浏览器窗口大小和不同的显示器大小时，我不确定如何以网站为中心。如果有人需要我，我可以尝试更具描述性，但我不想丢掉这么多代码，以至于这个帖子不再令人困惑。
提前致谢。
我正在谈论的工具在这里：http://www.segodevelopment.com/custom/custom.html
答案 0 :(得分：1)
您必须为每个地图区域/部分制作主图像版本（与高度相同），区域/部分颜色与您希望的一样。
单击某个区域/部件时，只需将图像src更改为图像的相应区域/部件版本。
感谢您的链接，帮了很多忙！您需要将整个着色工具放在包含position: relative的包装器中。这样，添加position: absolute的所有图像都将基于包装器的左上角而不是主体定位。
由于你的身体周围有一个8像素的填充物，所以包装物必须具有它。否则，数组中的位置将为。
您网页的修改版本如下所示：
<html>
<head>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
#colorringTool {
position: relative;
padding: 8px;
}
#overlay
{
position:absolute;
z-index:1000;
}
</style>
</head>
<body>
<script type="text/javascript">
datapoints = Array();
datapoints[1]={
'top': '103',
'left': '16',
'color': 'empty'
}
datapoints[2]={
'top': '149',
'left': '20',
'color': 'empty'
}
datapoints[3]={
'top': '131',
'left': '42',
'color': 'empty'
}
datapoints[4]={
'top': '139',
'left': '21',
'color': 'empty'
}
datapoints[5]={
'top': '74',
'left': '64',
'color': 'empty'
}
datapoints[6]={
'top': '115',
'left': '72',
'color': 'empty'
}
datapoints[7]={
'top': '100',
'left': '99',
'color': 'empty'
}
datapoints[8]={
'top': '112',
'left': '79',
'color': 'empty'
}
datapoints[9]={
'top': '50',
'left': '130',
'color': 'empty'
}
datapoints[10]={
'top': '88',
'left': '139',
'color': 'empty'
}
datapoints[11]={
'top': '80',
'left': '169',
'color': 'empty'
}
datapoints[12]={
'top': '96',
'left': '145',
'color': 'empty'
}
datapoints[13]={
'top': '44',
'left': '208',
'color': 'empty'
}
datapoints[14]={
'top': '74',
'left': '213',
'color': 'empty'
}
datapoints[15]={
'top': '69',
'left': '251',
'color': 'empty'
}
datapoints[16]={
'top': '89',
'left': '214',
'color': 'empty'
}
datapoints[17]={
'top': '39',
'left': '292',
'color': 'empty'
}
datapoints[18]={
'top': '68',
'left': '292',
'color': 'empty'
}
datapoints[19]={
'top': '64',
'left': '338',
'color': 'empty'
}
datapoints[20]={
'top': '68',
'left': '369',
'color': 'empty'
}
datapoints[21]={
'top': '87',
'left': '292',
'color': 'empty'
}
datapoints[22]={
'top': '44',
'left': '384',
'color': 'empty'
}
datapoints[23]={
'top': '69',
'left': '405',
'color': 'empty'
}
datapoints[24]={
'top': '74',
'left': '448',
'color': 'empty'
}
datapoints[25]={
'top': '89',
'left': '361',
'color': 'empty'
}
datapoints[26]={
'top': '50',
'left': '464',
'color': 'empty'
}
datapoints[27]={
'top': '80',
'left': '482',
'color': 'empty'
}
datapoints[28]={
'top': '88',
'left': '518',
'color': 'empty'
}
datapoints[29]={
'top': '96',
'left': '418',
'color': 'empty'
}
datapoints[30]={
'top': '74',
'left': '538',
'color': 'empty'
}
datapoints[31]={
'top': '100',
'left': '553',
'color': 'empty'
}
datapoints[32]={
'top': '115',
'left': '584',
'color': 'empty'
}
datapoints[33]={
'top': '112',
'left': '475',
'color': 'empty'
}
datapoints[34]={
'top': '102',
'left': '602',
'color': 'empty'
}
datapoints[35]={
'top': '130',
'left': '613',
'color': 'empty'
}
datapoints[36]={
'top': '148',
'left': '638',
'color': 'empty'
}
datapoints[37]={
'top': '139',
'left': '533',
'color': 'empty'
}
datapoints[38]={
'top': '179',
'left': '596',
'color': 'empty'
}
datapoints[39]={
'top': '179',
'left': '28',
'color': 'empty'
}
datapoints[40]={
'top': '252',
'left': '308',
'color': 'empty'
}
datapoints[41]={
'top': '252',
'left': '308',
'color': 'empty'
}
</script>
<script type="text/javascript">
function validate(theForm)
{
var data=Array();
document.getElementById('chuteform');
for(i=1;i<=41;i++)
{
data.push(datapoints[i].color);
}
data.join(',');
theForm.fld_chutedata.value=data;
}
colour='red';
$(document).ready(function(){
$('.region').click(function(e){
e.preventDefault();
areaid=$(this).attr('title');
if ( datapoints[areaid].color=='empty' )
{
$('#chute').append('<img src="'+colour+'/'+areaid+'.png" style="position: absolute; top: ' + datapoints[ areaid ].top + 'px; left: ' + datapoints[ areaid ].left + 'px; z-index: 2" class="r'+areaid+'" >');
datapoints[areaid].color=colour;
}else if ( datapoints[areaid].color!='empty' )
{
$('.r'+areaid).replaceWith('<img src="'+colour+'/'+areaid+'.png" style="position: absolute; top: ' + datapoints[ areaid ].top + 'px; left: ' + datapoints[ areaid ].left + 'px; z-index: 2" class="r'+areaid+'" >');
datapoints[areaid].color=colour;
}
});
$('.changecolour').click(function(e)
{
e.preventDefault();
colour=$(this).attr('title');
$('.changecolour').removeClass('active');
$(this).addClass('active');
});
$('#clear').click(function(e){
e.preventDefault();
for( i=1; i<=41; i++)
{
datapoints[i].color='empty';
$('.r'+i).remove();
}
});
});
</script>
<div class="colouringTool">
<map id="chutemap" name="chutemap">
<area id="a1" class="region" shape="poly" alt="" title="1" coords="14,141,22,130,28,122,39,135,44,129,35,116,44,109,54,105,66,120,76,115,66,102,60,91,60,83,61,80,49,81,40,85,32,91,27,97,19,104,14,113,11,123,11,130,12,134,12,138" href="" target="" />
<area id="a2" class="region" shape="poly" alt="" title="2" coords="14,142,21,153,33,143,39,135,28,122,22,130" href="" target="" />
<area id="a3" class="region" shape="poly" alt="" title="3" coords="35,116,44,130,65,120,53,105,44,109" href="" target="" />
<area id="a4" class="region" shape="poly" alt="" title="4" coords="21,153,82,188,94,185,111,175,123,173,140,166,143,164,75,115,44,129,39,134,34,142" href="" target="" />
<area id="a5" class="region" shape="poly" alt="" title="5" coords="67,101,79,90,81,90,91,104,101,97,94,83,104,77,113,75,124,92,140,88,133,72,129,62,128,58,128,55,129,53,129,50,113,51,102,54,88,60,78,64,69,70,62,78,59,84,60,89,61,93" href="" target=""/>
<area id="a6" class="region" shape="poly" alt="" title="6" coords="66,102,76,115,91,103,81,89,78,91" href="" target="" />
<area id="a7" class="region" shape="poly" alt="" title="7" coords="94,83,101,96,124,91,114,75,104,78" href="" target="" />
<area id="a8" class="region" shape="poly" alt="" title="8" coords="75,115,143,164,160,161,173,154,186,155,201,148,140,88,101,96" href="" target="" />
<area id="a9" class="region" shape="poly" alt="" title="9" coords="134,72,149,63,159,80,168,75,164,58,176,55,187,55,195,75,210,73,204,49,204,37,207,33,190,29,181,30,164,34,149,37,136,44,129,50,128,57,129,63" href="" target="" />
<area id="a10" class="region" shape="poly" alt="" title="10" coords="134,72,140,88,160,80,149,63" href="" target="" />
<area id="a11" class="region" shape="poly" alt="" title="11" coords="165,57,167,75,195,75,187,55,176,54" href="" target="" />
<area id="a12" class="region" shape="poly" alt="" title="12" coords="140,88,201,148,213,149,230,143,244,143,258,138,210,74,195,75,167,75,155,82" href="" target="" />
<area id="a13" class="region" shape="poly" alt="" title="13" coords="206,54,222,49,231,69,246,64,245,45,267,44,273,66,288,67,287,45,287,32,290,25,278,20,268,19,255,18,246,20,232,21,218,26,206,33,205,42,205,46" href="" target="" />
<area id="a14" class="region" shape="poly" alt="" title="14" coords="207,54,210,74,230,68,223,49" href="" target="" />
<area id="a15" class="region" shape="poly" alt="" title="15" coords="245,45,246,65,273,67,267,43" href="" target="" />
<area id="a16" class="region" shape="poly" alt="" title="16" coords="210,73,258,138,270,140,287,136,301,137,315,135,288,68,246,65" href="" target="" />
<area id="a17" class="region" shape="poly" alt="" title="17" coords="287,45,302,43,308,65,332,63,332,39,339,39,339,62,364,65,369,42,384,46,385,33,382,25,369,18,349,14,321,13,309,15,297,20,290,25,287,32" href="" target="" />
<area id="a18" class="region" shape="poly" alt="" title="18" coords="287,46,288,68,308,66,303,43" href="" target="" />
<area id="a19" class="region" shape="poly" alt="" title="19" coords="332,39,333,61,338,62,339,39" href="" target="" />
<area id="a20" class="region" shape="poly" alt="" title="20" coords="369,42,363,65,384,68,385,46" href="" target="" />
<area id="a21" class="region" shape="poly" alt="" title="21" coords="288,67,315,134,321,137,330,137,336,134,341,136,351,137,356,135,384,67,335,62" href="" target="" />
<area id="a22" class="region" shape="poly" alt="" title="22" coords="382,25,385,34,383,67,398,67,405,44,427,45,425,64,441,68,449,49,465,55,467,48,467,37,465,32,454,26,439,20,426,20,414,18,401,18,392,20" href="" target="" />
<area id="a23" class="region" shape="poly" alt="" title="23" coords="405,44,398,67,426,65,427,44" href="" target="" />
<area id="a24" class="region" shape="poly" alt="" title="24" coords="448,49,440,68,461,73,465,55" href="" target="" />
<area id="a25" class="region" shape="poly" alt="" title="25" coords="383,67,356,134,365,137,376,137,384,135,391,139,405,140,414,138,461,73,426,65" href="" target="" />
<area id="a26" class="region" shape="poly" alt="" title="26" coords="465,33,467,38,466,50,464,59,461,73,476,75,485,55,498,55,507,58,504,76,513,80,522,64,538,73,544,58,543,50,532,42,521,36,507,34,492,31,483,30" href="" target="" />
<area id="a27" class="region" shape="poly" alt="" title="27" coords="485,54,476,75,504,76,507,57,495,55" href="" target="" />
<area id="a28" class="region" shape="poly" alt="" title="28" coords="522,64,512,79,532,88,538,72" href="" target="" />
<area id="a29" class="region" shape="poly" alt="" title="29" coords="461,74,413,138,429,143,442,143,459,149,471,148,531,88,503,76" href="" target="" />
<area id="a30" class="region" shape="poly" alt="" title="30" coords="543,51,544,59,538,73,532,88,547,91,558,75,570,79,578,82,571,96,580,104,590,90,593,91,605,102,612,90,612,82,603,71,593,63,582,59,568,53,557,51" href="" target="" />
<area id="a31" class="region" shape="poly" alt="" title="31" coords="558,76,547,91,571,97,577,83,568,78" href="" target="" />
<area id="a32" class="region" shape="poly" alt="" title="32" coords="590,90,580,103,597,115,605,102,594,92" href="" target="" />
<area id="a33" class="region" shape="poly" alt="" title="33" coords="531,88,570,97,596,115,528,164,514,162,504,158,499,155,485,155,470,148" href="" target="" />
<area id="a34" class="region" shape="poly" alt="" title="34" coords="611,81,612,90,596,115,606,120,617,105,629,111,636,116,628,130,632,135,643,122,650,130,657,142,659,137,661,129,659,117,655,109,649,101,644,97,637,89,627,83,620,81" href="" target="" />
<area id="a35" class="region" shape="poly" alt="" title="35" coords="618,106,606,120,628,130,636,116,627,109" href="" target="" />
<area id="a36" class="region" shape="poly" alt="" title="36" coords="643,123,632,135,650,153,657,143,651,132" href="" target="" />
<area id="a37" class="region" shape="poly" alt="" title="37" coords="590,187,650,152,644,148,635,138,627,129,596,115,528,164,539,170,552,175,560,175,569,181,578,185" href="" target="" />
<area id="a38" class="region" shape="poly" alt="" title="38" coords="590,187,649,154,620,193" href="" target="" />
<area id="a39" class="region" shape="poly" alt="" title="39" coords="52,192,81,187,22,153" href="" target="" />
<area id="a40" class="region" shape="rect" alt="" title="40" coords="308,234,318,271" href="" target="" />
<area id="a40" class="region" shape="rect" alt="" title="40" coords="325,235,346,272" href="" target="" />
<area id="a40" class="region" shape="rect" alt="" title="40" coords="353,235,363,272" href="" target="" />
<area id="a41" class="region" shape="rect" alt="" title="41" coords="319,235,324,272" href="" target="" />
<area id="a41" class="region" shape="rect" alt="" title="41" coords="347,235,352,272" href="" target="" />
</map>
<div id="colours">
<map id="colormap" name="colormap">
<area class="changecolour" shape="rect" alt="" title="blackberry" coords="0,0,20,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="tangerine" coords="21,0,41,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="limegreen" coords="42,0,62,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="lightblue" coords="63,0,83,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="jade" coords="84,0,104,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="red" coords="105,0,125,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="silver" coords="126,0,146,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="turquoise" coords="147,0,167,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="magenta" coords="168,0,188,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="lemon" coords="189,0,209,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="neonpink" coords="210,0,230,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="yellow" coords="231,0,251,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="kellygreen" coords="252,0,272,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="royalblue" coords="273,0,293,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="gold" coords="294,0,314,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="white" coords="315,0,335,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="black" coords="336,0,356,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="watermelon" coords="357,0,377,20" href="" target="" />
<area class="changecolour" shape="rect" alt="" title="navyblue" coords="378,0,398,20" href="" target="" />
</map>
</div>
<div id="colormappic">
<img src="colors.png" usemap="#colormap"/>
</div>
<div id="chute">
<img src="base-halfsize.png" id="overlay" usemap="#chutemap" />
</div>
<div style="position:absolute;left:319;top:350">
<a href="#" id="clear">
<button type="button">Clear</button>
</a>
</div>
<div style="position:absolute; left:100; top:450;">
<form action="make.php" method="post" id="chuteform" onsubmit="return validate(this)">
<input type="hidden" name="fld_chutedata" id="fld_chutedata" />
Name: <input type="text" name="theirname">
Email: <input type="text" name="email">
<input type="submit">
</form>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
所以你基本上想要在单击图像时将工具栏移动到光标目的地上方？
如果是这样的话，你可以这样做：
$("#img").click(function(e){
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('.coloring-tool').offset({top: relY, left: relX})
});
event.pageX属性返回鼠标指针相对于文档左边缘的位置。
请注意，如果动态添加图像，则需要使用“
$('#img-container').on('click', 'img', function(e) { //the same function as above});