I am creating a website that has a small map of a part of a town.
The map should have markers (icons) that mark the most important attractions and it should have zoom in/out capabilities. It also has to cover the full page (responsive, depending on the resolution).
What i have right now:
I used a div with the .svg image set as background. Icons are absolute positioned small divs that are set to needed places using margins.
Now the problem is that when someone resizes the page or views the page in some other resolution, the markers move and don't show the needed location anymore.
How can I set them fixed to the div, so when the div is resized the icons stay in the needed place on the map? Also how to make the background image zoom in?
Related
I have implemented a functionality where I am displaying background image in div and plotting different elements on the image dynamically using javascript.
Now, need to implement zoom in & zoom out.
While implementing zoom in/zoom out facing problem that both image and elements not getting zoom in/zoom out in proportion.
If dynamic element gets zoom in /zoom out - image getting fixed.
if image getting zoom in / zoom out - element get fixed.
Expected output - both image and elements should get zoom in/zoom out dynamically in proportion
Your help is appreciated.
I have WPBakery installed on my wordpress website, and I have tried to have two images in a single widget in a row divided into 5 columns, the two images being in a single column.
One of the images however is a sort of a custom stylized picture frame for the other image. I managed to partially solve the issue by applying a margin of "-140%" on the top margin. Unfortunately I can't get the image to stretch out to fit the frame, also when changing the viewport to be smaller (mobile sized for example), the frame scales proportionally as it should, while the image it self shrinks.
Can anyone help me out on making the image scale proportionally with the image, and also making sure it stretches to the size of the frame?
Note: The images might not be the same resolution as the frame, but i need the image to be stretched to those dimensions.
Here is how it looks on a 1080p monitor, notice how its not stretched to the frame
When it is shrunk to a mobile viewport
In my professional opinion of over 13 years of web development in a business setting, my answer to you is use ONE image. Have a .PSD project for these. Have your image frame as one layer, and use your normal images in another layer on top. When you want to create one of these images, open up the .PSD project, highlight the image to be replaced, and import the new. You may have to crop the new to be the dimensions of the last one and play with the centering x and y. Then, save your new image at full size. It will scale down because it is ONE image, not one image with a hacktastic image background.
I have a play to build out multiple HTML5 ads at the same time. Currectly using adobe Animate CC.. hate it.
Plan is to hard code it onto a html5 page and use CSS. I will have a page full of divs all at the correct ad size. Then say I use a background image in the css for all backgrounds centered and set to cover.
Is there anyway to have it crop and download the correct image sizes based on the div size??? I want it to download at 100% view and crop based on the div width and height. This way I use a single image, position it with css for all the banner sizes and run some code to give me all of the sizes correctly based on the div.
HELP!
I am trying to use the functionality of Google Slides to create a complicated diagram of a complicated process. Basically, I have tiny rectangles (shapes) within larger rectangles within even larger rectangles, all on top of a huge rectangle that occupies my entire viewport with the maximum zoom out (Ctrl-Alt-Minus pressed many times). Rectangles have some small font text in them and there are also a bunch of connectors going from one rectangle to another.
It's a big mess.
When I want to see the details of a small rectangle, I use the provided Ctrl-Alt-Plus shortcut to zoom in as far as it lets me. However, it's incredibly cumbersome, because it will only zoom in to whatever is in the very center of the screen. So, I need to constantly adjust my view port to place what I want into the center of the screen.
What I want is to write a script (if such functionality is in fact provided - hence the question) where I could click on a specific rectangle and it would immediately zoom to this rectangle, placing it in the middle of my screen, it occupying about 50% of the screen space.
I looked through Google Slides API reference and found absolutely nothing related to zoom. Am I searching incorrectly, or is it simply not there?
I have image map that can I move, but this map will be so big, so I would like to load it dynamically like google maps or maps in browser games.
But i dont know how does it work, can you help me?
I need just word solution not code
Thanks
Edit: i have 1 idea, maybe try to make div with width and heigth about 20000px and while moving the map add there new divs, but if is it this good idea how can i control loading new divs?
Divide your image in tiles. Then add them to your scrolling area as they come into the viewable area, and remove them as they go outside it. This scrolling area could be as simple as a div with a certain size and overflow:scroll;, with a child div much larger.