need-some-help-here-vt8802.html
, but this code is so neat, I wanted it to be in a more readable topic.
The code only works for IE!
The full page can be viewed here:
http://devppl.chew.ch/googleSprites/
OK, now for the code-explenation:
The animations are extracted from one single picture using the CSS-properties 'background-position-y' and 'background-position-x', which however only work for IE.
This is a very elegant piece of code
, the google-ppl always have been inventive.
To go in the code-details:
Lets start with the HTML/CSS:
- Code: Select all
<style type="text/css">
.icon td {width:50px;height:37px;background-image:url(./svc_sprite_all.gif)}
.a {background-position-y:0px}
.f1 {background-position-x:0px}
</style>
<table>
<tr class='icon'>
<td class='a f1'></td>
<td class='b f1'></td>
We have a CSS-class 'icon' which defines a background-image of width 50px and height 37px.
This turns out to be exactly one sub-picture of the full picture. The background-image is the full picture.
The first 'tr'-tag loads this class. So all of its 'td'-subtags inherit the background-image (of the size of the sub-image).
Now all td-sub-tags display the first sub-image (which is a red-point -> as is seen in firefox).
Now comes the matrix-part:
All the image-td-tags load two additional classes. The first class defines the y-position of the sub-image, the second class displays the x-position of the sub-image. These classes only work in IE, and not in Firefox, so that is why you see multi-colored 'pics' in IE and only red-colored 'pics' in Firefox, because the default is x=0, y=0.
If you manually change these classes in the html-code, you will see that the picture changes, for instance you can try:
- Code: Select all
<td class='b f4'></td>
So we now know that the different images are set by simply changing the CSS-classes.
To change these classes (i.e. dynamically change the images), JavaScript is used.
One way would have been to set the 'onmouseover/onmouseout' directly on the td-tags. But the google-programmers decided to do that a bit more dynamically.
At page-load a function is called:
- Code: Select all
window.onload=function(){
var t=document.getElementsByTagName('table')[0];
var cs=t.rows[1].cells,ct=t.rows[0].cells;
for(var i=0;i<cs.length;i++)
cssAni(cs[i],ct[i],7);
}
This function loops over the indexes (e.g. de facto the td-tags) of the second tr-tag (named cs) of the first table (which is the only table here).
cs[] is the array of the td-tags in the 'icon'-tr-tag.
ct[] is the array of the td-tags in the 'capt'-tr-tag.
The loop calls the function 'cssAni', which assigns the onmouseover and onmouseout listener on the td-tags.
I think this is great
cheers
- leonard
