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?
Related
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
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've created an image map, and then put a youtube video with a
<div style="position:relative;top:-400;">
because I want it to display over the image. Then I have another Image I want to display below that, but it displays below where the video would have been, and if I use top:-400 to move the image up, it works, but some invisible field is blocking me from clicking parts of the image map.
The solution was to use 'margin-top' instead of 'position:relative;top:-400px;'
This does keep the space of the original position.
I have two css buttons on my homepage that are have an absolute position on them relative to an image. The problem I'm having is that they load a lot faster than the image does, so for a split second upon loading the page, the buttons are floating out in la la land until the image loads and they fall in to line.
Is there a simple fix to this or do I have to totally redo the positioning?
Easiest is to hide the buttons (display:none) initially, and use javascript/jquery to show onload.
jQuery example is to do:
$('#ImgReferenced').on('load',function(){
$('input[button]').show();
});
But the same can be done in javascript with an onload eventhandler.
Are you using the width and height attributes <img ... width="xxx" height="yyy">on the image element? That's how the browser can "reserve space" for the image and know its dimensions before the image is loaded. It needs this so it can draw something relative to the image.
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.