stackoom
  简体   繁体   中英

How can I make an image always be aligned on top of another one regardless of browser window size?

 原文  2014-07-25 23:43:48  1   2    javascript/ jquery/ html/ css

Question

I am making a jQuery program where when you click a part of an image map, it puts of colored version of that part directly over the part you clicked. It's basically like a coloring book type of tool. I have finally finished designing it and am not putting it into its website but am running into a very major problem.

The website it centered with a width of 800px and the coloring tool is in the middle of the page below the navigation bar. When someone clicks on a part of the image, it needs to go directly on top of where they clicked. I'm not sure how to do this with the website centered when people have different browser window sizes and different monitor sizes. I can try to be more descriptive if anyone needs me to but I'm don't want to throw out so much code that this posts gets anymore confusing that it already may be.

Thanks in advance.

Tool that I'm talking about is here: http://www.segodevelopment.com/custom/custom.html

2 answers

solution1
 1 ACCPTED  2014-07-26 00:15:05

You'll have to make a version of the main image (same with, height) for each map area/part with the area/part colored like you wish.

When an area/part is clicked you simple change the image src to the corresponding area/part version of the image.

Thanks for the link, helped a lot! You'll need to put the whole coloring tool inside a wrapper with position: relative . That way all the images being added with position: absolute will be positioned based un the upper left corner of the wrapper instead of the body.

As your body had a padding of 8 px all around, so does the wrapper have to have it to. Otherwise the positions in your array will be of.

The modified version of your page looks like this: 

<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>

solution2
 0  2014-07-26 01:40:33

SO basically you want to move your toolbar above the destination of your cursor, when you click on the image?

If thats the case you can do this : 

$("#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})
});

The event.pageX property returns the position of the mouse pointer, relative to the left edge of the document.

Be aware that if your image is dynamically added , you will need to use `` 

$('#img-container').on('click', 'img', function(e) { //the same function as above});

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I make my Chrome Extension window always on top How to make an image always the size (or bigger) than the browser window, and stuck to a certain point How to make 2 divs that are inside one “top panel” but in different cornes not to overlap one another when window size is changed? How do I force a browser window to always be on top and in focus Given three divs aligned horizontally, how can I make the center div clear the other two in the event that the browser window resizes? How can I make the browser window slimmer? How can I force a Facebook login window to always be on top? How to make Popup window always on top How can I make a popup appear at the top of the browser? How can I make a Twitter style alert stick to the top of the window?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM