Add element on top of image dynamically
Felipe Xavier
When I click the button, it has to add an object (img, p) inside the div and the image with border and then take the position of that object, (x, y coordinates).
How can I make this using JQuery?
HTML:
<div style="height: 440px; border: 1px solid; width: 880px; margin-top: 50px; margin-left: -12px;">
<img id="imagem-principal" width="880" height="440" class="custom_media_image attachment-post-thumbnail" src="<?= $segunda_imagem; ?>">
</div>
Jonathan Lam
To have a button create a new <img> and place it on top, add the following styles:
div {
position: relative;
}
img:not(#imagem-principal) {
position: absolute;
}
Then, you can add an onclick listener in jQuery:
$("#addImg").click(function() {
// set x and y to what you want
var xCoor = // X_COORDINATE;
var yCoor = // Y_COORDINATE;
var newImg = $("<img src='/* IMAGE_URL */' />");
newImg.css({left: xCoor, top: yCoor});
$("div").append(newImg);
});
This will create a new image with the given x and y coordinates on top of the other image.
See working example on JSFiddle.net.
Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Argument 2 passed to array_sort() must be callable, string given
- Next: How to jump from cider-error buffer to the repl buffer?
Related
Related Related
- 1
Add element on top of image dynamically
- 2
How to add an element on top of an image in HTML?
- 3
Dynamically add element to layout
- 4
JAXB add element dynamically
- 5
Dynamically add/remove element
- 6
Dynamic add element to the top of the page
- 7
How to add image to top layout
- 8
Add class to dynamically added element
- 9
Dynamically add specific attr to element
- 10
Dynamically add element to XML file
- 11
Dynamically add element in JS to XUL
- 12
Dynamically add element using angularJS
- 13
dynamically add attribute to child element
- 14
How to dynamically add Image to dynamically created ImageView
- 15
dynamically add textview on top of imageview android
- 16
VB - How to dynamically add items on TOP of listview
- 17
How to dynamically add LinearLayout on top of the TextView
- 18
Dynamically Add a overlay view on top of a fragment android
- 19
How to add Image to ImageView dynamically?
- 20
Dynamically add image to a slider in wordpress
- 21
Add dynamically a gif image with animation
- 22
Add an image dynamically to this beautiful frame
- 23
how to dynamically add image to imageView
- 24
Add overlay image on top of other image
- 25
Add class when element reaches top of viewport
- 26
AngularJS: Add a loader element to top of DOM
- 27
Make element same width as dynamically sized image?
- 28
Set source of image of dynamically created element in JavaScript
- 29
How to add an image to an element as a decorator?
Comments