• Page 1 of 1
  • 1
uCause Community » Trash & Archives » Other » [jQuery] Image mouseover fading
[jQuery] Image mouseover fading
AcidDate: Monday, 2010-09-06, 5:31 PM | Message # 1
Member
Group: Senior Members
Messages: 473
Awards: 8
Reputation: 14
Status: :-(
@none.png
First things first,get two images. As example the following.

Download and upload the JS into your file manager.

jquery.js


This is the CSS.

Code


<style>
           
div.fadehover {
      position: relative;
      }
           
img.a {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
             }
           
img.b {
      position: absolute;
      left: 0;
      top: 0;
      }
           
</style>


And this is the body code

Code

<div class="fadehover">
<img src="logo.png" alt="" class="a" />
<img src="logo-b.png" alt="" class="b" />
</div>


And everything together.

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
           
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
           
});
</script>
<style>
div.fadehover {
      position: relative;
      }
           
img.a {
      position: absolute;
      left: 0;
      top: 0;
             z-index: 10;
      }
           
img.b {
      position: absolute;
      left: 0;
      top: 0;
      }
</style>
</head>
           
<body>
<div class="fadehover">
<img src="cbavota-bw.jpg" alt="" class="a" />
<img src="cbavota.jpg" alt="" class="b" />
</div>
</body>
</html>


To use as a logo on your site, use this code

Code

<script type='text/javascript' src='JQUERY.JS URL'></script>
<script type='text/javascript'>
$(document).ready(function(){
           
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
           
});
</script>
<style>
div.fadehover {
      position: relative;
      }
           
img.a {
      position: absolute;
      left: 0;
      top: 0;
             z-index: 10;
      }
           
img.b {
      position: absolute;
      left: 0;
      top: 0;
      }
</style>
</head>
           
<body>
<div class="fadehover">
<img src="YOUR IMAGE URL" alt="" class="a" />
<img src="YOUR IMAGE URL" alt="" class="b" />
</div>
</body>
</html>

Where YOUR IMAGE URL and JQUERY.JS URL is, replace with your own url's.
And then replace your logo with the code.


 
0 Thanked you For This Useful Post:
AnimorphDate: Monday, 2010-09-06, 5:59 PM | Message # 2
uCause forum Admin
Group: Developer
Messages: 2835
Awards: 73
Status: :-(
Acid, nice tutorail this will help alot of people biggrin
 
0 Thanked you For This Useful Post:
AcidDate: Monday, 2010-09-06, 6:07 PM | Message # 3
Member
Group: Senior Members
Messages: 473
Awards: 8
Reputation: 14
Status: :-(
Animorph, Saw the fading effect on YouPlay.clan.su, and guessed that this would help alot of people without flash or animation knowledge (:
But my code is better, since this one doest loop if you put the mouse over several times fast (:
And loads much quicker.




Message edited by Acid - Monday, 2010-09-06, 6:08 PM
 
0 Thanked you For This Useful Post:
CreativeCollusionsDate: Monday, 2010-09-06, 6:23 PM | Message # 4
Member
Group: Senior Members
Messages: 359
Awards: 2
Reputation: 5
Status: :-(
Acid, nice tutorial but you must acknowledge that the 'Code Tag' just not allow BB Tags such as colours and so on. I just had a look at the scripts and you have included some BB Tags inside the final code. I just suggest you remove them, other users may not realise.

BB-Tags found inside the script:

Code
[color=red] [/color]

Also why not include a simple demo of this script?

Thanks.


Creative Collusions is a web & graphics studio based in Yorkshire, England.

Twitter:
@CCollusions (Company) and @elliottmangham (Personal)


Message edited by elliottm - Monday, 2010-09-06, 6:24 PM
 
0 Thanked you For This Useful Post:
AcidDate: Monday, 2010-09-06, 6:29 PM | Message # 5
Member
Group: Senior Members
Messages: 473
Awards: 8
Reputation: 14
Status: :-(
elliottm, oh, will fix.
There is a demo.


 
0 Thanked you For This Useful Post:
CreativeCollusionsDate: Monday, 2010-09-06, 6:32 PM | Message # 6
Member
Group: Senior Members
Messages: 359
Awards: 2
Reputation: 5
Status: :-(
Quote (Acid)
There is a demo.

Yes sorry, never noticed. My bad wink


Creative Collusions is a web & graphics studio based in Yorkshire, England.

Twitter:
@CCollusions (Company) and @elliottmangham (Personal)
 
0 Thanked you For This Useful Post:
AcidDate: Monday, 2010-09-06, 6:38 PM | Message # 7
Member
Group: Senior Members
Messages: 473
Awards: 8
Reputation: 14
Status: :-(
elliottm, You missed the very first text biggrin
ehehe.


 
0 Thanked you For This Useful Post:
AnimorphDate: Monday, 2010-09-06, 6:38 PM | Message # 8
uCause forum Admin
Group: Developer
Messages: 2835
Awards: 73
Status: :-(
Quote (Acid)
Animorph, Saw the fading effect on YouPlay.clan.su, and guessed that this would help alot of people without flash or animation knowledge (:
But my code is better, since this one doest loop if you put the mouse over several times fast (:
And loads much quicker.

yes ive seen really nice biggrin

 
0 Thanked you For This Useful Post:
CreativeCollusionsDate: Monday, 2010-09-06, 9:21 PM | Message # 9
Member
Group: Senior Members
Messages: 359
Awards: 2
Reputation: 5
Status: :-(
Quote (Acid)
You missed the very first text

I know lol, FAIL tongue


Creative Collusions is a web & graphics studio based in Yorkshire, England.

Twitter:
@CCollusions (Company) and @elliottmangham (Personal)
 
0 Thanked you For This Useful Post:
AcidDate: Monday, 2010-09-06, 10:08 PM | Message # 10
Member
Group: Senior Members
Messages: 473
Awards: 8
Reputation: 14
Status: :-(
Well, I'm going to post other versions of the code later, just going to change them.

 
0 Thanked you For This Useful Post:
AnimorphDate: Monday, 2010-09-06, 11:29 PM | Message # 11
uCause forum Admin
Group: Developer
Messages: 2835
Awards: 73
Status: :-(
Quote (Acid)
Well, I'm going to post other versions of the code later, just going to change them.

nice thankyou Acid, for being a good staff member

 
0 Thanked you For This Useful Post:
BlueBirdDate: Sunday, 2010-11-14, 4:06 PM | Message # 12
Member
Group: Senior Members
Messages: 3
Awards: 0
Reputation: 0
Status: :-(
@none.png
Link Not Found !!
 
0 Thanked you For This Useful Post:
AnimorphDate: Sunday, 2010-11-14, 4:40 PM | Message # 13
uCause forum Admin
Group: Developer
Messages: 2835
Awards: 73
Status: :-(
@none.png
Acid, you should try to fix this

BlueBird, you should stop with the

Code
!!!

its really giving a bad image about you towards staff

 
0 Thanked you For This Useful Post:
AcidDate: Sunday, 2010-11-14, 5:26 PM | Message # 14
Member
Group: Senior Members
Messages: 473
Awards: 8
Reputation: 14
Status: :-(
@none.png
BlueBird, Sorry, forgot to efit the tutorial after I moved from the uCoz system.

Post edited.


 
0 Thanked you For This Useful Post:
uCause Community » Trash & Archives » Other » [jQuery] Image mouseover fading
  • Page 1 of 1
  • 1
Search:


"Making uCoz web designs simple and easy to use"
- uCause Developers