1
Guest
Guest
From Ego-one...
Using Just CSS:
bye
- Code:
<div style="position:relative;">
<div id="elm" style="height:100px;width:100px;background: url(http://www.ego-one.com/favicon.ico);position:absolute;top:0px;left:0px;opacity:0;"></div><!-- << THIS IS THE EGO-ONE ICON -->
<div id="elm2" style="height:100px;width:100px;background: url(http://www.google.com/favicon.ico);position:absolute;top:0px;left:0px;"></div><!-- << THIS IS THE GOOGLE ICON -->
</div>
<script>$("#elm2").hover(function(){
$("#elm2").stop().animate({opacity:0,},"slow"); // fade out the google icon...
$("#elm").stop().animate({opacity:1,},"slow"); // fade in the ego icon...
}, function(){
$("#elm2").stop().animate({opacity:1,},"slow"); // fade in the google icon... since we've left the element
$("#elm").stop().animate({opacity:0,},"slow"); // fade out the ego icon... since we've left the element
});</script>
Using Just CSS:
- Code:
<div id="element"></div><!-- THE ELEMENT THAT WILL BE CHANGING BACKGROUNDS -->
<style>
#element {background: url(http://www.google.com/favicon.ico);width:100px;height:100px;} /* Set the BG to google icon */
#element:hover {background: url(http://www.ego-one.com/favicon.ico);} /* Turn the BG to ego icon on hover */
</style>
bye