What I'd like to do is something like:
<div> (parent, sized to img)
<div> (movable within parent, z-level 1+)
<img /> (z-level 0)
</div>
</div>
With these constraints:
The html img needs to be able to have its src (and size) changed from Javascript.
The top z-level div should be able to have its size changed from Javascript, also it follows the mouse (by javascript). I'd like to use relative positioning, so the coords match the img dimensions. Maybe absolute would use the parent dimensions? (same as img)
The outer div is just there so I can read mouse click positions from it. It should be able to have its sized changed to follow changes in the img src.
I have a use involving high and low res images of the same material. I'd like to show the low res image with a movable zoom box (transparent div with border), then when the user clicks it resizes the img object and outer div and loads the high res image, then scrolls the window to center the corresponding (scaled) spot on the high res image. There's no actual zoom, it just works that way by scrolling the high res.
I've got everything working except the zoom box: it loads the high res and scrolls ok on a click. To be able to set the z-index on the movable box higher than the img but still have the movable box layer use the same coordinates as the fixed div and the img is the problem. The box needs to float over the img. I'm not using the image as a background partly because I need to stretch it in y.
The site owner thought it might help to prevent theft of his images if he squashed them to a distorted aspect ratio. I calculate a height and force the img to use that, which makes them look better. Different images have different aspect ratios, which is why I want Javascript control over the size of the zoom box.
Using the :before and :after pseudo selectors new in CSS3, you can easily have 2 extra layers on the same object.
This is good for applying layers on the same object, as it means that you won't have to be messing about with having to float and adjust the margin of the original element and other such hassles.
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
I guess you would like to take a look at several ways to protect Images, as per your last demands. here
Related
For a to-be-developed page I am trying to combine jQuery/jQueryUI functions and plugins ("draggable" and "maphighlight") with image maps and CSS-animated scaling triggered by adding and removing a class via jQuery on click:
It's too much to put in a snippet, so I created a codepen:
http://codepen.io/anon/pen/xqxgrz
I have a draggable area (#container5) inside another container (#container3) which hides any overflow (drag it to see the effect).
Inside #container3 there is one more container (#container4) which contains four images. Those are positioned absolutely, the three smaller ones are on top of one that fills the whole container when loaded. All this nesting of containers is necessary to get the ability for dragging, using an imagemap and scaling.
Now the essential thing: All images are more or less covered by map areas. Those become visible when you hover around (not over) the small images. When clicking the area around the image labeled "SHRINK", all elements downwards from #container4 (i.e. the container itself, 4 images and the map areas) will be scaled down to 60% of their initial size, caused by a CSS class being added by jQuery in combination with CSS animation. When clicking the area around "RESET", everything is reset to original size (but not to original position if it has been dragged before).
My problem is that I can't get the map areas to cover the small images when hovered. I tried this CSS (and other variations of that), but it has no effect, no matter which z-index I use:
#container4 area {
position: absolute;
z-index:10000;
}
But the map areas remain behind the (small) images - clicking the image itself has no effect although it's supposed to be covered by the clickable image map.
My intention later on is to have real images and polygonal map areas that are smaller than the images and only cover parts of those images (the shape of the things they display), so assigning the jQuery addClass function to the images themselves is not an option.
What can i do to get those areas on top of the images when hovered?
So, answering my own question after googling for days and trying everything I could think of:
The only way I could make it work was to put each image in its own div container and create a seperate image map for each image. That requires a lot more code, but it works.
This is kind of a specific question.
<div id="d_btn">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
</div>
Here's a jsfiddle: https://jsfiddle.net/fcjwjutb/
you'll notice it creates an image button which is really just a div with a background image, and that thanks to a base64 data of a single transparent pixel the aspect ratio is always 1:1 (a different pixel w/h would give different aspect ratio). it changes the image when you hover.
the problem is: if I resize the window vertically, the aspect ratio breaks.
however, automagically, if you refresh the page - the aspect ratio returns to normal.
what I want is the aspect ratio to stay correct while you resize the window, without having to refresh. what would I need to change in this specific example to accomplish this? looking for a CSS answer, not JS.
the "trick" to maintain aspect ratio here is the fact that if you set only height or only width, the other parameter should automatically maintain scale if there's an image involved, that's what the 1pixel is for.
I don't get why this breaks upon resize though, when initially upon page load it works correctly.
The issue seems to revolve around the fact that when you resize, the div's background image stretches instead of... well... not stretching. but the div itself also gets resized, while the img child inside of it doesn't, and maintains its aspect ratio as intended.
after seeing some incorrect answers let me make something clear:
the div and the image size have to match. hover event should only get triggered when you hover over the image itself, otherwise this doesn't feel like a "button". basically you're not allowed to have a div larger than the image, or else you create blank area that triggers a hover event.
the answer I'm looking for is one that is able to make the div itself resize in a way that keeps the aspect ratio while you resize the window, while having the background image always cover the entire div.
You can use background-size property to ensure background images maintain their aspect ratio within a given container.
It is also bad practice to use IDs for elements like this one.
I have solved the problem for you...
https://jsfiddle.net/x18h41yr/
You can also use flex-box to now centre page elements vertically & horizontally. Read more about flexbox here
Is the background-position css property used to indicated where in the element should the image be displayed (like this) or what part of the image should be displayed (like when using sprites) ?
In my instance i have a div of let's say 300px width, i want the image to be shown in the right part of that element so normally i just added a center right to my background declaration, though now my image is a spirit so how can i control the coordinate of the image that i want to display ?
Seems to me that this background property act in 2 different way.. Am i missing something ?
If the place where you want to put element of the sprite is larger then the element then you need to put white space (trasnparent) around it. And you can't use keywords like center, you need to use pixels, because you will center whole sprite and not your element.
Using sprites is like using window where background is larger then background image so you need to position the window (actually you position the background).
If your container is larger than the background sprite image part you want to display then the other part of image will also be displayed. Better use Sprite cow to generate sprite it will give you the css for different parts of sprite image
http://www.spritecow.com/
Good day, I have a DIV of fixed width and height on my HTML page. In normal state it should show image A on the background and in hover state it should show image B. I know how to do it using CSS and two image files A and B. Somewhere I saw those two images (A and B) put into a single image file and then they somehow wrote CSS so that in normal state the DIV showed upper half of the image on the background and in a hover state it showed the bottom half of the image. Could you please advise CSS code to achieve this? The DIV has no position set but it is a child of a DIV with relative position. Thank you in advance.
Vojtech
This is called CSS spriting and is an awesome technique that everyone should use.
See this answer for a good overview. What it comes down to is having a DOM element with a defined height and width and using a background image that is larger than that area. Then you can selectively show only portions of that background image using background-position
there is probably a very simple answer to this very simple question, but i just can't to seem to find it, and its driving me crazy. what I have is a div element at the bottom right corner of the window with an image in it approx. 260 x 300 px.
my css code is this:
#doomdiamond{
position:absolute;
right:50px;
bottom:50px;
}
and html is this
<div id="doomdiamond">
<img src="doomdiamond.gif" />
</div>
all pretty simple. the element shows up with the image inside of it at the proper distance from the browser window. but what i really want it to do is scale/resize itself proportionally when the browser is resized, instead of staying the same size.
this is possible right?
I have created an example for you showing an image that sits in the lower-right corner, with the size based on the width of the window.
It works by setting the image width to a percent value. Percentages are based on the containing parent; because I did not cause the #doomdiamond div to be absolutely placed, it is not the positioned parent of the object.
Setting only the width or height of an img element causes the image to be proportionately scaled.
P.S. This uses no JavaScript :p
Yes it is possible, you will need some JavaScript to do it though. Are you using any JS frameworks ?
UPDATE
Looks like resize div and its content on browser window resize is what you're looking for