Announcements
Become a partner of Graphic Holdine, use the correct post!

1
Changing Background on Sat Apr 02, 2011 7:51 am
Guest
Guest
From Ego-one...

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 Wink

Permissions in this forum:
You cannot reply to topics in this forum


Designed by Jaloxin, Coded by Gangstar15 © 2011 All rights reserved.

Private forum on Forumotion | Computers and Internet | Graphics, Design | © PunBB | Free forum support | Contact | Report an abuse | Forumotion