I have a div inside a webpage, below that div there are some images that you can select.
When you select an image you can place it inside the div by clicking on the div.This is working fine.
When someone puts some images inside the div and is done with it, I would like it to be able to save the content of the div, so to save all the images on the position as they were placed, and to merge it into to one image.
Is this possible if so, how could I do something like that?
At the moment I place the images with jQuery inside the div.
Make one image of it is more complicated, you might wanna check http://html2canvas.hertzen.com/ for that. You can also use a canvas.
You can create a canvas, then draw images onto it, then convert to an image and save. This might help. It will only work in browsers which have canvas support.
Related
Using css3/html5 only, I am trying to have separate and distinct background images line up side by side, not overlaying each other.
In essence I would love to get multiple separate and distinct background images to behave exactly how the tiling of a single background image behaves.
I also would like to achieve this without setting any fixed or specific positions, simply each background image dropped in respects the size of the background image next to it, butts up against it, and so on and so on.
So background images tiling across an element/container as normal, except each individual background image in the tiling can be unique.
Any ideas?
Here is how I understand your question:
I have a few image files
I want to display them side by side
I have one div and I do not want to (or can not) change the HTML I have
" Using CSS3, can
I display those images side by side as backgrounds of my div?"
If this is your question, the answer is no, not as of now. Sorry.
According to this standard specification,
http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties4
there is no position value to place background images "after previous" or "floating".
More info on multiple backgrounds and background sizing:
http://www.css3.info/preview/multiple-backgrounds/
https://css-tricks.com/almanac/properties/b/background-size/
You will probably want to look into positionning your gallery, a div containing your img elements as absolute. If you place it before your div, it will appear behind the div and make one img element per image file.
<div style="position:absolute;">
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
<div>the div to be backgrounded</div>
foreach img that you want to use in your "background", create a div, and then use the css background-image property to display the image within the borders of the div. in other words, don't put the img tags in the html, link to their source in your css.
without positioning, you will be limited to adding any "foreground" content to the divs with the background images
based on the way you worded your question, this might end up being very time consuming and frustrating for you. maybe consider a different technique with code you can understand? if you start with the basics and learn them thoroughly, the creative techniques will reveal themselves
I am using AngularJS to create a new table (with ngRepeat) when I receive new data via Ajax.
Part of each table row is an image.
Under certain conditions I want to display an overlay image (which is mostly transparent except for an icon indicating the condition) right on top of the main image.
I am currently using a js solution by assigning a handler to the load event of the image (obtaining the position of main image and setting overlay image to the same position).
That works but I have to use $apply to make sure all images are constructed in the DOM before I can attach the load event.
I was wondering if there is a pure html/css solution to the problem?
Simply make sure the overlay image is always in the exact same position as the main image.
The I can simply bind ngShow to the condition and avoid all js tricks.
ETA:
here's the relevant code snippet from the table (within the ngRepeat):
<div class="movie-cover">
<img class="movie-image" ng-src="{{movie.ImageUrl}}" onerror="this.src='#Url.Content("~/Content/images/titleimages/NoImage.jpg")'" />
<img class="selected-image dontshow" src="#Url.Content("~/Content/images/Selected.png")" data-hh-id="{{movie.ID}}" />
<a class="movie-link" href="{{movie.ImdbUrl}}" target="_blank">IMDb</a>
</div>
I want the image with the class 'selected-image' on top of the other one.
give this a try:
.movie-cover {position:relative;width:400px;height:400px;}
.movie-cover img {position:absolute;top:0;left:0;}
Well, one idea is that you can load first image as a cover background to a div and load second image inside that div with height:100%.
Edit
I realise this would also require js as you are loading it via ajax.
Second idea is that you can place both images inside same div with height 100% with absolute position and top, left set to 0 relative to parent div?
Here's one for you that has me stumped:
I'm using background:url to put a small image in the bottom right corner of my container within css which works nicely. However, when users are on the account creation page, the section that has the "create account" and "cancel" buttons is overlapping with my image, obscuring half of it. Here's what it looks like:
I have looked into using z-index to fix this issue to no avail (since the image is a part of the container, if I decrease the z-index for the obscuring div, the whole section with the buttons is put behind the container which makes them impossible to see). I also don't want to go into each page individually and put the image into the html, especially since I'm using Joomla and the template html structure is pretty confusing for me. (Using Joomla 3.0.3 with the default Protostar template)
Am I missing something obvious? I feel like I am...
Thanks in advance!
You're funny :) Using a background image but wanting to put it in the foreground.
Just use an image tag and position it absolute in the bottom right of the container (don't forget to give the container position: relative)
I want to use HTML and display one large image.
On this large image I then wish to display multiple smaller images, all on different places and sizes.
I would prefer doing this using HTML only.
But, if this is not possible, Javascript or something like that is also an option... :-)
If anybody has any idea using PHP, that would also be great.
I have search the web and StackOverflow, and tried MANY possible solutions, but none of them allowed me to display one big image, and then display multiple other images on top of this big image.
Any help would be greatly appreciated.
Kind regards,
Michael
you can use a container div which will contain all the smaller images. You can set background of that particular div.
your html as
<div id="container">
</div>
and css as follows:
div#container{
background-image: url("image.jpg");
background-repeat:no-repeat;
height:100%;
}
Two alternatives:
defining the big image in as background using CSS, then you can put onto it whatever html markup you want to. Such backgorund can also be declared for elements like divs, not only for the whole page.
use absolut positioning inside your style definition. That way you can add big and small images to your markup and then position them on top of each other.
No javascript required for this and php has nothing to do with this.
You can position them as I have done in this JSFiddle: http://jsfiddle.net/xxUpk/
The top:-NNNpx is crude, you could use float and many other ways of positioning them. Also look into z-index to layer them.
you cannot overlay an image over another image in pure HTML only, but what you CAN do is re-locate a image's position onto another tag and just move it accordingly with css.
I have this code: jsfiddle
I want it to look like this, but I do not want the surrounding div. I want to have the form overlay ontop of an image tag, but to look like the second link.
So how can i make the login box over the image without having the image as a background
In order to do what you want you must position the login box absolutely and set a z-index so that it will display properly. Here is a link: link
Personally I prefer to use a container with a background for this sort of thing, as positioning some thing absolutely can be complicated in the rest of the layout. Either way, this link should do what you want.