WebsiteAdministrator.com.au

Let's get to it. We are going to view an image gallery of masks created from live workshops with the award winning poet and author Kate Hovey. Those who love ancient mythology should definitely explore this site in more detail.

This first link demonstrates using two sizes of .css image sprites.

This second link will only use one standard size for our .css sprites.

Explore the HTML code and you will note that each .css sprite has it's own class. Explore the linked CSS code and you will note that the sprite is first generically defined (including it's size) and then further defined to point to the exact location in the master sprite image. This technique has it's roots from the days when platform games were all the rage (Popular).

Image Sprite candidates

This css code is also especially useful when you locate any image sprite candidates with in your html code. (Perhaps by using PageSpeed). Note that the image sprite code for your candidates can be pictures of any size. Perfect the technique by simply following the rules above showing how you add a separate master class for each sprite of a differing image size.

Roll-over Image Sprites (An Image Replacement Method using .CSS)

Roll-over Image Sprites are of course an image replacement method using .css and html code. They are popular in menu presentations. You have seen this approach in the past with onmouseover methods. When the mouse moves over the image, a new image is swapped with the image below it. The method is no longer in popular use because it tends to be slow and buggy.

But you can get away with it by using the image sprite method. Like we have in our button menu above. If you scroll to the top of the page, you will note the big square images change when you roll your mouse over them. This then, is a live example of how you can use image sprites in .css to affect a smooth transition of the roll-over method. You can't get at the actual image easily, here it is:

Next, pull apart my .css and locate the .WebsiteAdminNavLink_01, 02, 03 etc. classes at line 57 of the .css code. The first very long line of code and the ones immediately below define the x / y co-ordinates and only displays the gold colored part of the image. I have other anchors on the page so I package my sprite images with anchor effects into one div. In this case the .css div has the id #title-content. All we need to do now is to ensure we place a pointer to the a:hover and/or a:focus rule for the Div that has this ID only and the image will change swiftly and seemingly magically because our image is cached. The a:hover rule in .css points to the orange portion of the sprite while the a:focus points to the green portion of the sprite. Focus is where the mouse button is depressed but not released. This is the portion of my .css code which changes the image (Note: Color:#value is for the font color):

#title-content a:hover{color:#AA0000;background-position:-140px -0px;}  
#title-content a:focus{color:#EE0000;background-position:-280px -0px;}  

Your rollover sprite image can either be horizontal or vertical. Ours is horizontal (of course) which is why the y=0 is constant. If we elected to make the sprite vertical, we'd have used x=0. There it is. It is just that simple.

Centering .CSS Sprites

Back to our gallery Sprites. Centering a row of .css sprites can be fun [sic]. Our linked gallery example floats a string of .css spaced images within a fixed width. It is easier place the images into a centered div or table container and use a dummy see-through image to position the starting location of your first sprite (if needed). Here's another example of my ExhibitBox for XIII fans. Of course positioning a single CSS sprite is much easier.

Transparency - Opacity Hover technique for active .CSS Sprites

You might notice that first two exhibit box examples have image sprites which seem to come to life when your mouse hovers over an active sprite link. This is a more recent .css technique and makes use of the .css rule on opacity. Of course Microsoft want to do it their way and so you need to specify this opacity rule twice if you want it to work in most browsers. One is for the mozilla type browsers and another for the i.e. set of browsers. So again, you will note in the linked .css sheet (view source when viewing the example pages) that we declare another .css class to implement this special rule and create the opacity effect. But only if you want it. Pretty simple really.

Different sized .CSS Sprites

Each time you add a different size sprite, you need to add another distinct and different generic class to specify that size. If you would like me to further explain this technique or my iframes gallery code further, then send an email and ask for me to add it to my to do list.