Générer une image sur une autre image donnant une coordonnée

J'ai quelques coordonnées d'image et je veux les utiliser pour mettre une petite image sur ceux avec javascript. Est-ce que cela peut être accompli avec javascript ou je dois créer le div et modifier ses attributs css? En passant: l'image peut être placée n'importe où sur la page.Générer une image sur une autre image donnant une coordonnée

Source

2013-01-04 Octavian

avec javascript vous pouvez créer un élément de dom vous avez besoin et aussi modifier les styles –

Oui, mais comment changer le style de la place sur les coordonnées exactes d'une image non-fixe? – Octavian

vous voulez placer l'image où vous voulez sur l'écran, ce qui signifie que vous devez mettre la position absolue. Ensuite, vous pouvez définir sa position par 'top',' left', 'right',' bottom'. –

Voici un code entièrement fonctionnel: Live Demo

CSS

.overlays{ 
    position:absolute; 
}

function showImage() { 
    // myImage : ID of image on which to place new image 

    var image = document.getElementById('myImage'); 

    console.log(image.width); 

    margin = 20; 

    l = image.offsetLeft; 
    t = image.offsetTop; 
    w = image.width; 
    h = image.height; 

    // Location inside the image 
    offX = parseInt(Math.random() * w); 
    offY = parseInt(Math.random() * h); 

    if(offX > margin) offX -= margin; 
    if(offY > margin) offY -= margin; 

    l += offX; 
    t += offY; 

    var newImage = document.createElement("img"); 
    newImage.setAttribute('src', '1.jpg'); 
    newImage.setAttribute('class', 'overlays'); 
    newImage.style.left = l + "px"; 
    newImage.style.top = t + "px"; 
    document.body.appendChild(newImage); 
}

Source

2013-01-04 13:18:04 ATOzTOA

N'utilisez jamais le signe moins ('-') dans les noms de variables! C'est invalide JS ('SyntaxError: Unxpected token -'), sans parler de la rendre plus difficile à lire. – Cerbrus

Comment calculer off-x et off-y en JS pur? (La position de l'image est relative et je peux dire, aléatoire) – Octavian

@Octavian Utilisez rand() pour obtenir un x, y. – ATOzTOA

css:

#yourId{ 
    position: absolute; 
}

js:

var img = document.getElementById('yourId'), // or any other selector 
    x = x, // your data 
    y = y; // your data 
img.style.left = x+"px"; 
img.style.top = y+"px";

Source

2013-01-04 13:11:36

essayer ce pour placer la nouvelle image sur les coordonnées (X,Y) d'une image parent:

var newImg = document.getElementById('newImg'), // your new (small) image 
    img = document.getElementById('parentImg'); // parent image 
document.body.insertBefore(newImg, img); // Insert the new image before the image 
document.body.insertBefore(img, newImg); // Then switch places (So the small image is after the big one in the DOM) 

newImg.style.position = 'relative'; 
newImg.style.left = X + "px"; 
newImg.style.top = (Y - img.height)+"px"; // Substract the height of the source image to get the position relative to the top left.

Le double insertBefore est d'insérer la nouvelle image après l'offre une, en insérant d'abord avant le grand, puis en déplaçant le grand devant.
Ensuite, il suffit de définir les coordonnées de la nouvelle image par rapport à la grande image.

Working Example (Set pour afficher la superposition au bout de 2 secondes pour montrer la différence)

Source

2013-01-04 13:20:12 Cerbrus

Générer une image sur une autre image donnant une coordonnée

Répondre

Questions connexes