How can I use image sprites in single image using vb.net just like the css feature in web app.
What exactly do you want to do ? You can easily put an image sprite and use that sprite using CSS at the required place.
Related
I know there are tools to generate a sprite image and CSS from a collection of images.
But, is there a way to generate the CSS against an existing sprite image.
I was given a sprite image as-is with no CSS and am looking for a way to auto-generate the CSS instead of having to hand code it.
Like:
http://www.spritecow.com/ ?
http://www.spritebox.net/ ?
A simple Google search shows a lot of sites that will help you with this.
Look at the Google homepage being displayed right at this moment. A screenshot is provided below.
Instead of using this as a single image Google used css sprite. The sprite image
is provided below (dimension changed):
Question is why css sprite was used instead of a single image ? If a single image was used then wouldn't the number of HTTP requests be same as in this css sprite case ?
A single image would not allow for (different) hover effects in different areas.
Or you would have to load an image of the same size for each animation. By using a sprite, you just have to load the image once and all animations run with that data.
CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates.
Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.
I could not find the clear difference between IMAGE MAPS and CSS SPRITES. Both are looking like combining the images in the page into one? So we can reduce multiple requests to the server. So what is the real difference?
Image Map:
A single image in a page, with different areas you can click on, which then have different effects (eg launching different links).
There's a description of this here: http://www.javascriptkit.com/howto/imagemap.shtml
CSS Sprites:
Combining the images behind a number of css classes into a single file to improve performance - eg reducing number of requests and often overall download size.
For example you might combine various border elements of a colorbox dialog into a single image, or combine the clicked and unclicked images for a button.
The best description I've found of CSS sprites is this one: http://css-tricks.com/css-sprites/
An image map is one image that you can turn into an image map and place multiple links on top of the image.
A CSS sprite is one image made up of mutiple images that youy use CSS background positioning to display this reducing http requests.
An Image Map is the definition of coordinates that are lying over the image to be able to react to events on this areas.
a css sprite are two or more images joint in one image.
I know it been asked a year ago, just let me try to explain in own my words.
CSS Sprite is like a single file image repository that you can pull out any portion of it via css and place them individually in arbitrary area in your webpage real estate, while image map (to-url) , as it name suggest is a image that has a clickable area that maps to your target url.
Is there a better way to change few images from a single file which was generated for CSS Sprites.
As I have a big image file which contains 50 small images and my css uses Sprites. Now I wants to chage 4 button's colors and size of s pointers. What will be the best possible way?
Use any CSS Sprites Generator like Spritemapper.
BTW, I create ZeroSprites which is an online sprites generator aimed at area minimization using VLSI floorplanning algorithm.
Edit your sprite file in a image software like Photoshop or GIMP.
Add new images on the bottom of the existing sprite file. That way, you can keep the existing positions of your sprites.
If you want to find to the css pointers, use the measuring tools in your image software.
I have one question..
I am using Asp.Net C# With SQL 2005
I have one grid in that and in grid i put one image box and i want to call image from my css.
when i use ImageUrl="~/Images/delete_link_thumb.gif" at image level then image is good but when i call from css through background-image:url(images/edit_link_thumb.gif); then image display is not good
Any suggestion??
Thanks
Path is the CSS is relative to where the CSS is stored in the web site.
as Fabian mentioned, try using background-image:url(/images/edit_link_thumb.gif);
firstly, ur referencing two different images in your question, besides that it depends on where your storing your stylesheet as it is relative to where it is in your project, try adding ../ in front of your images folder reference, like so:
url(../Images/blahblah.gif);
The case is ...
If you use Image url directly it effects the image-box and its the default property of that box and as the css you are applying is not the default so it can also possible that it doesnt take the exactly size or it gives some additional padding or so in your css
so if you are using background property of css then you should supply the position argument also such as center center or whatever fits