Comment puis-je toujours aligner une image sur une autre, quelle que soit la taille de la fenêtre du navigateur?

Je crée un programme jQuery où, lorsque vous cliquez sur une partie d'une carte image, celle-ci place directement la version colorée de cette partie sur la partie sur laquelle vous avez cliqué. C'est fondamentalement comme un outil de type livre à colorier. J'ai finalement fini de le concevoir et je ne le mets pas sur son site mais je suis confronté à un très gros problème.Comment puis-je toujours aligner une image sur une autre, quelle que soit la taille de la fenêtre du navigateur?

Le site Web centré avec une largeur de 800px et l'outil de coloration se trouve au milieu de la page sous la barre de navigation. Quand quelqu'un clique sur une partie de l'image, elle doit aller directement au dessus de l'endroit où elle a cliqué. Je ne suis pas sûr de savoir comment faire avec le site Web centré lorsque les gens ont différentes tailles de fenêtres de navigateur et différentes tailles de moniteurs. Je peux essayer d'être plus descriptif si quelqu'un a besoin de moi, mais je ne veux pas jeter autant de code que ce message devient plus confus que cela puisse déjà être.

Merci d'avance.

outil que je parle ici est: http://www.segodevelopment.com/custom/custom.html

Source

2014-07-25 Hunter

Vous devez faire une version de l'image principale (même avec, hauteur) pour chaque zone de carte/partie avec la zone/partie colorée comme tu souhaites.

Lorsqu'une zone/pièce est cliquée, il vous suffit de modifier le src de l'image pour la version zone/partie correspondante de l'image.

Merci pour le lien, aidé beaucoup! Vous aurez besoin de mettre l'ensemble de l'outil de coloriage à l'intérieur d'un emballage avec position: relative. De cette façon, toutes les images ajoutées avec position: absolute seront positionnées en fonction du coin supérieur gauche de l'enveloppe au lieu du corps.

Comme votre corps avait un rembourrage de 8 px tout autour, il en est de même pour l'emballage. Sinon, les positions dans votre tableau seront de.

La version modifiée de votre page ressemble à ceci:

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

Source

2014-07-26 00:15:05 Niklas

C'est un peu ce que je faisais. Le mien a des images individuelles pour chaque couleur qui s'alignent sur l'image de base, mais tout cela est foiré quand je tente de le mettre au centre d'une page. L'outil de coloration est ici: http://www.segodevelopment.com/custom/custom.html – Hunter

Mis à jour ma réponse avec la solution. – Niklas

Merci beaucoup! Je pensais que quelque chose comme ça devrait être fait pour que ça marche mais je n'avais absolument aucune idée de comment y arriver. Très nouveau pour ce genre de choses, merci encore! – Hunter

SO Fondamentalement, vous voulez déplacer votre barre d'outils au-dessus de la destination de votre curseur, lorsque vous cliquez sur l'image?

Si c'est le cas, vous pouvez le faire:

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

La propriété event.pageX retourne la position du pointeur de la souris, par rapport au bord gauche du document.

Sachez que si votre image est ajoutée dynamiquement, vous devez utiliser ``

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

Source

2014-07-26 01:40:33 letsanov

J'ai mis l'outil dont je parlais en ligne ici: http://www.segodevelopment.com/custom/custom.html.Je ne pense pas que ce que vous allez faire est la même chose que ce que j'ai fait. Merci pour cette réponse cependant. – Hunter

Comment puis-je toujours aligner une image sur une autre, quelle que soit la taille de la fenêtre du navigateur?

Répondre

Questions connexes