2

How does the logo in the top left corner of the screen gradually change color as a rollover? I think its done in jquery. If you don't know the code can you point me to a tutorial that can? Thanks.

http://www.shopdev.co.uk/blog/

UPDATE: Thanks everyone, I've posted a working version of the code below,

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ // load the logo transition $("#logo span").css("opacity","0"); $("#logo span").css("display","block"); // logo animation $("#logo").hover(function() { $("#logo span").stop().animate({opacity:1},'slow'); }, function() { $("#logo span").stop().animate({opacity:0},'slow'); }); }); </script> <style type="text/css"> #logo span{ background: url(logo2.gif) no-repeat scroll center bottom; width:257px; height:75px; position:absolute; } img{ border:0; } </style> </head> <body> <div id="logo"><a href="#"><span></span><img src="logo.gif"/></a></div> </body> </html>
Improve this question
2
  • 2
    Use the View Page Source command in your browser. Look for the words opacity or animate in the result. Commented Nov 17, 2009 at 17:21
  • You can do it with much less html if you use the jquery-ui library, see my answer. Commented Nov 17, 2009 at 17:54

6 Answers 6

Reset to default
9

Did you try looking at the source code to the page? It's an opacity change.

// load the logo transition $("#logo span").css("opacity","0"); $("#logo span").css("display","block"); // logo animation $("#logo").hover(function() { $("#logo span").stop().animate({opacity:1},'slow'); }, function() { $("#logo span").stop().animate({opacity:0},'slow'); });

So an image over another image, with the front one fading in and out gradually. NOT a color change.

Note the warning above the code:

// whoah there... This source code is copyright ShopDev. By all means, use this website as a source of inspiration - just don't plagiarize! //
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

"An image over another image". Not quite, a span is not an image ;)
It's an image, just not an img. :-)
Firefox and Firebug are the best way to see it, btw. You can actually watch the HTML change as you mouse over.
1

Set the blue image as the background of the div. Add the red image in the div as a normal image so that it covers the background image. You can place it in a span. On hover, you then change the opacity of the red image so that the blue image shows through. This is easy to animate in jQuery. On mouseout, do the oposite.

Improve this answer

Comments

0

Right click on the page and hit "View Source". Your answer is in the the JavaScript block in the first 40 lines of the file. (Your jQuery assumption is correct)

Improve this answer

Comments

0

it has two logo images. one blue one red. red is shown by default. logo image has a sibling span and its background image is the blue logo. span has an opacity of 0. when mouse over the span's opacity is gradually change to 1

Improve this answer

Comments

0

Probably two images that are "faded" with css opacity. When one is maximum opacity the other has minimum. The transition is made my increasing one opacity and lowering another

Improve this answer

Comments

0

Nosredna is correct but if you want something simpler that you can use yourself without getting attacked for plagiarism;

First you will need a 24-bit PNG or a gif image with a transparent part - the example has transparent liquid.

make sure you include jquery, jquery-ui (becasue it adds CSS background color animation) and your image hover effect

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#logo") .css({"backgroundColor: "#fff"}) .hover(function() { $(this).stop().animate({backgroundColor: "#f00"}, 'slow'); }, function() { $(this).stop().animate({backgroundColor: "#fff"}, 'slow'); }); }); </script>

then in the body drop in your image with the correct ID

<img src="mylogo.png" id="logo" width="100" height="100" />
Improve this answer

1 Comment

Never tested it with a PNG applied as a Filter in IE6 - my guess is no? but if you use a GIF, my test did.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.