fixierte Bilder auf Bild mit bestimmten Koordinaten, Verhältnis?

Question

Ich habe es geschafft, ein Bild auf meiner Website zu haben, wo durch das Bewegen der Maus auf bestimmte Orte andere Bilder in diesen Räumen in absoluter Position angehängt werden.

Hier ist, wie es aussieht vor:

Hier ist, wie es aussieht, nachdem mit der Maus auf die Räume schweben:

Das einzige Problem ist, wenn ich verkleinere mein Fenster mit einer kleineren Breite, die Bilder werden nicht so platziert, wie sie in größerer Breite sind:

Wie Sie sehen können, überschreiten die Bilder das Hintergrundbild. Hier

ist das Skript I umgesetzt:

$(function() { 
$(".mycinetik-image").find("img").mousemove(function(e) { 
    var offset = $(this).offset(); 
    var relativeX = (e.pageX - offset.left); 
    var relativeY = (e.pageY - offset.top); 
    var taillePhotoX = $(this).outerWidth(); 
    var taillePhotoY = $(this).outerHeight(); 
    var widthImage1 = (taillePhotoX/1.591) - (taillePhotoX/8); 
    var widthImage2 = (taillePhotoX/2.683) - (taillePhotoX/8.7); 
    var heightImage1 = (taillePhotoY/1.56) - (taillePhotoY/24.84); 
    var heightImage2 = (taillePhotoY/1.067) - (taillePhotoY/1.56); 
    if((relativeX >= taillePhotoX/7) && (relativeX <= taillePhotoX/1.6) && (relativeY <= taillePhotoY/1.59) && (relativeY >= taillePhotoY/13.1)){ 
    appendImgMyCinetik (1, taillePhotoX/7.75, taillePhotoY/23, widthImage1, heightImage1); 
    } 
    else if((relativeX >= taillePhotoX/7) && (relativeX <= taillePhotoX/2.5) && (relativeY <= taillePhotoY/1.084) && (relativeY >= taillePhotoY/1.514)){ 
    appendImgMyCinetik (2, taillePhotoX/7.5, taillePhotoY/1.56, widthImage2, heightImage2); 
    } 
    else if((relativeX >= taillePhotoX/2.5) && (relativeX <= taillePhotoX/1.6) && (relativeY <= taillePhotoY/1.084) && (relativeY >= taillePhotoY/1.514)){ 
    appendImgMyCinetik (3, taillePhotoX/2.6, taillePhotoY/1.56, widthImage2, heightImage2); 
    } 
    else if((relativeX >= taillePhotoX/1.55) && (relativeX <= taillePhotoX/1.01) && (relativeY <= taillePhotoY/1.084) && (relativeY >= taillePhotoY/1.514)){ 
    appendImgMyCinetik (4, taillePhotoX/1.586, taillePhotoY/1.56, widthImage2, heightImage2); 
    } 
    else if((relativeX >= taillePhotoX/1.6) && (relativeX <= taillePhotoX/1.01) && (relativeY <= taillePhotoY/1.59) && (relativeY >= taillePhotoY/13.1)){ 
    appendImgMyCinetik (5, taillePhotoX/1.586, taillePhotoY/20, widthImage2, heightImage1); 
    } 
}); 
}); 

function appendImgMyCinetik (nb, x, y, imgWidth, imgHeight){ 
if(nb == 1 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="1" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart1.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#1").animate({ 
     opacity:1 
    }, 500); 
}else if(nb == 2 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="2" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart2.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#2").animate({ 
     opacity:1 
    }, 500); 
}else if(nb == 3 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="3" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart3.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#3").animate({ 
     opacity:1 
    }, 500); 
}else if(nb == 4 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="4" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart4.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#4").animate({ 
     opacity:1 
    }, 500); 
}else if(nb == 5 && ($("#" + nb).length == 0)){ 
    var newImg= '<img id="5" style="position:absolute; top:'+ y +'px; left:'+ x +'px; width:'+ imgWidth +'px; height:'+ imgHeight +'px; opacity:0;" src="img/appart5.png">'; 
    $(".mycinetik-image").append(newImg); 
    $("#5").animate({ 
     opacity:1 
    }, 500); 
} 
} 

I-Verhältnisse verwenden, um die Bildgröße an die Bildschirmbreite anzupassen, sondern weirdly, desto kleiner ist meine Fensterbreite ist, desto höher ist die übertreten ist.

Haben Sie irgendwelche Ideen?

Answer 1

Es ist schwer, mit dieser kleinen Information zu antworten. Sie erwähnten, dass Sie Verhältnisse verwenden, um die Bildgröße anpassen, sondern Ihre Funktion wird mit festen Größen in Pixel

'width:'+ imgWidth +'px;' 

Ich sehe, dass Sie die Zuordnung der Breitenwerte mit:

var taillePhotoX = $(this).outerWidth(); 

aber dies ist nicht relativ zur Fenstergröße. es hängt vom Bild ab und das wird über verschiedene Fenster hinweg konstant sein.

könnten Sie verwenden:

var taillePhotoX = $(window).width() // * (times) proportion ratio calculation; 

Um es in das Browserfenster relativ zu machen.

Wenn Sie eine endliche Anzahl überlappender Bilder haben (Ihr Code berücksichtigt nur 5), können Sie Klassen verwenden, um festzulegen, wie sie über verschiedene Bildschirmgrößen einschließlich Übergängen hinweg aussehen sollen. Dann haben Sie die Funktion, einfach die entsprechende Klasse entsprechend zuzuordnen.