I have a two sprite images. One image contains the body of a rounded button as well as other states (hover, clicked, ect) while the other contains the left most curve of the image. I am using these so I don't have to have multiple button images on my webpage, these buttons are can be scaled to any size. <div id="search_tips"><span...
I have 4 banner images, and I want to cycle through them using a basic fade animation in an infinite loop. I found this jQuery plugin: http://jquery.malsup.com/cycle/ and have tried to do it this way: HTML: <div id="banner"> <div id="home-banner-1"></div> <div id="home-banner-2"></div> <div id="home-banner-3"></div> <di...
Hi i have been using this http://spritegen.website-performance.org for css sprites generator. But it not worth great. I have seen sites like yahoo,bing.google they used css sprite very great and upto the high level. where to get the css sprite generator like that in online. Moreover the image is totally compressed and minimized. I would ...
I have an ASHX handler that I am using to display images that are stored in a database. I display the images as thumbnails and then full size if the user mouses over them. How can I combine the images at runtime to produce CSS sprites for use in this situation? If it can be done does anyone have suggestions on where to start? UPATE...
Hi, I'm using this code to display sprite driven icons (if graphics are available only the icons should show up, for other devices the text is supposed to help): Markup: <span class="icon ok">OK</span> CSS: .icon { display:block; width:16px; height:16px; padding-left:40px; overflow:hidden; background:transparent url(sprite.png) 0px ...
Hi, I was wondering if there is any way to use just one image for repeating and non-repeating images using css sprites. So in this case I would like to combine all the images on a page no matter what width and height and if they will be used as repeating or non-repeating images. I know the standard is to create 1 image using all the non...
Hello all, Please refer to http://code.google.com/apis/recaptcha/intro.html When the user zooms the page, there is no horizontal bar introduced on the bottom. I would like to know how to design a two-column page with this properties. Thank you ...
Is there any tool which can automatically convert shorthand css to longhand? I need this cause I want to use SmartSprites which does not work well with shorthand. And prefably also a tool which does the reverse, so after the sprite computation i can minify the css as much as possible... Also any other solutions for automatic spiriting ...
Hey, I was wondering if I could make the header on my page (http://marioplanet.com/images/logo/logo.png) interactive by having a little mini-game of sorts occur upon clicking on a part of the image. It would have Mario, only Mario, on top of the text, making the rest of the characters vanish upon the start of the "mini-game". Then, the...
Hello, I am trying to find the simplest way to replicate a 12fps animation using CSS sprites and jQuery. I was thinking using the setInterval() so every 83.33 millisecond, the next sprite will be loaded. My problem, is that I don't know how to do that... I was thinking, because my sprite names are incremental like: mariohammerswing1....
In http://www.scherer.nl/nieuw (the /nieuw part will be removed when the site is ready) the drop-down submenu's on the left should shift up their background image when hovered over, so the hovered item becomes red i.s.o. orange. With jQuery I'm using toggleClass to add a class 'hover' to the hovered menu-item. The CSS makes the backgroun...
I am trying to be more Zen in my CSS, and also to reduce the load on my server. I have heard and sort of seen a technique where I can use a background image and an offset value to allow me to download all my little icon images in one single image, and use CSS to display the right image. However, I am a little confused how to do this corr...
Since I have a panning ` element do to a jQuery spritely plugin method which I'm calling to pan some Super Mario Bros backgrounds, it appears to increase the page length quite a bit. If you visit http://www.marioplanet.com you will notice that there 3 different panning backgrounds. With only 2, there isn't enough to fill the entire hei...
Hey there everyone. I usually have no problems with making CSS sprites, but this one has got me stumped...and I'm not sure how to solve it. Basically I have a navigation sprite that looks like this: http://cl.ly/aa4a5e78eda252e8f4d7 I'm using the standard convention of laying them out in <li> tags such like: <li class="welcome"><a h...
I'm trying to optimize my site for speed. I used images for the rounded corners before but now I've changed them with border-radius and -moz-border-radius css rules. Which way is the best for speed? I used to think that css rules are faster but I've seen a lot of sites talking about css sprites and I'm a bit confused now. Oh and I don't ...
I want a flag of country to appear in the text field. It works fine, when all icons are kept separately. For example: #search input[type="text"] { background: #FFFFFF url(GB.png) no-repeat right center; } <div id="search"> To: <input name="to" type="text" /> </div> However, having more than 60 flags makes a lot of possible H...
I have a CSS-sprite-based Apple-themed navigation bar, which you can view here: http://www.marioplanet.com/index.asp Now, for some reason, I cannot tell why, there appears to be a problem in the hover, pressed and active states of the "Home" button. For some reason, it just appears static. This file, http://www.marioplanet.com/css/na...
I am trying to use AlphaImageLoader for a PNG image but my image is a sprite image. I am not getting the output of my sprite image when I use AlphaImageLoader in CSS. How can I use AlphaImageLoader for sprites? Can I use it for sprites? ...
I am trying to use sprite images I have a very basic link <td align="center"> <img alt="my alt text" src="/Assets/t/myImage.gif" /> </td> I am struggling for a while, tying to change this and making it use an image in my sprite instead of the src ...
Can anyone comment on the decision to use sprites for images or not? I see the following benefits/trade-offs (some of which can be mitigated): Sprites over individual images Pros: Fewer images to manage Easier to implement themed images Image swaps (JS/CSS) happen faster (because they do not require additional image loads) Faster i...