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.
Related
Hello I have been looking for some tutorial on CSS sprites for Magento. Found a couple of plugins like GTspeed, Webo but so far nothing achieved.
Can you help?
Knocking off CSS Sprites
Imagine you have six images being used by your main webpage design and the browser has to download them individually. If they were combined into just one image, you could reduce the page speed dramatically. This reduces the round trips required to display your page, making your site faster.
Instead of downloading six images, your webpage would now only have to download one.
This is the beauty of CSS sprites. One resource, but several uses.
Most webpages use several small images in their design. Background images, corner images, icons, menu items, etc. These tiny images really add up when you look at it from the standpoint of page speed.
Each and every image must be downloaded, which means the web browser has to ask the server for it, the server has to send it, and then the browser has to display it. If this were only happening with one or two images, it would be fine, but as more and more images are being loaded, the worse it is for your page speed.
The solution for this scenario is called image sprites, which combine several small images into one image so that the web page can display significantly faster.
How to combine images into CSS sprites
There are two main steps to take when creating CSS sprites. First you must make the image and second you must position the image.
Combining images
We will use a simple example here. Let's say we have two images we want to display on a webpage for style purposes and wish to combine them into one. We must know the size of the images in order to create the sprite. We will use an example where both images are the same size (50 pixels by 50 pixels).
To combine these images we would create an image that was 100 pixels by 50 pixels. We must call this image something, let's call it "sprite.png". Now that we have a combined image, we can use what we know about the image to display it correctly on our web page.
The combined image has a width of 50 pixels and a height of 100 pixels. As such we could say that the first image (the megaphone) resides in the top 50 pixels of the new image, and that the second image (smiley face) resides in the bottom 50 pixels of the image. We can use this knowledge to position our images correctly on our page. In essence, we will display the top half of the image when we want the megaphone and the bottom half of the image when we want the smiley face. This is how we go about doing that...
Positioning the images on the page
For this example will we use the images as background images in divs. This means that we will create empty div tags in our HTML to display images. if we wanted the megaphone image to show up somewhere on our page we could create a CSS div class of "megaphone"...
.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}
The above CSS code is saying the width and height of the megaphone image (50px by 50px) it is also calling the image "sprite.png" which is our combined image. Finally it is saying the "0 0px" part, which is how the sprite works. By telling the image to start at "0 0px" it is saying that the image should be displayed from 0 pixels X and 0 pixels Y. Dont let this scare you or bring up bad algebra homework nightmares. It is really saying "start the image at the top" and "start the image at the left".
Since we defined the width and height of the image in the CSS, the image will only display 50 pixels down the image (where the megaphone is) and will stop, thereby not displaying the smiley face at all. Now let's do the smiley face and see how that changes our code. We will create a CSS class called "smile"...
.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}
Note that we are still stating the same width and height, we are still calling the same image, but what we have changed is the "0 -50px" part. This is because we are now telling the image to start somewhere else. specifically, we are stating that the image should start 50 pixels down (-50px). This is because the smiley face image does not start until the bottom half of the combined image, 50 pixels down from the top.
Now that the CSS is done we can just call a div in our HTML wherever we want the images to show up. Where we want a megaphone we just enter an empty div called "megaphone"
When we want the smiley face we enter a div called "smile"
That is the basics of combining images into CSS sprites, but there are many ways to do it and it is worth exploring what is best for your pages. The above tutorial was just to generally display how sprites work and is by no means an in depth discussion of them.
I'm trying to display a semitransparent grid of captioned images physically underneath a "lightbox"/overlay with my actual content in it. The font size in the document is generally set using vw units, so the height of the overlay changes depending on the screen resolution.
I want to vertically center whichever happens to be smaller - the background image grid, or my overlay. If the text in the overlay is bigger (font-size-wise), I want the grid to vertically center relative to the overlay, but if the grid is bigger I want the overlay to vertically center relative to the grid.
Initially I tried using position: absolute on the overlay which of course failed epically when I discovered the text in said overlay would overlap the content below the grid if its font-size got too big. I'm currently using Faux Absolute Positioning (demo) which has resolved the overlap problem (the content is pushed down by whichever is bigger, my grid or the my lightbox, but I simply haven't been able to combine this neat trick with any of the float-vertical-centering demos/examples I've found on SO and elsewhere.
The grid is currently a table (which took me quite a while to figure out!), but I could switch to some other method (a very long series of floats, for example) if absolutely necessary. (The grid is very arguably tabular data, in my opinion.)
This is for a non-public document I'm sending somebody which I'm authoring using HTML5/CSS3 for rich layout/styling/formatting, so my rules of "strict semantics" are slightly (okay, quite) relaxed in this situation. (LaTeX->PDF would be impossible - constantly restarting xpdf to reload my PDF would progressively drive me so far up the wall I'd drill a hole in the ceiling with my head - and LibreOffice would probably choke on the ~150+ images I'm dealing with. And besides, the document is full of progressively accrued CSS3 awesomeness I would have to leave behind if I switched to PDF/ODT...)
I'm trying to make a thumbnail which on hover will move it's image (that's longer than the wrapper) all the way to the left using only CSS and using the img element and not a div with background-image.
The problem I have is that I don't know how could I find how much to move it given the fact that the images have different widths.
I did a demo where the left image moves correctly because I calculated how much it needs to be moved and the right image with the same CSS moving incorrectly.
It's not clear why you're restricting yourself to manipulating the img element alone and not exploring more usual background-image sprite-like hover event manipulations.
Take a look at this Codrops article and their demo's here (note there are 5 demo's in the menu).
The techniques offered don't produce the exact end result you're after, but they do include the structure for the type of events and manipulations you'd need to use.
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
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