how does this site do the hover effects?

Question

hi there. Please look at http://shaiya.aeriagames.com/ and tell me how they do their hover effects on the logo as it is not javascript and works in all browsers

Answer 1

It does use Javascript. If you use Firebug and look at the image you can clearly see that another image is been overlaid above the original image with the CSS opacity property. Both images are attached as background images to two different elements. When you hover over the parent, the li with the id gameLogo, its child an anchor's opacity starts to increase from 0 to 1, thus causing the glow to 'appear', as both images are perfectly aligned.

You can see the overlaid image here: http://shaiya.aeriagames.com/themes/shaiya/images/site/page-header-light-hovers.jpg

Answer 2

It's javascript - using the mootools library. View the source of the page, and you will see near the bottom, theres this bit of code

<script type="text/javascript" src="http://s.aeriagames.com/modules/js/mootools-1.2.4-core.js"&gt;&lt;/script&gt;...&lt;script type="text/javascript" src="http://s.aeriagames.com/themes/shaiya/js/page.js"&gt;&lt;/script&gt; 

http://s.aeriagames.com/themes/shaiya/js/page.js is the script that implements the functionality, where http://s.aeriagames.com/modules/js/mootools-1.2.4-core.js is the mootools lirary.