|
|
Online grocery store offering: middle eastern grocery - eFoodDepot.com
prepaid calling card
call abroad? international calling card at PhoneCardsAvenues.com
hand bag No fake items. All Authentic!
prepaid calling card
call abroad? international calling card at PhoneCardsAvenues.com
hand bag No fake items. All Authentic!
Animated CSS-rollover images by google
This is actually just a reply to IM.Style need-some-help-here-vt8802.html , but this code is so neat, I wanted it to be in a more readable topic. [color=darkred:2oemkw7u][b:2oemkw7u]The code only works for IE![/b:2oemkw7u][/color:2oemkw7u] 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. [b:2oemkw7u]This is a very elegant piece of code
, the google-ppl always have been inventive.[/b:2oemkw7u]
To go in the code-details:
Lets start with the HTML/CSS:
[code:2oemkw7u]<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>[/code:2oemkw7u]
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:2oemkw7u]<td class='b f4'></td>[/code:2oemkw7u]
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:2oemkw7u]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);
}[/code:2oemkw7u]
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