Drag And Drop html control over a canvas image using Angular Js - html

I want an Application where a user can drag and drop HTML control like textbox, checkbox, calendar over an image and the user can also able to resize it. I have done so many R&D but didn't find any solution. I am attaching the image below for reference.
[![enter image description here][1]][1]

Related

HTML - Image over another image which triggers a popup window

I had a quick search for this problem and couldn't find anything that satisfied both parts so I hope this is ok to ask:
I am creating an interactive map which has an aerial image of a location as a background, with small icons overlayed over the top. These icons, when clicked should open a popup window with images or videos that have been taken in those locations, much like a google map.
I have found code to allow me to layer images over each other here:
Html Image over image
And I have found code for a popup here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
And I can get both of these elements to work separately on my webpage, however I'm stuck as to how to combine them so that the image I have overlayed can be clicked on to trigger a popup.
It's been a while since I have coded in HTML and I can usually handle these kind of challenges but I'm finding myself a bit out of my element here.
Thanks!

modal window to open when icon is clicked

I have a couple of form definitions in my main HTML file.
I would like to display these forms in a modal window, when the user performs certain action, such as click on an icon.
I have followed an article on how to do it for links (hrefs). But now my requirement is to get the same working for clicking on an icon.
Thank you,
Harriet
The answer is to write a java function, that will explicitly set the location of the window to where you want the url to point - example:
function openPreferences() {
window.location = '#openPreferences';
}
I think the most simple solution would be to create a LinkBlock Element and set the Background to the Icon's Image, which will allow you to turn it into a Link, thus further allowing you to open your Modal Window with it.. Simply create your Modal as Display None, and upon clicking the LinkBlock (with your Icon as the Background), make it change the Modal property to Display Block, etc.

Clickable hotspots over HTML image

Is there any way to create clickable hotspots over a JPEG image in order to navigate to a different image/page? I would like to achieve this without having to code everything in manually and InVision has a lot of limitations.
Any suggestions would be appreciated.
If you want to make parts of an image clickable, just use an image map. http://www.w3schools.com/tags/tag_map.asp
to do this without coding it in manually you will need some application to make the code for you. it'd be faster for a 1-time use to just set a size for your image, and then make areas (like div's) that are set in place of where it looks like a button on the image, and set their onclick to be a link to your other page or file.

How do you auto fit an image on a button so that you don't have to stretch the button to show the picture in Access 2010?

I'm building an access database for my music catalog. I've created one main table with a bunch of queries. I want to make a decent looking front end. I have a bunch of buttons with macros assigned to them already. The problem (which I presume is something very small that I'm missing) is that I added a picture to the button it's just a picture of vinyls that would run a query to show my vinyls. The picture only displays a portion rather than the whole picture. I can get it to show the picture by expanding the button size but this is not desired.
Any help is appreciated.
Thank you and Happy Thanksgiving.
The button doesn't resize the image you assign to it.
You first need to resize your picture files to whatever size you deem suitable for the button, then use that scaled down image.
Alternatively, you can use the Image control instead of a button. That control will allow you to resize the image inside it, but it will generally appear slightly blurry, depending on the image and the dimensions you resize it to.
Also, forcing Access to load larger image and then resize them can make your application less responsive if you have a lot of images, since you make it do extra work.
A workaround is to work with an image and a button.
Insert and size the image you need in the form
Add a button, setting its property "transparent" to true
Overlay the transparent buton over the image
Make sure the button is on the topmost layer usuing the "bring forward" in the image menu. We have then the transparent button over the picture
Associate VBA code or macro to transparent button.
For all intent and purposes, user will click on an image, but because there is a transparent button over it, will be in fact clicking on the button

Post action that would display a new HTML based overlay, darkening the background?

I want to create a button with a POST action;
Once the user clicks the button, an overlaying layer would appear at the center of the screen, darkening the rest of it;
that layer should contain some HTML code (such as a tracking snippet) and therefore its code cannot be in the original page.
Any clue how to do this?
Thanks