Need some help here

by **IM.Style** on Fri Dec 21, 2007 1:41 pm

Hey guys, may i know how can i make a image popup mouseover effect like the one in google.co.kr?
try to put your cursor on Gmail
how can i make that?

by **leonard** on Fri Dec 21, 2007 2:49 pm

This is a tricky one. It has something to do with the JavaScripts on gmodules.com.
But I dont know how it works, because the code is not really readable... probably generated dynamically :-)

.

My best guess would be:
The images are somehow extracted from

and the text-bubbles are moved by JavaScript with HTML-layers and the transparency of the layers is modified too.

A simple version of this would probably be to have non-looping animated gif's triggered by onmouseover/onmouseout.

cheers!
- leonard

by **IM.Style** on Fri Dec 21, 2007 5:50 pm

Code: Select all: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>test</title> <style type="text/css">  </style> <script language="javascript"> 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); } function cssAni(osrc,otarget,num,duration){ //////// //IE only //by mozart0, 2007.06.09 //////// var t=null,c=1,d=0,n=0,i=Math.floor((duration||300)/num); var s=otarget.className.replace(/.$/,''),r=/over/; osrc.onmouseover=osrc.onmouseout=function(e){ n=r.test((e||event).type)?1:-1; if(!t) t=setInterval(function(){ if((c==1||c==num)&&((d==n||c+n<1)||!(d=n))) return clearInterval(t),t=null; otarget.className=s+(c+=d); },i); }; } </script> </head> <body> <table> <tr class='icon'> <td class='a f1'></td> <td class='b f1'></td> <td class='c f1'></td> <td class='d f1'></td> <td class='e f1'></td> <td class='f f1'></td> <td class='g f1'></td> </tr> <tr class='capt'> <td><a href='#;'>A</a></td> <td><a href='#;'>B</a></td> <td><a href='#;'>C</a></td> <td><a href='#;'>D</a></td> <td><a href='#;'>E</a></td> <td><a href='#;'>F</a></td> <td><a href='#;'>G</a></td> </tr> </table> </body> </html>

this is the code where i found it on a chinese forum.
It's actually an imitation the one in google korea.
but can anyone please explain the code for me please.
anyways, thanks for your reply leonard.

by **leonard** on Sat Dec 22, 2007 9:28 pm

I must say, this is really neat.
This code is really much more readable than the one I looked upon on the korean site.

I have put the answer to a new topic, so that is has a better meaning:
animated-css-rollover-images-by-google-vt8815.html

cheers
- leonard

Need some help here

Need some help here

Who is online