I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this.
What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines them.
I tried doing that, but did not understood what was happening. Any guidance regarding creating and using CSS sprites would be highly appreciated.
Update: I have gone through the A List Part article but it was not very clear to me. Can someone provide an example of using a CSS sprite? [A short, self-contained example in an answer is preferable for SO than just a link to an example elsewhere. –ed.]
The example you need to study is the following:
#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
Sprite.gif is a big image containing all the smaller images in a grid (doesn't have to be). You then use positioning to display just that part of the sprite that contains your image.
There are online tools that given a set of images returns a big sprite image with the coordinates of where to find the smaller images.
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
(source: css-tricks.com)
All it means when you do spriting is that your small images are tiled on a single image file. You can create this single image file yourself if you have a decent image editing program. Then you can use the css background-position property to specify the piece of the image to use for that sprite.
Look here at Google's sprite that they use for iGoogle. You are just combining the images into one large image. That way you make one request. You then use background positioning and height and width to select which part of the image you want.
This also works really well for images that change on hover, as the hover state is already downloaded and does not have any delay.
Let's say you have button which changes its background image when it's moused-over. Mouseovers need to happen instantly to give good feedback to the user. If you just simply switched the image on the button, a browser might have to go to the server to fetch the image, which would spoil the effect. By using a CSS sprite, you have each image loaded and ready to go on the button instantly.
Also, some browsers "flicker" when you switch images. CSS sprites avoid this flicker issue which can sometimes happen.
Related
I am making a website with some images inside. I have Imagus (similar to HoverZoom) installed so that photos are automatically enlarged on hover. However, I do not want that to happen to my images.
It seems to work for some and not for others and I can't see why? Both pngs, etc.
Is there some kind of CSS or HTML I can put it that will stop the zoom?
EDIT: I've also noticed that the images that HoverZoom/Imagus enlarge, are also the images where the CSS :hover doesn't work?
If you do not want any kind of actions happening when hovering over the images, you can add this, though I am not sure if it's exactly you want :
img {
pointer-effects: none
}
I think I found a way to stop it.
If you just resize and save the image so that it is exactly the same size as you'll show it on the website, then HoverZoom doesn't do anything.
I want to preload all images on my page.
My page has some images used directly as links, i.e. as img tags within an a tag, as well as some images which are in the background-image property of some spans.
What's the best way to preload them all? I notice that a lot of the preload scripts seem to assume that the images will be loaded within image tags. For example, I've implemented this script: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
But it doesn't make a difference on my page where certain spans when hovered over should have a new background. There's still a pause on my page when the user hovers over an element, before the right images background shows up.
Edit
I know about using sprites, my question is asking for a solution apart from sprites.
The following jQuery plugin was featured on http://www.unheap.com a while ago. Could this be of service?
http://nick-jonas.github.io/imageloader/
I do notice that the Github repository is "unavailable due to DMCA takedown", but maybe it could point you in the right direction.
Another solution might be this plugin:
https://github.com/sebarmeli/JAIL
I've came across wunderlist.com site and just fell in love with the zoom-like pop-up they have on the image just beneath the header "Learn more about Wunderlist".
I'd love to implement something like this on my site.
Can somebody tell me how this is done? I tried to reverse-engineer, but with no luck :)
I'm not hoping for the whole ready code, but maybe some guidelines on how to achieve this with CSS/jQuery.
Or maybe you know some jQuery plugin that I could use?
They are using all CSS. Pretty simple really.. I would code a full js fiddle example for you but I don't have the time, so instead I will list out the different elements you need and how they interact.
First the large image is just a div with a background image with set
dimensions.
The circular images themselves are generated from one large image containing all of the circles in one spot, this is called a sprite. The circles are just div's with background images and background positioning to position the correct circle inside the box from the sprite image.
The text boxes themselves are also div's with a standard H2 and P tags for the text.
Everything is absolute positioned in order to achieve the proper layout.
The small circles are div's with :hover states that are absolute positioned over their respective targeted areas.
The animation on :hover is achieved by the use of css3 transition and css3 transforms.
This should get you started.
Comment if you have questions.
Had some time to have some fun: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/
Try looking at two main aspects:
Open up your inspector tool of choice and look at what happens to body.login .feature
...more specifically, look at what happens to its transform: scale and opacity values upon :hover.
Hint: the transition is mainly on them.
Still in your inspector, change the scale to (1) and the opacity to 1. How it smoothly gets from one state to the other is dictated by the transition property.
This isn't meant to tell you exactly how to achieve it, but to get you on your way :)
It's not that hard actually. The Wunderlist team has even made it easier. They have a large sprite image with the zoomed images cropped and ready with rounded corners, borders and shadows. You can see it here: https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png
What you do is on mouseover you show a half transparent black background (can be position: fixed with full width and height). Then you create a element with the sprite as the background image (even better, have a class ready in your css and append it to your newly created element). Set position to the position of the hovered element.
When added to the dom animate the transform scale of the element (starting with something like scale(.24) as they do).
Well since you tried reverse engineering. I'll try and guide you along that path.
There is only one div with id overlay which is changes it's place & content, on hover of any div with class feature. Work your way further from their app js, it's not minified.
The content of the popup in this case is an image moved to different positions.
I'm working on a script that fades in and out both an image and a div I have set behind the image when you hover over the image. I'm having two problems:
The fades on the image and div don't seem to move at the same speed even though I have them set to.
I can't figure out how to get the div's to only show for the image you hover over. If I could type ("this" div.info) as an object, it would work fine. Is there a way to do that?
I can't get $(".info",this), $(this).find(".info"), or $(".info", $(this).closest("li")) to work.
Result: I have found the solution. I was able to get it to work by using lthibodeaux's suggestion and using $(".info", $(this).closest("li")) as the object and making all the functions .fadeTo go here for the result:
http://jsfiddle.net/Z5p4K/7/
Edit:
I found out the image and the div animations really were moving at the same speed, just the image only had it's z-index set on hover, so if you took your mouse off the image while the animation was running, it would appear to move at a different speed than the div when really the image was behind the div, it only appeared to be moving at different speeds because when the div became invisible you could see the image behind it but when it became opaque, the image was gone (making you think the image became invisible when really the div was in front of the image). This was easily fixed by moving the the z-index property from ul.columns li:hover img to ul.columns li img.
The div only had a border around it while you hovered over it. This was easily fixed by changing the border properties from ul.columns li:hover .info to ul.columns li .info
Check out the final version here: http://jsfiddle.net/tV9Bw/
This is the final version because I can no longer find any problems with any of the code; everything is optimized, there are no glitches, and it looks great.
Thanks to everyone who answered and to Yi Jiang for editing this post with better formatting. I'm new to this site so I wasn't sure how to properly format my question.
and a Huge thanks to artyom.stv for fixing the last glitch in the script that I didn't know how to fix.
You've got the general idea. One thing you should know about a selector is that you are able to define a second argument as the scope of the selector, i.e.
$("selectorString", scopeObject)
In your case, make the second argument $(this).closest("li"). It will find the list item containing your image and select .info descendants of that container:
$(".info", $(this).closest("li")).fadeIn(1000);
Change $(".info") to $(this).find(".info") and all will be sweet.
Yes you can use something like $(this).find(".info") as mentioned by Bundy
but as The jQuery constructor accepts a 2nd parameter which can be used to override the context of the selection.
You can also do something like this:
$(".info",this)
I am currently looking for a JavaScript (jQuery) SlideShow Script which allows me to simply have the images fade from one to another, and then keep repeating the process. Nothing too serious, but there is one thing I need specifically for the script. I use .PNG images with Transparency in them, and I have noticed when I use other scripts, they tend to stack upon each other, which shows quite the collboration.
Thank you very much SO,
I appreciate the help!
Aaron
Use the jQuery Cycle Lite plugin, maybe with sync disabled.
Also, force images inside the #slideshow element to be hidden with opacity:0 which will be overridden by inline CSS the plugin sets. However, that said it looks like the plugin sets the opacity to 0 by default for the all images except the current.
CSS:
#slideshow img { opacity:0 }
JS:
$('#slideshow').cycle({ sync:0 });
I wanted to post a link to the simplest slideshow in case others are searching for an easy way to rotate through a list of images in a div and don't need any other functionality using only jQuery...
http://jsfiddle.net/DaveAlger/eNxuJ/1/
enjoy!